transition-delay

CSS の transition-delay プロパティは、値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定します。

待ち時間はゼロ、正の数、負の数で指定します。

  • 0s (又は 0ms) の値は直ちにトランジション効果が始まります。
  • 正の数の場合は、指定された時間の長さの分だけトランジション効果が始まるのが遅れます。
  • 負の数の場合は、直ちにトランジション効果が、効果の途中から始まります。言い換えれば、効果は指定された時間の長さの分だけ既に実行されていたかのように動きます。

複数の待ち時間を指定することができ、複数のプロパティのトランジションを行うときに有用です。それぞれの待ち時間は、マスターリストである transition-property プロパティによって指定された対応するプロパティに適用されます。マスターリストよりも指定された待ち時間が少ない場合は、充足するまで待ち時間のリストが繰り返して使用されます。また待ち時間の数が多い場合は、リストが適切な長さに切り詰められます。どちらの場合も、 CSS の宣言として妥当です。

構文

/* <time> 値 */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* グローバル値 */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;

値

<time>
プロパティの値の変更からアニメーション効果が始まるまでの待ち時間を表す <time> 形式の値。

形式文法

<time>#

例

transition-delay: 0.5s

transition-delay: 1s

transition-delay: 2s

transition-delay: 4s

仕様書

仕様書 状態 備考
CSS Transitions
transition-delay の定義		 草案 初回定義

初期値0s
適用対象すべての要素、::before / ::after 擬似要素
継承なし
計算値指定通り
アニメーションの種類離散値

ブラウザーの対応

BCD tables only load in the browser

関連情報