CSS keyframe animations and delay?

Question

I have a keyframe animation, that infinitly loops.

-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 delay each ilteration of the loop. im aware I can delay teh entire animation, but this only occurs once. I wish to do it everytime.

have the opacity: 0 occur at 50% through 100% for instance — xec
– xec, Commented Dec 10, 2013 at 16:18

xec · Accepted Answer · 2013-12-10 16:46:45Z

2

Unfortunately there is no current option to easily put a delay between the 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 scripted control over when you want to restart an animation, you could have a look at: http://css-tricks.com/restart-css-animation/

edited Dec 10, 2013 at 16:46

answered Dec 10, 2013 at 16:33

xec

18.1k3 gold badges50 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS keyframe animations and delay?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related