最終更新日 2021年6月22日

animation-delayプロパティ

animation-delayは、アニメーションの開始を遅らせるためのプロパティです。

アニメーションが実際に始まるまでの時間を「s」など単位付きの値で指定します。初期値は「0」で、その場合、アニメーションはすぐに再生されます。

負の値を指定した場合、過去に遡ってアニメーションが開始していたとみなされ、アニメーションが負の値の分進行した位置からすぐに再生されます。

animation-nameで複数のアニメーションを指定した場合、animation-delayの値も、カンマで区切って複数指定できます。

アニメーション関連のプロパティをまとめて指定する場合は、animationを使用します。

CSS3での変更点

・animation-delayは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
0	すべての要素、::before擬似要素セレクタ、::after擬似要素セレクタ	なし

値	説明
時間を示す値	「10s」や「15ms」のように、数値に単位を付けて指定します。単位は、秒を表す「s」、ミリ秒（1/1,000秒）を表す「ms」のいずれかを指定できます。

サンプルコード

animation-delay: 5s;
animation-delay: 300ms;
animation-delay: 5s, 10s;
animation-delay: 300ms, 120ms;
animation-delay: 5s, 10s, 15s;
animation-delay: 300ms, 120ms, 200ms;

参考文献：CSS Animations

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。