CSS3 animation running delayed animations with a global delay on all parts

Question

I have a small CSS3 animation called heartbounce which makes four icons "bounce" one after the other. You can see it here (note JSFiddle only works with webkit, you'll need to add your own vendor prefix to see on other browsers)

http://jsfiddle.net/franhaselden/92euukf0/5/

img:first-child {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1s;
}
img:nth-child(2) {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1.2s;
}
img:nth-child(3) {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1.4s;
}
img:last-child {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1.6s;
}

A bit long but you get the idea.

At present this animation occurs on load of page (delayed by 1s for the first one, and then adding .2s for each of the others). The problem is I want to repeat this every 10 seconds.

When page loads, icons bounce after 1s.
Once all have bounced (which would be 2.6s since page load), stop.
Wait 10 seconds.
Repeat animation.
Continue on in this manner...

Note: adding infinite does not work because it simply restarts the animation with the 1s delay. It's not the solution I'm after. Try it out with the code provided and compare with steps 1-5 above and you'll see it doesn't answer the question.

Does anybody know if this sort of double-wrap animation delay is possible?

@jbutler483 - if I did that, but wanted it to run infinitely, then i'd have to write pages and pages of code that never ended... unless i'm being really stupid? — Francesca, Feb 05 '15 at 15:12
[second snippet here](http://css-tricks.com/snippets/css/keyframe-animation-syntax/) - use the keyword 'infinite' — jbutler483, Feb 05 '15 at 15:16
@jbutler483 if you test this out on the code provided you will see it doesn't solve the problem posted in OP. The infinite simply means that once the animation has started, it continues. What I need is to implement a 10 second delay. However I also need to split it up with a 1s delay as well. That's the question I'm asking. — Francesca, Feb 05 '15 at 15:17
Please see [this answer](http://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating) in which shows this syntax. — jbutler483, Feb 05 '15 at 15:40

ppascualv · Accepted Answer · 2015-02-06T11:32:52.857

You are asking for this? (The code can be improved)

function change()
    {
        document.getElementById('one').style.webkitAnimationName = "heartbounce";
        document.getElementById('two').style.webkitAnimationName = "heartbounce";
        document.getElementById('three').style.webkitAnimationName = "heartbounce";
        document.getElementById('four').style.webkitAnimationName = "heartbounce";
    }

setInterval(function(){ 
    document.getElementById('one').style.webkitAnimationName = "none";
    document.getElementById('two').style.webkitAnimationName = "none";
    document.getElementById('three').style.webkitAnimationName = "none";
    document.getElementById('four').style.webkitAnimationName = "none";

    setTimeout(function(){change();}, 0);
}, 10000);

http://jsfiddle.net/n0pLcsf0/

Hope it helps.

CSS3 animation running delayed animations with a global delay on all parts

1 Answers1