refresh css animation multiple times


I have this really complex animation that runs once and I can not use "animation-iteration-count: infinite;" to reiterate it multiple times. Is there another way to do this? For example refreshing the div will refresh the animation? (how do you refresh a div?)

this is the html:

<div id="hold">
<p id="myname" class="small-caps">
<span id="layer0Go" class="drag">w</span>
<span id="layer1Go" class="drag">w</span>
<span id="layer2Go" class="drag">w</span>
<span id="layer3Go" class="drag">m</span>
<span id="layer4Go" class="drag">e</span>
<span id="layer5Go" class="drag">s</span>
<span id="layer6Go" class="drag">s</span>
<span id="layer7Go" class="drag">a</span>
<span id="layer8Go" class="drag">g</span>
<span id="layer9Go" class="drag">e</span>
<span id="layer10Go" class="drag">l</span>
<span id="layer11Go" class="drag">a</span>
<span id="layer12Go" class="drag">b</span>
<span id="layer13Go" class="drag">r</span>
<span id="layer14Go" class="drag">o</span>
<span id="layer15Go" class="drag ball"></span>

some of the css:

#layer0Go{ -webkit-animation: a0-translate 5s linear 0s 1 none, b0-translate 5s linear 5s 1 none, c0-translate 1.5s linear 10s 1 none, d0-translate 5s linear 11.5s 1 none, v0-translate 7s linear 16.5s 1 forwards; 

The same css for all layers.

If I put animation-iteration-count: infinite; to #hold it does nothing. Of course if I put it to layer0Go it will repeat the first animation infinitely without running the other animations. They are some animated letters changed from this project here: Any ideas? I made a fiddle:

Problem courtesy of: Claudiu Creanga


To refresh the div simply do this...


You could use setInterval to reset it after each batch of animation is done.

(obviously that's an example - change the interval to the total time of the animations)

Solution courtesy of: Archer


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.