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

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

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.

回答1:

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

Demo here

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

来源：https://stackoverflow.com/questions/19054870/cycling-css3-animation-with-a-pause-period