How to make animation with loop animation using css3

Question

I have a css3 animation with the following:

@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .animated { -webkit-animation-name: rotate; -webkit-animation-duration: 2.4s; -webkit-animation-iteration-count: infinite; -webkit-transition-timing-function: ease-in-out; } 

This works flawlessly, well ... I want to make it wait between loops:
start animation, finish animation, wait (about 0.5 s) , start animation, end of animation, wait (about 0.5 s) ...

PS: I tried -webkit-animation-delay , it does not work.

Any help?

Answer 1

Add the duration of your animation by 0.5 seconds, then create an additional frame in keyframes that will not change the number of revolutions;

 @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 83% { /*2.4 / 2.9 = 0.827*/ -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); } } .animated { ... -webkit-animation-duration: 2.9s; /*note the increase*/ ... } 

Small demo: small link .

Answer 2

Disabling the css class in an element for the specified javascript time may solve your problem.

 function delayAnimation () { var animatedEl = document.getElementById('whatever'); animatedEl.className = ''; setTimeout(function () { animatedEl.className = 'animated' setTimeout(delayAnimation, 2400);// i see 2.4s is your animation duration }, 500)// wait 0.5s } 

Hope this helps.

Edit: I updated this answer to fix the code. You can see a fully working jsfiddle example. Thanks @Fabrice for specifying code did not work.

Answer 3

You can use the transition. For example:

 transition: all 0.6s ease-in-out; 

where transition-delay:0.6s;