transition-delay

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;
}

『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;
}

/* 意図とは逆で、遅延1秒・継続0.5秒になってしまう例として誤解しやすい書き方 */
/* 「0.5sで動いてほしい、でも1s後に」という意図がある場合、順序を確認する */
.btn { transition: background-color 1s 0.5s; }

/* 0.3秒で変化し、0.5秒後に開始する */
.btn { transition: background-color 0.3s 0.5s; }

/* 1秒のアニメーションを0.5秒分スキップして開始する */
.box {
    transition: transform 1s;
    transition-delay: -0.5s;
}

※ バージョン情報は MDN / Can I Use に基づいています。