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

https://fastcoding.jp/blog/all/info/animation-2/

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

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

https://codepen.io/fikgpnyd/embed/NWRJzNJ?height=265&theme-id=light&default-tab=result

　　

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

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

https://codepen.io/fikgpnyd/embed/abmMKGy?height=265&theme-id=light&default-tab=result

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

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

　　

まとめ

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