ywork2020.com

Title

プロパティ値の遷移開始までの待機時間

目次 (INDEX)

transition-delayとは

ここで説明するtransition-delay とは次の語句からなるCSSのプロパティです。
transition
読み: トランジション
意味: 変更、変化、変更、遷移(移り変わること)
delay
読み: ディレイ
意味: 遅らせる、延ばす

目次に戻る

transition-delayプロパティの概要

このプロパティはトランジションが開始されるまでの待機時間を指定することができます。

つまり、アニメーションの開始フラグから指定した時間を経過した後にトランジションがはじまるということです。 このプロパティの指定単位は秒(s)、またはミリ秒(ms)です。

目次に戻る

構文

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

セレクター{transition-delay: 時間値s;}
セレクター{transition-delay: 時間値ms;}	

目次に戻る

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

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

このサンプルではdiv要素を使います。 疑似クラス:hoverでtransitionの効果が得られるので、 マウスポインタが要素の上に乗っている状態で widthbackground-color の値が変更されます。

div{
	width: 45%;
	background-color: khaki;
	transition-duration: 3s;
	transition-delay: 指定値s;
}
div:hover{
	width: 90%;
	background-color: green;
}

初期値: 0s

初期値の0sは、0秒後にトランジションが開始されます。 つまり、このサンプルでは要素にマウスオーバーすると直ちにトランジションの効果が現れます。

transition-delay: 0s

div{transition-delay: 0s;}

目次に戻る

時間値: 正の時間値

このサンプルではtransition-delayに 1秒 を指定しています。 結果としてdiv要素にマウスポインターを乗せると1秒経過してからトランジションが開始されます。

transition-delay: 1s

div{transition-delay: 1s;}

目次に戻る

時間値: 負の時間値

負の数を使って秒やミリ秒を設定した場合は、待機時間は無く、直ちにトランジションが開始されますが、トランジションの途中から処理されます。

このサンプルではtransition-delayに -1秒 を指定しています。 これは通常のトランジションの開始から1秒経過したところいう計算になり、 transition-duration には3秒の指定をしているので、残りの2秒間でトランジションが完了するということになります。

transition-delay: -1s

div{transition-delay: -1s;}

目次に戻る

グローバル値

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

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

目次に戻る

補足説明

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

目次に戻る

まとめ

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

transition-delay: 0s;

transition-delay: 250ms;

transition-delay: 1s;

transition-delay: -0.3s;

サンプル: ブロック要素

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

目次に戻る