译者:桔梗
原文链接
当还没有像**animation-iteration-delay**
这样的属性时,可以使用animation-delay
属性来实现动画效果的延迟,或者用Javascript来“伪造”该效果。最好的“伪造”方法取决于动画效果重复的次数,性能,以及每一次重复时延迟时间是否相同。
什么是动画周期性延迟呢?有时我们需要让一个动画播放多次,并且每一次动画播放周期之间都能够等待一定的时间,这就是动画周期性延迟。
比如要让某一元素改变3次,但又想在动画每次重复播放之前能够等待4s(动画执行时间为1s).你可以在关键帧定义中添加添加延迟帧,并将动画触发次数定为3次:
注意,第一个关键帧选择器位于80%标记处,并且与默认样式相同,这将使你的元素变化三次,其中处于默认样式的占据了整个动画时间(5s)的80%,或者说4s,接着在动画剩下的1s中,元素背景色从green变化到yellow,尺寸从小变大。如此重复执行3次后结束。
该方法也适用于无限重复的动画,但是,该方法只适合每一次动画之前的延迟时间完全相同的场景。如果想改变每一次动画之前的延迟时间,且保持原来的尺寸和颜色变化的时长,你还得重新定义一个@keyframes.
为了实现不同的动画周期性延迟,可以创建一个单独的动画,实现三种不同的延迟时长。
该方法在编码与维护方面更加困难,只适用于单个动画周期。假如要改变动画的数量或者每一次重复延迟时间,还需要声明新的关键帧。
实现动画周期性延迟的小技巧
针对上述问题,目前有一个切实可行的解决办法。该方法没有被动画规范正式允许,但是也没有被禁止使用,而且浏览器也能够支持:你可以多次声明一种动画,每个动画声明都有一个不同的延迟时间
示例 codepen.io/estelle/pen….
我们已经将该动画调用了3次,每一次都定义了不同的延迟。在示例中,每一次动画结束都在下一次动画开始之前。假设动画周期产生了重叠,虽然动画会同时进行,但效果会显示为最后声明的动画。
示例 codepen.io/estelle/pen…
当然,你也可以用Javascript的animationstart, animationiteration 以及 animationend事件监听器,通过添加或移除元素上的动画名或类名来实现.
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!