过渡延时 | transition-delay

过渡延迟

CSS的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。

值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

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

/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;

你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性（transition-property）

初始值	0s
适用元素	all elements, ::before and ::after pseudo-elements
是否是继承属性	no
适用媒体	interactive
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

值

<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

规范

Specification	Status	Comment
CSS TransitionsThe definition of 'transition-delay' in that specification.	Working Draft	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0 -webkit	(Yes)-webkit (Yes)	4.0 (2.0) -moz 16.0 (16.0)1	10.0	11.6 -o 12.10	3.0 -webkit

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1 -webkit	(Yes)-webkit (Yes)	4.0 (2.0) -moz 16.0 (16.0)1	?	10.0 -o 12.102	3.2 -webkit

除了支持无前缀外，Gecko 44.0（Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41）还增加-webkit了对该属性的前缀版本的支持，以解决layout.css.prefixes.webkit首选项（默认为false）的Web兼容性问题，因为Gecko 49.0（Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46），首选项默认为true。

参见关于Opera 12.50的博客文章。