最近のプロジェクトでは、アニメーション効果を書く必要があり、animationの知識を強固にする必要があります.

animation

animation-nameセレクタにバインドするkeyframe名が必要です

アニメーションの完了に要する時間

animation-delay設定延長時間

animation-timing-functionアニメーションの動き速度

linearアニメーションの最初から最後までの速度は同じです.easeデフォルト.アニメーションは低速で始まり、加速し、終了前に遅くなります.ease-inアニメーションは低速で開始します.ease-outアニメーションは低速で終了します.ease-in-outアニメーションは低速で開始および終了します.Cubic−bezier(n,n,n,n)はcubic−bezier関数における独自の値である.可能な値は0～1です.

アニメーション-iteration-countアニメーションの再生回数

infiniteはアニメーションを無制限に再生すべきだと規定しています.

アニメーション-directionでアニメーションを逆再生

normalのデフォルト値.アニメーションは正常に再生されるはずです.alternateアニメーションは順番に逆再生する必要があります.
---よしこれはここに紹介しよう何か質問があれば自分で調べてみよう

1.animation1

2.animation2

3.animation3

4.animation4

5.animation5