我有一个无限循环的关键帧动画。
-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);}
}
如何延迟循环的每次迭代。我知道我可以延迟整个动画,但这只发生一次。我希望每次都这样做。
最佳答案
不幸的是,当前没有可以轻松地在迭代之间设置延迟的选项,但是您可以添加另一个具有相同值的停止点(正如我评论的那样),并增加持续时间:
@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/
关于CSS关键帧动画和延迟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20499462/