Question

我希望在一个循环暂停后运行动画。对于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的动画为keyframe（从0％到100％）。

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

Answer 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

循环CSS3动画有暂停期吗？

1 个答案: