transition-durationプロパティの説明
CSSのtransition-durationプロパティは、トランジションが開始してから完了するまでの時間を指定します。この値で指定する時間は、トランジションによって発生するアニメーションの持続時間です。時間をゼロ秒に設定した場合は、瞬間的にトランジションが終わり効果が適用された後の状態にジャンプします。
トランジションの持続時間をプロパティごとに分けて設定することもできます。対象となるプロパティをtransition-propertyのカンマ区切りのリストで指定し、それと対応する形でtransition-durationを定義します。
これらの指定は、ショートハンド・プロパティのtransitionで一括操作が可能です。
transition-durationに指定できる値
<time>- トランジション効果の持続時間を表します。開始条件を満たしてから実際にアニメーションが始まり、終わるまでの所要時間となります。時間をゼロ秒に設定した場合は、瞬間的にトランジションが終わり効果が適用された後の状態にジャンプします。構文は単位付きの数字で、秒かミリ秒が扱えます。負の値は無効です。
transition-delayの使い方とサンプルコード
transition-delayプロパティの構文は以下の通りです。
/* <time>値 */
transition-duration: 0s;
transition-duration: 1s;
transition-duration: 100ms;
transition-duration: 2.4s;
/* 複数の値 */
transition-duration: 1s, 500ms;
transition-duration: 1s, 3s, 500ms;
/* グローバル値 */
transition-duration: inherit;
transition-duration: initial;
transition-duration: revert;
transition-duration: unset;
transition-durationの実例
それでは実際にtransition-durationプロパティの書き方を見ていきましょう。以下の例は、マウスポインタが重なった時に特定のスタイルが変化するボックスに対して、トランジションの所要時間だけを変えた場合の比較です。
色のついたボックスにポインタを重ねて確認してみましょう。マイナスの時間が与えられているボックスは、transition-durationの効果が無効になるため、初期値である0sが適用されます。スマートフォンやタブレットの場合はタップで発動するように、ontouchstart属性を付与しています。
<div class="samp_box">
<section>
<div id="td_1" ontouchstart>transition-duration: 0s;</div>
<div id="td_2" ontouchstart>transition-duration: 500ms;</div>
<div id="td_3" ontouchstart>transition-duration: 1s;</div>
<div id="td_4" ontouchstart>transition-duration: 2s;</div>
<div id="td_5" ontouchstart>transition-duration: -1s;（無効）</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-property: width;
}
section > div:hover {
width: 50%;
background-color: #f90;
}
#td_1 {
transition-duration: 0s;
}
#td_2 {
transition-duration: 500ms;
}
#td_3 {
transition-duration: 1s;
}
#td_4 {
transition-duration: 2s;
}
#td_5 {
transition-duration: -1s;
}