CSS transition-delay プロパティが果たす役割

CSSのtransition-delayプロパティは、遷移効果の開始に時間を遅らせるために使用されます。これはCSSのtransitionプロパティと併用され、要素がある状態から別の状態に遷移するタイミングを制御します。

要素の状態の変化に応じて遷移効果の開始タイミングを遅延させるために、transition-delay プロパティを追加できます。これにより、シームレスまたは順番に実行するアニメーション効果の作成、特定の要素に視覚的な階層構造を与えることができます。

transition-delayのプロパティ値は、遅延時間の長さを指定する時間値です。秒（s）またはミリ秒（ms）を指定できます。transition-delayプロパティの値は、デフォルトで0で、遷移エフェクトがすぐに開始されることを意味します。

トランジション効果の開始時間を遅らせるためにtransition-delay属性を使用する方法を示す例を次に示します。

.element {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-delay: 1s;
}
.element:hover {
width: 200px;
}

上記例のように、マウスオーバー要素の幅は100pxから200pxに遷移します。遷移は1秒後に始まり、2秒間続きます。つまり、マウスオーバーが終了すると、遅延が発生せずに、幅は一瞬で元の値に戻ります。