初めてのcssアニメーション

こんにちは梶原です。
まずはこちらをご覧ください。

すべて CSS のみで動いてます！ #私を布教して #css pic.twitter.com/OG2HAnEBP9

— Yusuke Nakaya (@s14garnet) 2018年11月13日

おわかりいただけたでしょうか。
「ぇ！これ全部cssだけで動いてるの？」
私の中でけっこうな衝撃を受けました。CGみたいですよね。もはや小宇宙。英語でミクロコスモ。
千里の道も一歩からということで実際にcssでアニメーションを作ってみましょう。

Animate.cssでアニメーション

Animate.cssを読み込ませれば初心者でも簡単にアニメーションをつけることができます。

See the Pen wQNMqR by Airi Kajihara (@kajihara) on CodePen.

①アニメーションをつけたい要素のclassに「animated」とclass名をつけます。
②class名にアニメーションの動きを追加。ここでは「bounce」を追加しています。
これだけでアニメーションが動きます。「infinite」をclass名に追加すると永遠に繰り返してくれます。時間や繰り返し回数などアニメーション自体のカスタマイズもできるみたいです。

transitionプロパティでアニメーション

青い鳥にマウスオンすると、回転しながら大きさが変化します。

See the Pen animation by Airi Kajihara (@kajihara) on CodePen.

よくリンクにマウスを当てると色が変わったりしますが、その時の動きにtransitionは使われていますね。
transitionは何かアクションをすると動いてくれます。逆にこちらが何もしなければ動いてくれません。簡易的なアニメーションになります。

animationプロパティでアニメーション

青い鳥が右往左往していますね。

See the Pen transition by Airi Kajihara (@kajihara) on CodePen.

animationプロパティは本格的なアニメーションに向いています。@keyframesで開始や終了のタイミング、途中の動きを細かく設定できるためです。
animationプロパティに@keyframesの名前を関連づけています。
▲デモでは偶数回のみ逆再生で永遠に繰り返しの指定をしています。

番外編

クリックした位置まで青い鳥が追いかけてくれます♩

See the Pen yQZYRG by Airi Kajihara (@kajihara) on CodePen.

こちらはjQueryを使っていますが、かわいいので作ってみました。JSと組み合わせると表現の幅が広がりますね。

以上、cssアニメーションの超基本的なことをまとめてみました。
今回は弊社ロゴのSVGデータを使ってみましたが、今後は3Dアニメーションにも挑戦してみたいです。
青い鳥とたくさん戯れることができて楽しかったです、まる＾＾

▼参考記事

• 【CSS】SVG + CSS3で簡単にアニメーションを作成する！
• CSS3 アニメーション

kajihara

Kindleとお風呂で３時間トリップ。 主にコードを書いています。