how make a looped animation wait 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;
}

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

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

Any help?

Chris · Accepted Answer · 2012-09-07T12:03:25.633

24

Add 0.5 seconds to your animation duration, then create an extra frame in your keyframes that doesn't change the rotation amount;

@-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*/
...
}

Little demo: little link.

edited Sep 07 '12 at 12:03

answered Sep 07 '12 at 11:58

Chris

26,544
5
58
71

2

A little "workaround" to what Abody97 did: [webkit animation fiddle](http://jsfiddle.net/ZVgAu/1/) – alexbusu Sep 07 '12 at 12:08
Beautiful solution, why didn't this immediately pop into my head? – Eric L. Jun 19 '14 at 18:15

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

Disabling the css class on element for a specified time by javascript might 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 example on jsfiddle. Thanks to @Fabrice for pointing out the code was not working.

edited May 23 '17 at 11:53

Community

1
1

answered Sep 07 '12 at 12:00

frkn

324
1
2
5

you are welcome. i personally liked @Abody97 's answer better too when i saw it :) – frkn Sep 07 '12 at 12:38

score 0 · Answer 3 · edited Oct 05 '12 at 01:30

0

You may use a transition. For example:

transition: all 0.6s ease-in-out;

where transition-delay:0.6s;

edited Oct 05 '12 at 01:30

raam86

6,785
2
31
46

answered Sep 07 '12 at 12:33

Bimba

1

how make a looped animation wait using css3

3 Answers3

Linked