refresh css animation multiple times

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/

Better question, why in the world would you want to do any of this ?? — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Sep 5, 2012 at 14:50
:)) the animation is really nice, but it is down on the page and the user can't see it unless he scrolls down, so by the time he arrives there the animation will be finished... (it is for the smaller screen version site so I have no space to put it up) — Claudiu Creanga
– Claudiu Creanga, Commented Sep 5, 2012 at 14:53
If you have a jsFiddle it'd probably be the only way someone could help :/ — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Sep 5, 2012 at 14:55

Reinstate Monica Cellio · Accepted Answer · 2012-09-05 15:07:17Z

3

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)

answered Sep 5, 2012 at 15:07

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

refresh css animation multiple times

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related