CSS keyframe animations and delays?

Question

I have a keyframe animation that is endlessly looped.

-webkit-animation: fade 3s ease-in-out infinite;

@-webkit-keyframes fade {
0% { opacity: 0; -webkit-transform: rotate(0deg);}
20% { opacity: 1; -webkit-transform: rotate(360deg);}
100% { opacity: 0; -webkit-transform: rotate(360deg);}
}

How can I postpone every loop error. im know that i can delay all animation, but this happens only once. I want to do it every time.

Answer 1

Unfortunately, there is no current option for a simple delay between iterations, but instead you can add another stop with the same values ​​(as I commented) and increase the duration:

@keyframes fade {
    0% { opacity: 0; transform: rotate(0deg); }
    10% { opacity: 1; transform: rotate(360deg); }
    50% { opacity: 0; transform: rotate(360deg); }
    100% { opacity: 0; transform: rotate(360deg); }
}

.selector {
    animation: fade 6s ease-in-out infinite; /* increased duration */
}

Demo at http://jsfiddle.net/PW8Ur/2/

If you need a control script when you want to restart the animation, you can watch: http://css-tricks.com/restart-css-animation/