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

transition-delayプロパティは、CSSトランジションの開始を遅延させる時間（待機時間）を保持するプロパティです。

このプロパティを設定することで、要素のスタイル変化がアニメーションとして実際に始まるまでの待機時間を指定します。例えば、要素に「transition-delay: 0.5s;」と設定すると、スタイル変化から0.5秒後にアニメーションが開始され、ウェブページに緩急や演出効果を与えます。

値は時間単位で、「s」（秒）または「ms」（ミリ秒）で指定します。「1s」は1秒、「300ms」は0.3秒の遅延です。正の値を指定すると、その時間だけトランジション開始が遅延します。負の値を指定することもでき、この場合、アニメーションが途中から始まるように見せる効果があります。

transition-delay は、transition-property（変化対象のCSSプロパティ）、transition-duration（変化にかかる時間）、transition-timing-function（変化の速度曲線）といった他のトランジションプロパティと組み合わせて使用されます。これらは transition ショートハンドプロパティで一括設定可能です。複数のCSSプロパティに異なる遅延を適用する場合は、カンマ区切りで複数の値を指定します。このプロパティの活用は、ウェブコンテンツの動的な表現を豊かにし、ユーザー体験を向上させます。

Copy
1.element {
2  transition-delay: 0.5s;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません