Question

我有一个关键帧动画，无限循环。

-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);}
}

如何延迟循环的每次迭代。我知道我可以延迟整个动画，但这只发生一次。我希望每次都这样做。

Answer 1

不幸的是，目前没有选项可以轻松地在迭代之间设置延迟，但是你可以添加另一个具有相同值的停止（就像我评论的那样），并增加持续时间：

@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关键帧动画和延迟？

1 个答案: