CSS关键帧动画和延迟? [英] CSS keyframe animations and delay?
问题描述
我有一个关键帧动画,无限循环。
I have a keyframe animation, that infinitly loops.
-webkit-animation: fade 3s ease-in-out infinite;
@-webkit-keyframes fade {
0% { opacity: 0; -webkit-transform: rotate(0deg);}
20% { opacity: 1; -webkit-transform: rotate(360deg);}
100% { opacity: 0; -webkit-transform: rotate(360deg);}
}
如何延迟每个循环的过滤。我知道我可以延迟整个动画,但这只会发生一次。我希望每次都这样做。
How can I delay each ilteration of the loop. im aware I can delay teh entire animation, but this only occurs once. I wish to do it everytime.
推荐答案
不幸的是,当前没有选项可以轻松地在迭代之间设置延迟,但是您可以可以添加具有相同值的另一个止损(如我所评论),并增加持续时间:
Unfortunately there is no current option to easily put a delay between the iterations, but instead you can add another stop with the same values (as I commented), and increase the duration:
@keyframes fade {
0% { opacity: 0; transform: rotate(0deg); }
10% { opacity: 1; transform: rotate(360deg); }
50% { opacity: 0; transform: rotate(360deg); }
100% { opacity: 0; transform: rotate(360deg); }
}
.selector {
animation: fade 6s ease-in-out infinite; /* increased duration */
}
在 http://jsfiddle.net/PW8Ur/2/
如果需要通过脚本控制何时需要重新启动动画,可以查看: http:// css-tricks.com/restart-css-animation/
If you need scripted control over when you want to restart an animation, you could have a look at: http://css-tricks.com/restart-css-animation/
这篇关于CSS关键帧动画和延迟?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!