transition-delay

CSS transition-delay 属性用于指定元素执行过渡动画之前的延迟时间。

通过 transition-delay 属性可以在过渡动画被触发之前延迟一段时间。如果将值设置为0秒，表示立刻执行过渡动画。

例如，假设我们要向右移动一个元素300像素的距离。代码如下：

<div class="container">
  <div class="div"></div>
</div>  

.container{
  width: 800px;
  height: 400px;
  border:1px solid #ccc;
  position: relative; 
}
.div{
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: blue;
  transition-property: left;
  transition-duration: 1s;
  transition-timing-function: linear;
}
.container:hover .div{
  left: 400px;
}

当鼠标进入到 .container 容器元素中的时候， .div 元素立刻开始从100像素的位置移动到400像素的位置。如果我们需要在鼠标进入 .container 容器之后，延迟2秒钟之后， .div 元素才开始移动，可以为 .div 元素设置过渡动画延迟时间为2秒： transition-delay: 2s 。

注意， transition-delay 的值不能为负数。负数值会使过渡动画立刻被执行，并且没有过渡效果。

你可以为 transition-delay 指定一个或多个值，多个值之间使用逗号来分隔。多个动画过渡延迟时间值会和其它过渡动画属性一一对应。例如，如果你提供了2个动画过渡延迟时间，那么第一个 transition-delay 值决定 transition-property 属性的第一个属性的动画过渡延迟时间，第二个 transition-delay 值决定 transition-property 属性的第二个属性的动画过渡延迟时间。

transition-delay: <time> [, <time>]*

参数：

transition-delay: 3s;
transition-delay: 2s, 4ms;

transition-delay: inherit;