Question

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>
</p>
</div>

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: https://developer.mozilla.org/pt-PT/demos/detail/css-tricks
Any ideas?
I made a fiddle: http://jsfiddle.net/2AnEJ/

Answer 1

To refresh the div simply do this…

$("#animatie").html($("#animatie").html());

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

http://jsfiddle.net/2AnEJ/1/

(obviously that’s an example – change the interval to the total time of the animations)