1

私は一度実行するこの非常に複雑なアニメーションを持っています。何度も繰り返すことです。これを行う別の方法はありますか？たとえば、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。

animation-iteration-count: infinite; と入力すると、#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());

アニメーションの各バッチが完了した後に setInterval を使用してリセットできます。

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

(明らかにこれは一例です - 間隔をアニメーションの合計時間に変更します)

于 2012-09-05T15:07:17.423 に答える