1

我想在循环暂停后运行动画。例如，_

@-webkit-keyframes test {
    0%  { opacity:0; }
    50% { opacity:1; }
    100%{ opacity:0;}
}
.test {
    -webkit-animation:test 5s linear 10s infinite forwards;
}

我想暂停/延迟 的动画10s，然后为 做动画5s并重复这个循环。

上面的例子，只适用于第一个周期。如何在每个循环中诱导延迟/暂停以进行无限循环？换句话说，我需要一个15s循环，但5s动画为 FULL keyframe（从 0% 到 100%）。

请注意，我的目标不是更改keyframe百分比。

4

1 回答 1

2

如果没有 javascript，如果不更改当前的关键帧，您想要的东西是不可能的。您可以改为执行以下操作，但这是每次延迟的唯一非 JavaScript 修复

@-webkit-keyframes test {
    0%     { opacity: 0; }
    16.66% { opacity: 1; }
    33.33% { opacity: 0; }
    100%   { opacity: 0; }
}
.test {
    -webkit-animation:test 15s linear infinite forwards;
}

演示在这里

如前所述，唯一的其他方法是使用 javascript 来重置 CSS 动画。有用的文章在这里

于 2013-09-27T19:47:08.480 回答