カレーを例にしたCSSアニメーションのことはじめ

カレー、ほかほかにさせたくない？

というわけで、今回はカレーに簡単なCSSアニメーションをつけていきたいと思います。

対象

• CSS書けるけど、もうちょっと表現を豊かにしたい人
• CSS アニメーションなんのこっちゃ
• カレーのルーはご飯の真上にぶっかける人

といった方に向けて書いていこうと思います。
CSSアニメーションのテクニックとか、速度を考慮したらこれがベストだ！等の
上級者向けのものは書きません。（当方まだまだペーペーなので）
あくまで基礎のご紹介です！

そもそもCSSアニメーションって？

CSSは以下のように定義されています。

カスケーディングスタイルシートCascading Style Sheets (CSS) はスタイルシート言語であり、 HTML や XML (方言である SVG, MathML, XHTML などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。 CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。

• スタイルシート言語である
• 文書の体裁・見栄えを表現する為に用いる

ざっとこのようなものです。

それを踏まえて、CSSアニメーションというのは
要素をアニメーションさせるCSSの機能の1つであるとされています。

CSSアニメーションは

• Transition
• Animation

に大別されます。

ではそれぞれどういうものなのかを見てみます。

2種類のCSSアニメーション

上記で紹介したTransitionとAnimationについてそれぞれ説明します。

Transition

Transitionは要素の状態間の変化を定義することができます。
例えば、:hover時や、:active時にtransitionを効かせることが可能です。

「〜〜〜」を「〜〜〜」したら「〜〜」を「〜〜〜」に状態変化させる。
と覚えておくとよいと思います。
「カレーに手」を「突っ込ん」だら「手」を「真っ赤」に状態変化させる。
みたいな感じ。サイコパス

また、transitionは一方通行！繰り返しません。

transitionで指定できるプロパティは以下です。

プロパティ名	効果	記述例
transition-property	トランジションの効果を適用するプロパティ	transition-property: opacity;
transition-duration	アニメーションの継続時間	transition-duration: 1s;
transition-timing-function	加速曲線の定義	transition-timing-function: ease-in;
transition-delay	アニメーションが始まるまでの待ち時間の定義	transition-delay: 250ms;

これらのプロパティは、transitionプロパティで一括指定できます。
transition-propertyはallにすつことで全てのプロパティへの適用ができます。

transition: {プロパティ名} {継続時間} {加速曲線} {待ち時間};
transition: margin-right 4s ease-in-out 1s;

長くなりましたが、Transitionのまとめは以下です。

• Transitionは状態を変化させるアニメーションを付与できる
  • 「〜〜〜」を「〜〜〜」したらを指定する
• 1回きりであり、繰り返しの再生はできない
• 指定できるのは以下で、一括指定できる
  • トランジションを適用するプロパティ
  • アニメーションの継続時間
  • 加速曲線の定義
  • アニメーションが始まるまでの待ち時間

Animation

続いてAnimationについてです。
Animationは要素の状態間の変化を定義するTransitionに対し、スタイル間のアニメーションを適用します

なので、Transitionの「〜〜〜」を「〜〜〜」にしたら部分はごっそり不要になり、
「〜〜〜」を「〜〜〜」にするのみの記述になります。

また、Animationはアニメーションの繰り返しを行うことが可能です。

animationプロパティで指定できるものは以下です。

プロパティ名	効果	記述例
animation-name	トランジションの効果を適用するプロパティ	transition-property: opacity;
animation-duration	アニメーションの継続時間	transition-duration: 1s;
animation-timing-function	加速曲線の定義	transition-timing-function: ease-in;
animation-delay	アニメーションが始まるまでの待ち時間の定義	transition-delay: 250ms;
animation-iteration-count	アニメーションが停止するまでの再生回数	animation-iteration-count: infitite;
animation-direction	再生の向きの設定	animation-direction: forwards;
animation-fill-mode	アニメーション再生中・再生後のスタイルの指定	animation-fill-mode: both;
animation-play-state	アニメーションが実行中か停止中かの設定	animation-play-state: paused;

こちらもanimationプロパティで一括指定できます。

animation: {アニメーション名} {継続時間} {加速曲線} {再生開始までの待ち時間} {再生の向き} {再生中・再生後のスタイル指定} {停止中or実行中};
animation: fadeIn 3s ease-in-out 1s reverse both running;

Animationのまとめは以下です。

• transitionより指定できるプロパティが多い
• 状態変化の「〜〜〜」を「〜〜〜」にしたらの指定はしない
• 繰り返し再生ができるし再生回数も指定できる

アニメーション指定方法

Transition

実際にtransitionを適用する場合は以下のようなコードになります。
例として、このカードにマウスオーバーした時に不透明度を下げましょう

<div class="card">
  <a class="card_link" href="#">
    <span class="card_title">おいしいカレー ¥500</span>
    <span class="card_image">
      <img  src="https://japaclip.com/files/curry-rice.png" alt="">
    </span>
  </a>
</div>

transitionの対象を.cardとし、マウスオーバー時の指定を:hoverにしてあげます。

.card {
  color: #333;
  cursor: pointer;
  width: 200px;
  transition: opacity 1s ease-in-out; //transition対象を宣言
  &:hover {
    opacity: .7; //hover時の変化を指定
  }
}

ふわぁんと薄くなりましたね。

実際のコードは以下にあります。
https://codepen.io/thugumi-ishimaru/pen/BgxgrR?editors=1100

Animation

animationを指定する時は、「何秒のときにどの状態」が必要になるので、
css側に@keyframesの作成が必要です。
構文は以下です。

@keyframes animation-name {
 0% {
  アニメーション開始時の処理 
 }
 100% {
  アニメーション完時の処理
 }
}

animation-nameは任意の名前にしてください。
上記の@keyframesを作った上で、要素にanimationを適用させます。

こちらはせっかくなので、以下のカレーを題材にしましょう。

カレーに湯気を......

はい、お待たせしました。
お腹空きましたかね、私まだお昼ご飯食べてないのでお腹空きました。

こんなカレー鍋を作りました。
湯気がゆらゆらしてるものです。
（スマホでバグってすみません）

See the Pen カレー鍋 by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen.

湯気（.yuge）を用意します。
class名雑なのは自覚あるので許して

<div class="curryPot">
  <div class="curryPot_head">
     (中略)
    <div class="yuge"></div>
  </div>
     (中略)
</div>

.yugeの擬似要素に対して今回は
opacityとtransitionプロパティのアニメーションをつけます。
この時、アニメーションさせる対象の要素に対して、@keyframesの0%の状態と同じ値を
指定しておく必要があります。

.yuge {
  position: relative;
  &:before,
  &:after {
    animation: yugeUp 5s ease-in-out infinite; //ここが！アニメーションの！指定だよ！アニメーションの時間は5秒間！永遠再生してください！！！！
    opacity: 0; //@keyframesの0%のときと同じ値
    transform: translateY(-15px); //@keyframesの0%のときと同じ値
  }
  &:before {
    content: "";
    position: absolute;
    height: 200px;
    top: -250px;
    left: 60px;
    border-right: 0px solid transparent;
    border-top: 2px solid #fff;
    border-left: 135px solid #fff;
    border-bottom: 12px solid transparent;
    filter: blur(35px);
    z-index: 4;
    transform: rotate(168deg) skewY(10deg);
    border-radius: 80% 0 10% 10%;
  }
  &:after {
    content: "";
    height: 200px;
    top: -180px;
    right: 60px;
    display: block;
    position: absolute;
    border-right: 0px solid transparent;
    border-top: 2px solid #fff;
    border-left: 125px solid #fff;
    border-bottom: 12px solid transparent;
    filter: blur(35px);
    z-index: 4;
    transform: rotate(168deg) skewY(10deg);
    border-radius: 80% 0 10% 10%;
  }
}

で、css内に@keyframesを設定します。

@keyframes yugeUp {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  50% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    transform: translateY(-250px);
  }
}

これでほかほかのカレーができました！
めしあがれ！！！！！！

まとめ

今回はカレーを題材にしてCSSアニメーションを紹介しました。
以下を覚えてたらなんとなく、多分、実務で、できるかもしれません。

• transitionとanimationの2種類があるよ
• transitionは「〜〜」に「〜〜」をしたらの指定が必要だよ
• animationは@keyframesの設定と再生開始時の指定が必要だよ

もっと詳しく知りたい人はぜひ手元でCSSアニメーション使って遊んでみてください！

ありがとうございましたー！
引き続きよろしくお願いします。