Question

我有一个非常复杂的动画，只运行一次，我不能使用“animation-iteration-count：infinite;”多次重申。还有另一种方法吗？例如刷新div会刷新动画吗？（你怎么刷新div？）

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

如果我把动画迭代计数：无限; #hold它什么都不做。当然，如果我将它放到layer0Go，它将无限制地重复第一个动画而不运行其他动画。这是从这个项目改变的一些动画字母：https://developer.mozilla.org/pt-PT/demos/detail/css-tricks 有任何想法吗？我做了一个小提琴：http://jsfiddle.net/2AnEJ/

Answer 1

要刷新div，只需执行此操作...

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

您可以使用setInterval在每批动画完成后重置它。

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

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

多次刷新css动画

1 个答案: