【アニメーション特集 -2】CSSアニメーションの基本・作り方まとめ

【アニメーション特集 -2】CSSアニメーションの基本・作り方まとめ | FASTCODING BLOG

アニメーションをシリーズでまとめて見よう！第二回は、「CSSアニメーションの基本・作り方まとめ」です。CSSアニメーションで実際に、利用場面が多いボタンエフェクトや要素をスライドインさせる動きを作ってみようと思います。

fastcoding.jp

transitionでクリック時にボタンに動きを付ける

ホバーでアニメーションが１回再生されます。

CodePen Embed - 　CSS transition list

codepen.io

animationでボタンに動きを付ける

自動再生でループ、または１回再生などが設定できます。

CodePen Embed - CCS animation list

codepen.io

animationで要素をふわっと下からスライドインさせる

ファーストビューの要素をスライドインアニメーションさせています。
Webサイトでよく見られる手法ですね。
https://codepen.io/fikgpnyd/embed/gOwEddo?height=265&theme-id=light&default-tab=result
※もう一度、見たい場合は、右下の「Rerun」をクリックして下さい。

まとめ

CSSアニメーション、簡単に実装できましたね。ここに、再生や逆再生などの細かな動きを付ける場合や複雑なアニメーションの場合は、JavaScriptアニメーションを利用します。