transition-delay:トランジションが開始する前の待ち時間を指定する

初期値 0s
適用対象 全ての要素、::before::after擬似要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

transition-delayプロパティの説明

transition-delayは、トランジションが開始する前の待ち時間を指定します。待ち時間は正数、負数、あるいはゼロで表します。既定値ではゼロ秒に設定されているため、トランジションは開始条件を満たすと即座に始まります。

正数を指定した場合は、トランジションの開始条件を満たしてから開始するまでの間に遅れが発生します。負数を指定した場合は、与えられた時間をすでに実行されたものとみなして、トランジションの途中から効果が始まります。

トランジションの待ち時間をプロパティごとに設定することもできます。対象となるプロパティをtransition-propertyのカンマ区切りのリストで指定し、それと対応する形でtransition-delayを定義します。

これらの指定は、ショートハンド・プロパティのtransitionで一括操作が可能です。

transition-delayに指定できる値

<time>
トランジション効果の開始条件を満たしてから実際に始まるまでの待ち時間を表します。構文は単位付きの数字で、秒かミリ秒が扱えます。

transition-delayの使い方とサンプル

transition-delayプロパティの構文は以下の通りです。

CSS
/* <time>値 */
transition-delay: 0s;
transition-delay: 1s;
transition-delay: 2.4s;
transition-delay: -2.4s;
transition-delay: 100ms;
transition-delay: -100ms;

/* 複数の値 */
transition-delay: 1s, -500ms;

/* グローバル値 */
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: unset;

transition-delayの実例

それでは実際にtransition-delayプロパティの書き方を見ていきましょう。以下の例は、マウスポインタが重なった時に特定のスタイルが変化するボックスに対して、トランジションの開始時間だけを変えた場合の比較です。

色のついたボックスにポインタを重ねて確認してみましょう。マイナスの時間が与えられているボックスは、トランジションの変化が途中から始まったように見えます。スマートフォンやタブレットの場合はタップで発動するように、ontouchstart属性を付与しています。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > div {
	width: 100%;
	margin: 1rem 0 0;
	padding: .5rem 1rem;
	border: 1px solid #000;
	background-color: #09f;
	color: #fff;
	cursor: pointer;
	transition-duration: 1s;
	transition-property: width;
}
section > div:hover {
	width: 50%;
	background-color: #f90;
}
#td_1 {
	transition-delay: 0s;
}
#td_2 {
	transition-delay: 500ms;
}
#td_3 {
	transition-delay: 2s;
}
#td_4 {
	transition-delay: -500ms;
}
#td_5 {
	transition-delay: -2s;
}
HTML
<div class="samp_box">
	<section>
		<div id="td_1" ontouchstart>transition-delay: 0s;</div>
		<div id="td_2" ontouchstart>transition-delay: 500ms;</div>
		<div id="td_3" ontouchstart>transition-delay: 2s;</div>
		<div id="td_4" ontouchstart>transition-delay: -500ms;</div>
		<div id="td_5" ontouchstart>transition-delay: -2s;</div>
	</section>
</div>

transition-delayに関連するCSSプロパティ

トランジション
transition 時間によって変化するトランジション効果の値をまとめて操作する
transition-delay トランジションが開始する前の待ち時間を指定する
transition-duration トランジションが開始してから終了するまでの時間を指定する
transition-property トランジションの対象となるプロパティを指定する
transition-timing-function トランジションが開始してから終了するまでの変化の遷移を指定する