html5中delay的作用,animation-delay属性怎么用

animation-delay属性是用来定义动画何时开始，以秒或毫秒为单位；使用animation-delay属性可以自定义动画的延迟效果。

CSS3 animation-delay属性

作用：animation-delay 属性定义动画何时开始。animation-delay 值以秒或毫秒计。

语法：animation-delay: time;

time：可省略，默认值是 0；用来定义动画开始前等待的时间，以秒或毫秒计。

说明：time允许为负值，-2s使动画马上开始，但跳过 2 秒进入动画。

注：Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。

CSS3 animation-delay属性的使用示例

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;}

}

效果图：

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！