CSSのプロパティの１つにtransition-delayというものがあります。transitionプロパティの中で設定する要素の１つです。
ここでは、transition-delayの使い方を実例で解説しています。
また、どっちのセレクタに対してプロパティを設定したらいいかや、ホバー前からホバー後、ホバー状態からホバーなしの状態のそれぞれで変化時間を変える方法、秒でマイナスを指定した場合の挙動についても解説しています。
transition-delayとは何か？
CSSのtransition-delayとはホバー（:hover）したときやチェックボックスをクリック(:checked)したときなど、特定の条件でCSSを変化させるときに、変化の開始を遅らせることができるプロパティです。
例えばホバーを例に挙げると、ホバーする前の状態を「開始点」、ホバー後の状態を「終了点」としたときに、この開始点から終了点までの変化をいつ開始するか？を指定できるのがtransition-delayです。
:checkedとは何か？については下記をご参考ください。
実例
transition-delayの動きは実例を見た方がわかりやすいです。
通常のホバー（transition-delayの設定なし）
例えば、transition-delayの設定をしていない通常のホバーは、カーソルを乗せた瞬間に色が切り替わります。
transition-delayを設定
この要素に対してtransition-delayを設定すると、変化が完了するまでの時間や開始タイミング、変化方法などを指定することができます。
例えば、上記のボタン要素に対して以下のようなCSSを追加します。
transition-delay: 1s;
すると、ホバーしてから1秒後に変化が開始します。（カーソルを置いてから少々お待ちください）
transition-delayの使い方
基本構文
transition-delayの基本構文は以下のようになっています。
transition-delay: 数値s;↑↓ ミリ秒でも指定可能
transition-delay: 数値ms;
変化前のセレクタに設定した場合「開始点 → 終了点」および「終了点 → 開始点」の両方に適用されます。
詳細は後述しますが、変化後のセレクタに設定した場合は挙動が変わるので注意が必要です。
- 変化前のセレクタに記述すると「開始→終了」と「終了→開始」に同じ変化を適用する。
- 変化後のセレクタに記述すると「開始→終了」のみ変化を適用する。
- 時間の単位指定は秒[s]とミリ秒[ms]が使える。
- 秒数で0を指定した場合は遅延なし。
- 秒数でマイナスを指定した場合は変化の途中から開始する。
- 特定のプロパティのみを変化させたい場合はtransition-propertyを合わせて使う。
実例1：開始⇔終了に同じ変化を適用する
「開始→終了」と「終了→開始」を同じだけ遅らせる場合は変化前のセレクタに以下を記述します。
transition-delay: 数値s;↑↓ ミリ秒（ms）で指定することもできます。
transition-delay: 数値ms;実際のコード
例えば、ホバーで変化する要素に対して以下のように設定すると、開始点⇔終了点のどちらもを0.5秒後に変化させます。
transition-delay: 0.5s;このコードは以下のようになってます。
ポイントは変化前のclass="c-btn"の要素にtransition-delay: 0.5s;が設定してあることです。
<section>
<style>
.c-btn {
background: blue;
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
max-width: 300px;
padding: 15px 40px;
text-align: center;
transition-delay: 0.5s;
}
.c-btn:hover{
background: orange;
max-width: 100px;
padding: 30px 60px;
}
section{
height: 100px;
}
</style>
<div class="c-btn">button</div>
</section>transition-delayの注意点
transition-delayの注意点は以下のとおりです。
- プロパティは変化前のセレクタに設定する（開始⇔終了が同じ時間で遷移）
- 変化後のセレクタに設定すると（開始→終了のみ適用）
- 秒数で0を指定した場合は遅延なし。
- 秒数でマイナスを指定した場合は変化の途中から開始する。
- 特定のプロパティのみを変化させたい場合はtransition-propertyを合わせて使う。
特に、1と2のどっちのセレクタに設定するかは非常に重要なので、以下で細かく解説します。
どっちのセレクタに設定するか？「開始→終了」と「終了→開始」の秒数を変える方法
セレクタと変化後のセレクタのどっちにtransition-delayプロパティを設定すればいいか？と迷う人もいるかと思います。
基本的には、変化前のセレクタに設定します。
例えば、ホバーで変化する要素の場合は:hoverがない方に記述します。なぜなら、どちらに記述するかによって動きに変化が発生するためです。
変化前のセレクタに設定する（開始⇔終了が同じ時間で変化）
通常の使い方である変化前のセレクタに設定した場合、「開始 ⇔ 終了」のどちらもに同じ時間が適用されます。
例えば、:hoverがない方のセレクタに以下を設定します。
すると、「開始 ⇔ 終了」のどちらもが１秒かけて変化します。
transition-delay: 1s;
▼コードの全体像
<section>
<style>
.c-btn {
background: blue;
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
max-width: 300px;
padding: 15px 40px;
text-align: center;
transition-delay: 1s;
}
.c-btn:hover{
background: orange;
max-width: 100px;
padding: 30px 60px;
}
section{
height: 100px;
}
</style>
<div class="c-btn">button</div>
</section>変化後のセレクタに設定する（開始→終了のみ変化）
変化後のセレクタに設定した場合、「開始→終了」のみに変化が適用されます。
例えば、:hoverがある方のセレクタに以下を設定します。
transition-delay: 1s;すると、「開始→終了」のみが1秒かけて変化します。「終了→開始」は１瞬で戻ります。
▼コードの全体像
<section>
<style>
.c-btn {
background: blue;
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
max-width: 300px;
padding: 15px 40px;
text-align: center;
}
.c-btn:hover{
background: orange;
max-width: 100px;
padding: 30px 60px;
transition-delay: 1s;
}
section{
height: 100px;
}
</style>
<div class="c-btn">button</div>
</section>「開始→終了」と「終了→開始」の時間を変化させる
なお、「開始→終了」と「終了→開始」の時間を変化させたい場合は、変化前と変化後のセレクタの両方にtransition-delayプロパティを設定します。
- 変化前のセレクタに設定：「終了 → 開始」の変化
- 変化後のセレクタに設定：「開始 → 終了」の変化
例えば、ホバー時は0.5秒後に少しだけ遅れて変化し、ホバーを外すときは1.5秒遅れて変化する場合は以下のように記述します。
<section>
<style>
.c-btn {
background: blue;
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
max-width: 300px;
padding: 15px 40px;
text-align: center;
transition-delay: 1.5s;
}
.c-btn:hover{
background: orange;
max-width: 100px;
padding: 30px 60px;
transition-delay: 0.5s;
}
section{
height: 100px;
}
</style>
<div class="c-btn">button</div>
</section>変化するプロパティを指定する（transition-property）
transition-delayプロパティを使うと、変化前と変化後で設定してあるすべてのプロパティが指定した時間をかけて変化します。
特定のプロパティのみを変化させたい場合は「transition-property」を合わせて使います。
transition-propertyの使い方
transition-propertyは以下のように記述します。
transition-property: 変化させるプロパティ1, 変化させるプロパティ2,,,,;対象のプロパティはカンマでつなげることができます。
実例
transition-propertyなし
例えば、以下のボタンは変化前のセレクタに対してtransition-delayのみが設定されているため、ホバー後の全てのプロパティが対象となります。
①background、②max-width、③paddingの３つが変化します。
transition-delay: 0.5s;paddingのみ変化させる
同じ要素に対してtransition-propertyを加えて③paddingのみを変化させる場合は以下のように記述します。
transition-delay: 0.5s;
transition-property: padding;paddingとmax-widthを変化させる
③paddingだけでなく②max-widthも変化させる場合は以下のように記述します。backgroundのみ指定していないので、即座に青→オレンジに変化します。
transition-delay: 0.5s;
transition-property: padding, max-width;プロパティ毎に遅延時間を変える
応用編として、transition-delayプロパティの秒数をカンマを区切って指定するとプロパティ毎に変化を開始する時間を変えることができます。※transition-propertyと合わせて使ったときのみ機能します。
transition-delay: 秒As, 秒Bs,,,,;
transition-property: プロパティA, プロパティB,,,,;実例
例えば、paddingは0.5秒、max-widthは1秒かけて変化させたい場合は以下のように記述します。
transition-delay: 0.5s, 1s;
transition-property: padding, max-width;コードの全体像
参考に上記のコードを貼っておきます。
<section>
<style>
.c-btn {
background: blue;
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
max-width: 300px;
padding: 15px 40px;
text-align: center;
transition-delay: 0.5s, 1s;
transition-property: padding, max-width;
}
.c-btn:hover{
background: orange;
max-width: 100px;
padding: 30px 60px;
}
section{
height: 100px;
}
</style>
<div class="c-btn">button</div>
</section>ご参考
transition関連のプロパティの使い方は下記をご参考ください。
