多次刷新css动画

我有这个运行一次的非常复杂的动画，我无法使用“animation-iteration-count：infinite;”重复多次。有没有另一种方法来做到这一点？例如刷新div会刷新动画？（你怎么刷新一个div？）多次刷新css动画

这是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>

一些的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;

所有层相同的CSS。

如果我把animation-iteration-count：infinite; ＃它没有做任何事情。当然，如果我将它放到layer0Go中，它将无限次地重复第一个动画，而不会运行其他动画。他们是从这个项目改变了一些动画字母在这里：https://developer.mozilla.org/pt-PT/demos/detail/css-tricks 任何想法？我做了一个小提琴：http://jsfiddle.net/2AnEJ/

来源

2012-09-05 Claudiu Creanga

更好的问题，你为什么在世界上会希望做任何的这个？ –

:)）动画真的很好，但它在页面上下来，除非他滚动下来，否则用户不能看到它，所以当他到达那里时，动画将完成...（这是为了更小的屏幕版本网站，所以我没有空间把它） –

如果你有一个jsFiddle它可能是有人可以帮助的唯一方式：/ –

要刷新的div只是做到这一点...

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

你可以使用setInterval的动画每批完成之后将其重置。

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

（显然这是一个例子 - 改变间隔动画的总时间）

来源

2012-09-05 15:07:17 Archer

是的，就是这样。谢谢！ –

很高兴帮助伴侣:) – Archer

多次刷新css动画

回答

相关问题