是否在暂停期间循环播放CSS3动画？ [英] Cycling CSS3 animation with a pause period?

问题描述

我想在一个周期的暂停后运行动画。对于示例，

I want to run an animation after a pause in a cycle. For EXAMPLE,

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

我想暂停/延迟动画 10s ，然后制作动画 5s ，并重复此循环。

I want to pause/delay the animation for 10s, then doing the animation for 5s and repeating this cycles.

上面的示例，仅适用于第一个周期。如何在无限循环的每个周期中引起延迟/暂停？换句话说，我需要一个 15s 周期，但动画中的 5s 动画是完整的 keyframe （从0％到100％）。

The above example, only works for the first cycle. How can I induce delay/pause in each cycle for infinite cycling? In other words, I need a 15s cycle but with 5s of animation of FULL keyframe (from 0% to 100%).

请注意，我不打算更改关键帧百分比。

NOTE that I do not aim to change the keyframe percentages.

推荐答案

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

Without javascript what you desire is impossible without changing your current keyframes. You could do the following instead, but that is the only non-javascript fix for a delay each time

@-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动画。 关于此的有用文章

The only other way, like mentioned before, is to use javascript to reset the CSS animation. Helpful article on that here

这篇关于是否在暂停期间循环播放CSS3动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！