跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

利用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 */ }
方案例子:
Document
  • 梅西与美洲杯失之交臂
把总动画设为4秒,然后前75%也就是3秒都没变化(0-75%),之后的25%也就是1秒做动画就可以了。 【相关推荐】 1. 详细介绍CSS3中animation-direction属性 2. 必须掌握的CSS3动画(Animation)的8大属性 3. 分享一个监听css3动画(animation)结束事件实例 4. 详解css3中两种暂停方式(transition、animation)

相关文章