ywork2020.com

Title

プロパティ値の遷移完了時間

目次 (INDEX)

transition-durationとは

ここで説明するtransition-duration とは次の語句からなるCSSのプロパティです。
transition
読み: トランジション
意味: 変更、変化、変更、遷移(移り変わること)
duration
読み: デュレーション
意味: 期間、所要時間、時間の長さ

目次に戻る

transition-durationプロパティの概要

このプロパティはトランジションによるプロパティ値の遷移が完了する時間を指定することができます。

遷移とは「移り変わり」の意味ですが、ここでいう遷移とはプロパティの値が時間軸と共に変化していくことを言っています。 結果としてトランジションはアニメーションのように要素の形状を変化させることができるようになります。 つまり、transition-durationは遷移が開始されてから完了するまでの時間を設定できるということです。

指定単位は秒(s)、またはミリ秒(ms)で指定します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{transition-duration: 時間値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルではdiv要素を使います。 トランジションの対象となるプロパティは、あらかじめ以下のように設定しています。

div:hoverのセレクタはマウスポインタをdiv要素に乗せた状態で適用されるCSSStyleですから、 要素にマウスオーバーすれば widthbackground-color の設定値は遷移されます。

div{
	width: 40%;
	background-color: khaki;
}
div:hover{
	width: 80%;
	background-color:green;
}	

初期値: 0s

初期値は0sです。 0sは、すなわち0秒ですから瞬時にトランジションは完了します。

マウスポインタを要素の上に乗せるとアニメーションが開始されます。

div要素

div{transition-duration: 0s;}

目次に戻る

時間値: 2s

ここでは秒の単位を使ってみます。 秒で時間指定するばあいは数値にsの単位をつけて記述します。

2sを指定するとトランジションは開始から所要時間2秒間で完了します。 マウスポインタを要素の上に乗せるとトランジションが開始されます。

transition-duration: 2s

div{transition-duration: 2s;}

目次に戻る

時間値: 500ms

ここではミリ秒の単位を使ってみます。 500msで指定した場合は0.5秒でトランジションが完了します。

transition-duration: 500ms

div{transition-duration: 500ms;}

目次に戻る

グローバル値

transition-durationプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値の0sに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{transition-duration: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックし、要素にマウスオバーするとCSSが反映されます。

transition-duration: 0s;

transition-duration: 3s;

transition-duration: 500ms;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る