こんにちは。
CSSで「:hover」などの擬似クラスを使ってスタイルの変更をコーディングしていると、瞬時にスタイルが切り替わるのではなく、滑らかに変化して欲しいなぁと思ったことはありませんか？
そう思うのも無理はありません。ですが実はCSSにはトランジションという、スタイルを滑らかに変化させるための技術があります！
その中でも、スタイルの変化の滑らかさを指定できるtransition-durationプロパティというプロパティがあります。
そこで今回は、コーダー入門者の方向けにtransition-durationプロパティの
・トランジションの実装の有無の違い
について徹底解説します！
目次
transition-durationとは
transition-durationの読み方
transition-durationは「トランジション デュレーション」と読みます。
durationは日本語で「期限」を意味しますが、transition-durationプロパティはその読み通り、トランジションの再生時間(期限)を指定するためのプロパティになります。
transition-durationはトランジションを実行する際にどれだけの時間をかけて実行させるのかを設定するプロパティ
transition-durationプロパティの用途を具体的にいうと、
です。
このtransition-durationプロパティの値によって、スタイル変化の滑らかさを変更することができます。
transition-durationで利用できる値
transition-durationでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| 単位つき数値 | s(秒)やms(ミリ秒)をつけた数値を指定します。初期値は0です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
transition-durationの基本的な使い方
それでは早速、transition-durationプロパティの基本的な使い方をサンプルコードと一緒にみていきましょう。
トランジションを使わなかった場合
まずはトランジションを指定しなかった場合です。
See the Pen
transition-duration–1 by ryuga (@ryuga)
on CodePen.
ホバーすると瞬時にボタンの背景色が赤→青になるのが分かると思います。
このスタイルの遷移をトランジションを使って滑らかにしてみましょう。
transition-durationを指定した場合
次にトランジションを指定した場合をみてみます。
transition-durationは通常、「transition-property」と併用して使用することによって実装します。
See the Pen
transition-duration–2 by ryuga (@ryuga)
on CodePen.
今回はtransition-durationプロパティに「.3s」と指定しました。これは「0.3s」と同じなのですが、慣習上1秒未満の場合は「0」を省くため、「.3s」としています。
サンプルコードのボタンをホバーすると、先ほどと違って滑らかにボタンの背景色が変わるのが分かると思います。
このように、「transition-property」や「transition-duration」を指定してトランジションを実行することによって、ホバーなどのアクションによるスタイルの変化を滑らかにすることができます。
まとめ
いかがでしょうか？
今回はtransition-durationプロパティの基本的な使い方を、トランジションを実装していない場合と比較しながらその違いを解説していきました。
トランジションを実装することによって、ボタンのホバーなどの小さな箇所で柔らかい印象を演出することができるため、現在広く利用されています。
ぜひこの機会にtransition-durationプロパティの使用方法を覚えて、トランジションを実装できるようにしましょう！！
参考文献：http://www.htmq.com/css3/transition-duration.shtml
