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