【CSS】animationプロパティ一覧
CSSでアニメーションを定義する時に使うanimationプロパティのメモです
個別プロパティの指定値と初期値
| プロパティ | 内容 | 指定可能な値 | 初期値 |
| animation-name | キーフレーム名 | 文字列 | none |
| animation-duration | 所要時間 | 秒 | 0s |
| animation-delay | 遅延時間 | 秒 | 0s |
| animation-direction | 繰り返しの方向 | normal、reverse、alternate、alternate-reverse | normal |
| animation-iteration-count | 繰り返し設定 | infiniteで繰り返し | 1 |
| animation-play-state | アニメーションの状態 | running、paused | running |
| animation-timing-function | キーフレームの進み具合（イージング） | ease、ease-in、ease-out、linear、step-start、step-end | ease |
| animation-fill-mode | アニメーション前後のスタイル | none・ほか、詳細 | none |
animationでの一括指定
個別のプロパティをまとめて指定できるanimationプロパティ
animationプロパティを使った場合も各プロパティ初期値を参照しますので指定していないものは各初期値となります
animationで一括指定する際の値の順番は、第何引数はーなどの決まりはなく実行してくれる
一般的に多くみられる順番は
「name」「duration」「timing-function」「iteration-count」
「キーフレーム名」「アニメーション時間」「イージング」「繰り返し処理」
.sample{
animation: keyName 5s ease-out infinite;
}
@keyframes keyName{0% {}100% {}}