animation-delay
版本： CSS3
animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。通常用animation简写属性一次性设置动画效果较为方便。
示例
animation-delay: 3s; animation-delay: 2s, 4ms;
浏览器支持
|
|
|
|
|
IE10以上版本的浏览器都支持
animation-delay
|
||||
语法
animation-delay : <time>
<time>
从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。
| 默认值 | 0s |
| 适用于 |
所有元素，包含伪对象
::before
and
::after
|
| 继承性 | 无 |
| 动画性 | 否 |
| 计算值 | 指定值 |
| 媒体 | 交互 |
实例
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demo 5s infinite;
animation-delay:1s;
/*safari和chrome*/
-webkit-animation:demo 5s infinite;
-webkit-animation-delay:1s;
}
@keyframes demo
{
from{left:0px;}
to{left:450px;}
}
@-webkit-keyframes demo
{
from{left:0px;}
to{left:450px;}
}
</style>
</head>
<body>
<div></div>
效果图：
