利用animation属性实现循环间的延时执行实例教程

先来介绍一下animation定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

默认值： none 0 ease 0 1 normal

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

语法

animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。（值：n次，infinite无限循环）

animation-direction 规定是否应该轮流反向播放动画。

总结：

根据上述属性，只需要根据具体情况设置animation-delay和animation-iteration-count即可。

例如：

p { animation:mymove 5s 5s infinite; -webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */ }

方案例子：

    
  
 
梅西与美洲杯失之交臂
 
  

把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了。

【相关推荐】

1.详细介绍CSS3中animation-direction属性

2.必须掌握的CSS3动画（Animation）的8大属性

3.分享一个监听css3动画（animation）结束事件实例

4.详解css3中两种暂停方式（transition、animation）

以上是利用animation属性实现循环间的延时执行实例教程的详细内容。更多信息请关注PHP中文网其他相关文章！