transition-delay

『transition』の『イベント開始からアニメーションが始まるまでの待ち時間』を指定できます。

基本的な使い方は『transition-duration』と同じですが、『transition』でまとめて指定した際に『transition-delay』の値は省略できる為、『transition-duration』の様に上書きをする必要はありません。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。またPCのスペックによっては動きがカクついてしまう場合がありますのでご注意下さい。

サンプルコード

style.css

/* 1秒待ってからアニメーション開始 */
.btn { transition: background-color 0.3s ease; transition-delay: 1s;}

/* 遅延なし（即アニメーション開始）*/
.box { transition: opacity 0.5s; transition-delay: 0s;}

/* 負の値: アニメーションを途中から開始 */
.item { transition: transform 1s; transition-delay: -0.5s;}

/* transition一括指定で遅延を含める（第4引数が遅延） */
.card { transition: background-color 0.3s ease 0.5s;}

/* 複数プロパティに異なる遅延をつける */
.menu-item:hover .icon { transition: transform 0.3s; transition-delay: 0s;}
.menu-item:hover .label { transition: opacity 0.3s; transition-delay: 0.1s;}

ブラウザでの表示結果

div {
	background: #f00;
	width: 200px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;

	transition-delay: 1s;
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-ms-transition-delay: 1s;
}
div:hover {
	width: 300px;
}

対応ブラウザ

デスクトップ

Chrome

26 以降 ○

25 △

24 △

23 △

22 △

21 △

20 △

19 △

18 △

↑ prefix『-webkit-』が必要

Firefox

16 以降 ○

15 △

14 △

13 △

12 △

11 △

10 △

9 △

8 △

↑ prefix『-moz-』が必要

3 以前 ×

Safari

9 以降 ○

8 △

7 △

6 △

5 △

4 △

↑ prefix『-webkit-』が必要

3 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

12.1 以降 ○

10 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

6 △

5 △

4 △

3 △

2 △

↑ prefix『-webkit-』が必要

1 以前 ×

Android Browser

4.4 以降 ○

2 △

↑ prefix『-webkit-』が必要

Chrome Android

概要

『transition』の『イベント開始からアニメーションが始まるまでの待ち時間』を指定できます。

『transition-delay』の値は『,』で区切る事により複数の『アニメーションが始まるまでの待ち時間』を同時に指定できます。

div {
	background: #f00;
	width: 200px;
	height: 100px;

	transition: width 1s, height 1s;
	-webkit-transition: width 1s, height 1s;
	-moz-transition: width 1s, height 1s;
	-ms-transition: width 1s, height 1s;

	transition-delay: 1s, 2s;
	-webkit-transition-delay: 1s, 2s;
	-moz-transition-delay: 1s, 2s;
	-ms-transition-delay: 1s, 2s;
}
div:hover {
	width: 300px;
	height: 200px;
	background: #ff0;
}

指定されているプロパティの数より『transition-delay』の値が少ない場合は指定した値が繰り返されているものとして適用されます。

div {
	background: #f00;
	width: 200px;
	height: 100px;

	transition: width 1s, height 1s, background 1s;
	-webkit-transition: width 1s, height 1s, background 1s;
	-moz-transition: width 1s, height 1s, background 1s;
	-ms-transition: width 1s, height 1s, background 1s;

	transition-delay: 1s, 2s;
	-webkit-transition-delay: 1s, 2s;
	-moz-transition-delay: 1s, 2s;
	-ms-transition-delay: 1s, 2s;
}
div:hover {
	width: 300px;
	height: 200px;
	background: #ff0;
}

『transition-delay』で指定した値の方が多い場合は指定されているプロパティ数以上の値は無視されます。

div {
	background: #f00;
	width: 200px;
	height: 100px;

	transition: width 1s, height 1s;
	-webkit-transition: width 1s, height 1s;
	-moz-transition: width 1s, height 1s;
	-ms-transition: width 1s, height 1s;

	transition-delay: 1s, 2s, 4s;
	-webkit-transition-delay: 1s, 2s, 4s;
	-moz-transition-delay: 1s, 2s, 4s;
	-ms-transition-delay: 1s, 2s, 4s;
}
div:hover {
	width: 300px;
	height: 200px;
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

CSS辞典

transition-delay

サンプルコード

style.css

ブラウザでの表示結果

対応ブラウザ

概要