最終更新日

animationプロパティ

animationは、アニメーション関連プロパティをまとめて指定するショートハンドプロパティです。

animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-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外部リンク
HOME