CSS animationプロパティ説明

少しでも間違っていたりするとアニメーションが動かなくなります。
メモ。

①animation-name
アニメーションの名前

②animation-duration
アニメーションが始まって終わるまでの時間

• s 秒
• ms ミリ秒

③animation-timing-function
アニメーションの種類

• ease 初期値・開始時と終了時は緩やかに変化
• ease-in 開始時は緩やかに変化、終了に近づくと早く変化
• ease-out 開始時は早く変化し、終了時は緩やかに変化
• ease-in-out 開始時と終了時は、かなり緩やかに変化
• linear 開始から終了まで一定に変化
• step-start 開始時に最終の状態
• step-end 終了時に最終の状態
• steps(正数,start) 指定した正数の段階で変化、アニメーション開始時から変化
• steps(正数,end) 指定した正数の段階で変化、アニメーション終了時に変化

④animation-delay
アニメーションが始まる時間

• s 秒
• ms ミリ秒

⑤animation-iteration-count
アニメーションの繰り返し回数

• 無限に繰り返したい場合：infinite

⑥animation-direction
アニメーションの再生方向

• normal 初期値・指定した通りのアニメーションが再生
• reverse 逆方向からのアニメーションが再生
• alternate 順方向、逆方向のアニメーションを交互に繰り返し
• alternate-reverse逆方向、順方向のアニメーションを交互に繰り返し

⑦animation-fill-mode
アニメーションの開始前、終了後のスタイル

• none 初期値・アニメーションの開始前、終了後には適用されない
• forwards アニメーション終了時のスタイルがアニメーション終了後にも適用
• backwards アニメーション開始時のスタイルがアニメーション開始前にも適用
• both forward と backwards の両方が適用

⑧animation-play-state
アニメーションの再生・停止を指定

• running アニメーションが実行
• paused アニメーションが停止