CSSアニメーションのプロパティ
プロパティ
animation-name: fooBarAnime;
animation-duration: 3s;
animation-timing-function: ease; //ease linear ease-in ease-out ease-in-out cubic-bezier()
animation-delay: 0.5s;
animation-iteration-count: infinite; //繰り返し回数
animation-direction: normal; //反転 alternate 通常 normal
animation-fill-mode: backwards;ショートハンド例
el{animation : slideIn 0.3s linear 1s 0 alternate forwards;}animation-fill-mode
https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode
| 設定値 | 終了時 | 開始待ち（animation-delay） |
|---|---|---|
| none（初期値） | 元のスタイル @keyframesは適用されない | 元のスタイル @keyframes は適用されない |
| forwards | @keyframeの100% | 元のスタイル @keyframes は適用されない |
| backwards | @keyframes の0% | 最初のキーフレームのスタイルを適用 @keyframes の0% |
| both | 終了時のスタイルを適用 @keyframeの100% | 開始時のスタイル @keyframes の0% |
animation-timing-function
| ease（初期値） | アニメーションの開始・終了付近の動きを滑らかに |
| linear | 直線的に再生 |
| ease-in | アニメーションの開始付近の動きを緩やかに |
| ease-out | アニメーションの終了付近の動きを緩やかに |
| ease-in-out | アニメーションの開始・終了付近の動きを緩やかに |
| cubic-bezier() | 三次ベジェ曲線 |