animation-delay属性怎么用

互联网 19-1-31

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属性的使用示例

<!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>  <div></div>  </body> </html>