【CSS Modules】animation-delayプロパティの使い方

animation-delayプロパティは、CSSアニメーションの開始を遅延させる時間を保持するプロパティです。このプロパティを使用することで、要素に適用されたアニメーションが、指定された時間だけ待機してから再生を開始するように制御できます。

値には、秒単位を示すs（例：2s）やミリ秒単位を示すms（例：500ms）といった、時間を示す数値を指定します。例えば、animation-delay: 3s;と設定すると、ウェブページがロードされたり、アニメーションがトリガーされたりしてから、3秒間待機した後にアニメーションが再生され始めます。

このプロパティには負の値を指定することも可能です。負の値を設定した場合、アニメーションは遅延することなく直ちに再生を開始しますが、指定された負の絶対値の時間分、アニメーションの途中から再生が開始されます。例えば、アニメーションが全体で5秒間実行される場合にanimation-delay: -2s;と指定すると、アニメーションは開始から2秒経過した状態から再生が始まり、残りの3秒間が実行されます。

animation-delayプロパティは、animationショートハンドプロパティの一部として他のアニメーション関連プロパティとまとめて設定することもできます。ウェブサイトやアプリケーションにおいて、アニメーションの再生タイミングを細かく調整し、ユーザー体験を向上させるために重要な役割を果たします。

Copy
1animation-delay: 1s;

引数なし

引数はありません

戻り値なし

戻り値はありません