最終更新日 
animationプロパティ
animationは、アニメーション関連プロパティをまとめて指定するショートハンドプロパティです。
animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-directionの順番で、各プロパティの値を半角スペースで区切って並べます。
複数指定する場合は、値のセットをカンマで区切ります。
CSS3での変更点
・animationは、CSS3から新しく追加されたプロパティです。
| 初期値 | 適用先 | 継承 |
|---|---|---|
| 各プロパティの初期値 | すべての要素、::before擬似要素セレクタ、::after擬似要素セレクタ | なし |
| 値 | 説明 |
|---|---|
| animation-nameの値 | 適用するアニメーションの名前を指定します。 |
| animation-durationの値 | アニメーション1回分の再生時間を指定します。 |
| animation-timing-functionの値 | アニメーションの速度に緩急をつけます。 |
| animation-delayの値 | アニメーションの開始を遅らせます。 |
| animation-iteration-countの値 | アニメーションの再生回数を指定します。 |
| animation-directionの値 | アニメーションを逆方向に再生させます。 |
サンプルコード
animation: anime1 10s linear 3s 2 normal; animation: anime1 10s linear 3s 2 normal, anime2 15s ease-in 4s 5 reverse;
参考文献：CSS Animations
当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。