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

 <div class="parent">
  <div class="box">Lorem</div>
</div>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-delay: 1s

 <div class="parent">
  <div class="box">Lorem</div>
</div>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-delay: 2s

 <div class="parent">
  <div class="box">Lorem</div>
</div>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-delay: 4s

 <div class="parent">
  <div class="box">Lorem</div>
</div>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

仕様書

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

初期値	`0s`
適用対象	すべての要素、`::before` / `::after` 疑似要素
継承	なし
メディア	interactive
計算値	指定値
アニメーションの種類	個別
正規順序	形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`transition-delay`	Chrome 完全対応 26 完全対応 26 完全対応 1 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Edge 完全対応 12 完全対応 12 完全対応 12 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Firefox 完全対応 16 完全対応 16 完全対応 4 接頭辞付き接頭辞付き -moz- のベンダー接頭辞が必要完全対応 49 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要完全対応 44 接頭辞付き無効接頭辞付き -webkit- のベンダー接頭辞が必要無効 From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE 完全対応 10 完全対応 10 完全対応 10 接頭辞付き接頭辞付き -ms- のベンダー接頭辞が必要	Opera 完全対応 12.1 完全対応 12.1 完全対応 15 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要未対応 11.6 — 15 接頭辞付き接頭辞付き -o- のベンダー接頭辞が必要	Safari 完全対応 9 完全対応 9 完全対応 4 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	WebView Android 完全対応 ≤37 完全対応 ≤37 完全対応 2 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Chrome Android 完全対応 26 完全対応 26 完全対応 18 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Firefox Android 完全対応 16 完全対応 16 完全対応 4 接頭辞付き接頭辞付き -moz- のベンダー接頭辞が必要完全対応 49 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要完全対応 44 接頭辞付き無効接頭辞付き -webkit- のベンダー接頭辞が必要無効 From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android 完全対応 12.1 完全対応 12.1 完全対応 14 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要未対応 12 — 14 接頭辞付き接頭辞付き -o- のベンダー接頭辞が必要	Safari iOS 完全対応 9 完全対応 9 完全対応 2 接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要	Samsung Internet Android 完全対応あり完全対応あり完全対応あり接頭辞付き接頭辞付き -webkit- のベンダー接頭辞が必要

凡例

完全対応: 完全対応
ユーザーが明示的にこの機能を有効にしなければなりません。: ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。: 使用するには、ベンダー接頭辞または異なる名前が必要です。

transition-delay

構文

値

形式文法

例

仕様書

ブラウザーの対応

凡例

関連情報

ウェブ開発のベストプラクティスを学ぶ