アニメーションを作る際にはtransitionやanimationプロパティを用います。
transitionは細かい動きの指定ができない分複雑な指定はありません。
transitionを指定したクラスと変化させたいプロパティを記述したクラスを用意し、後者をJSからつけ外しすることでアニメーションさせます。
![](https://eclair.media/wp-content/uploads/2022/01/スクリーンショット-2022-01-07-16.23.35.png)
![](https://eclair.media/wp-content/uploads/2022/01/ezgif-7-3faaa04387.gif)
animationプロパティは、@keyframesという記述と主に使います。@keyframesに具体的なアニメーションの動きを指定し、animationプロパティでどのように動かすかを指定する形です。
![](https://eclair.media/wp-content/uploads/2022/01/スクリーンショット-2022-01-23-12.21.06.png)
![](https://eclair.media/wp-content/uploads/2022/01/ezgif-5-d2ec30878e.gif)
そんなCSSアニメーションを学べる記事をまとめました。
![](https://eclair.media/wp-content/uploads/2022/01/crestadesign.org_css-transition_Nest-Hub-1024x600.png)
URL:https://crestadesign.org/css-transition/
transitionの基本的な内容がまとまっています。CSSでアニメーションを作る場合、基本的な動きはtransitionのみで解決できるのでまずはこちらを読みましょう。
難易度:★★☆
![](https://eclair.media/wp-content/uploads/2022/01/coco-factory.jp_ugokuweb_css02_Nest-Hub-1024x600.png)
URL:https://coco-factory.jp/ugokuweb/css02/
とりあえずCSS Animationを触りたいという場合にちょうど良い量でまとまっています。CSS Animationを使ったことがない方は、まずこちらを読んで使い方を理解しましょう。
難易度:★★☆
![](https://eclair.media/wp-content/uploads/2022/01/qiita.com_soarflat_items_4a302e0cafa21477707fNest-Hub-1024x600.png)
URL:https://qiita.com/soarflat/items/4a302e0cafa21477707f
これだけ読めばTransition、Animationどちらについても広く学ぶことができます。非常に網羅的かつ分かりやすくまとまっているので、困った時はこれを読めばOK。ある程度アニメーションを知っていても、チートシート的に使うことができます。
難易度:★★★