CSS3 cycling pause animation?

Question

I want to start the animation after a pause in the loop. 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 animation for 10s , and then do animation for 5s and repeat these loops.

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

NOTE that I do not intend to change the keyframe percentage.

Answer 1

Without javascript, what you want is impossible without changing the current keyframes. You could do the following instead, but this is the only fix without javascript to delay every 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, as mentioned earlier, is to use javascript to reset the CSS animation. Useful article about it here.