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>]*
参数:
- <time>:使用<time>类型来设置过渡动画的延迟时间。时间值如果为负数会立刻执行过渡动画,并且没有过渡效果。
transition-delay
属性的初始值为0s。
应用范围
transition-delay
属性可以应用所有元素,以及:before
和:after
伪元素上。
示例代码
transition-delay: 3s; transition-delay: 2s, 4ms; transition-delay: inherit;
在线演示
下面的例子演示了transition-delay
属性分别为0秒,2秒和-1秒时的情况。
0s
2s
-1s
浏览器支持
CSS3 transition-delay
属性的浏览器兼容性列表如下: