【CSS】transition-durationプロパティの使用方法を徹底解説!!

こんにちは。

CSSで「:hover」などの擬似クラスを使ってスタイルの変更をコーディングしていると、瞬時にスタイルが切り替わるのではなく、滑らかに変化して欲しいなぁと思ったことはありませんか?

 JavaScriptを使わずにそんなことできるんだろうか…

そう思うのも無理はありません。ですが実は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

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?