CSS关键帧动画和延迟？

Posted 2023-03-04

【中文标题】CSS关键帧动画和延迟？

【英文标题】：CSS keyframe animations and delay?

【发布时间】：2013-12-28 06:21:04

【问题描述】：

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

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

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

【问题讨论】：

例如让opacity: 0 出现在 50% 到 100% 之间

【参考方案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/