새로 고침 CSS 애니메이션 여러 번

한 번 실행되는이 복잡한 애니메이션이 있는데 "animation-iteration-count : infinite;"를 사용할 수 없습니다. 여러 번 반복하라. 이것을 할 또 다른 방법이 있습니까? 예를 들어 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 : 무한; 그것을 지탱하는 것은 아무것도하지 않는다. 물론 레이어 0에 놓으면 다른 애니메이션을 실행하지 않고 첫 번째 애니메이션을 무한히 반복합니다. 그들은이 프로젝트에서 변경된 일부 애니메이션 글자입니다 : https://developer.mozilla.org/pt-PT/demos/detail/css-tricks 아이디어가 있습니까? http://jsfiddle.net/2AnEJ/

출처

2012-09-05 Claudiu Creanga

더 나은 질문은, 왜 세계에서 당신이이 중 하나를 수행 할 것 ?? –

:) 애니메이션은 정말 멋지지만 페이지가 내려 가고 스크롤하지 않으면 사용자가 볼 수 없기 때문에 도착할 때까지 애니메이션이 완료됩니다. 더 작은 스크린 버전 사이트 그래서 나는 그것을 올려 놓을 공간이 없다) –

만약 jsFiddle을 가지고 있다면 아마 누군가가 도울 수있는 유일한 방법 일 것이다./ –

단순히 이렇게 사업부를 새로 고치려면 ...

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

당신은 애니메이션의 각 배치가 완료된 후이를 다시 setInterval을 사용할 수 : 나는 바이올린을했다.

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

(분명히 그 예입니다 - 애니메이션의 총 시간 간격을 변경)

출처

2012-09-05 15:07:17 Archer

그래, 그게 다야. 감사! –

친구를 도와주는 기쁜 :) – Archer

새로 고침 CSS 애니메이션 여러 번

답변

관련 문제