1

我有一个运行一次的非常复杂的动画，我不能使用“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/

4

1 回答 1

3

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

$("#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)

于 2012-09-05T15:07:17.423 回答