用暂停周期循环 CSS3 动画？答案

【问题标题】：Cycling CSS3 animation with a pause period?用暂停周期循环 CSS3 动画？
【发布时间】：2013-09-28 03:47:08
【问题描述】：

我想在循环暂停后运行动画。对于EXAMPLE，

@-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 的百分比。

【问题讨论】：

标签： css keyframe css-animations

【解决方案1】：

如果没有 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;
}

Demo here

如前所述，唯一的其他方法是使用 javascript 来重置 CSS 动画。 Helpful article on that here

【讨论】：