animation-delay
版本:CSS3
animation-delay CSS属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度。0s是该属性的默认值,代表动画在应用到元素上后立即开始执行。否则,该属性的值代表动画样式应用到元素上后到开始执行前的时间长度;定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如,如果设定值为-1s,动画会从它的动画序列的第1秒位置处立即开始。如果为动画延迟指定了一个负值,但起始值是隐藏的,则从动画应用于元素的那一刻起就获取起始值。通常用animation简写属性一次性设置动画效果较为方便。
示例animation-delay: 3s;
animation-delay: 2s, 4ms;
浏览器支持
IE10以上版本的浏览器都支持animation-delay
语法animation-delay:
默认值0s
适用于
继承性无
动画性否
计算值指定值
媒体交互
实例
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;}
}
效果图: