transition-delayプロパティの説明
CSSのtransition-delayプロパティは、トランジションが開始する前の待ち時間を指定します。待ち時間は正数、負数、あるいはゼロで表します。既定値ではゼロ秒に設定されているため、トランジションは開始条件を満たすと即座に始まります。
正数を指定した場合は、トランジションの開始条件を満たしてから開始するまでの間に遅れが発生します。負数を指定した場合は、与えられた時間をすでに実行されたものとみなして、トランジションの途中から効果が始まります。
トランジションの待ち時間をプロパティごとに設定することもできます。対象となるプロパティをtransition-propertyのカンマ区切りのリストで指定し、それと対応する形でtransition-delayを定義します。
これらの指定は、ショートハンド・プロパティのtransitionで一括操作が可能です。
transition-delayに指定できる値
<time>- トランジション効果の開始条件を満たしてから実際に始まるまでの待ち時間を表します。構文は単位付きの数字で、秒かミリ秒が扱えます。
transition-delayの使い方とサンプルコード
transition-delayプロパティの構文は以下の通りです。
/* <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属性を付与しています。
<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>
.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;
}