当サイトではCookieを使用します。Cookieの使用に関する詳細は「プライバシーポリシー」をご覧ください。
OK
 
2018.12.01

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

438

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


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

Animate.cssでアニメーション

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

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


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

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

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

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


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

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

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

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


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

番外編

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

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


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

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

▼参考記事

Contact