カレーを例にした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プロパティで一括指定できます。
transition-propertyはallにすつことで全てのプロパティへの適用ができます。

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

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

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

Animation

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

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

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

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

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

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

Animationのまとめは以下です。

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

アニメーション指定方法

Transition

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

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

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

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

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

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

Animation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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