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

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

transitionでクリック時にボタンに動きを付ける
animationでボタンに動きを付ける
animationで要素をふわっと下からスライドインさせる
まとめ

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

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

CodePen Embed - 　CSS transition list

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

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

CodePen Embed - CCS animation list

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

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