CSS animation-delay 属性

CSS animation-delay 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；

定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。

通常用animation简写属性一次性设置动画效果较为方便。

实例

等待两秒，然后开始动画：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-delay:2s;
/*Safari and Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:2s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。</p>
<div></div>
</body>
</html>

运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。

属性
animation-delay	43.04.0 -webkit-	10.0	16.05.0 -moz-	9.04.0 -webkit-	30.015.0 -webkit-12.0 -o-

定义和用法

animation-delay 属性定义动画何时开始。

animation-delay 值以秒或毫秒计。

提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

默认值：	0
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.animationDelay="2s"

语法

animation-delay: time;

值	描述
time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

- 实例

负值，请注意动画跳过 2 秒进入动画周期：

animation-delay: -2s /* W3C 和 Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */

CSS animation-delay 属性

实例

浏览器支持

定义和用法

语法

- 实例

相关页面

分类导航