jquery重新播放css動畫所遇問題解決_jquery

最近在做css動畫，遇到需要用腳本重新播放動畫的情況。例如：

css動畫程式碼

複製程式碼 程式碼如下:

seed_txt_out .seed_txt h2 {
animation-name: seed-h2;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0s ; iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
position: relative;
top: 10px;
}
@keyframes eed -h2
{
from {top: -120px;}

to {top: 10px;}
}

jquery呼叫播放

複製程式碼

程式碼如下:

$(".seed_txt_out").children("div").removeClass("seed_txt ");
$(".seed_txt_out").children("div").addClass("seed_txt");

這時候，會發現，第一次顯示，動畫會正確播放，但是，第二次的時候，動畫就不會播放了。 後來上網查了一下，解決辦法很簡單，複製一個元素，把原來的去掉，在新的上面添加式樣就可以了。

複製程式碼

程式碼如下:


$(opts.txt).children(div" ).removeClass("seed_txt");
temp = $(opts.txt).children("div:eq(" $(this).parent("ul").children("li").index( this) ")");
newDiv = temp.clone(true);

temp.after(newDiv);
temp.remove();
newDiv.addClass("seed_txt"); 這裡有個鏈接，老外解決的辦法。還說了其它情況。遇到類似問題的朋友可以參考下，當然，是英文的。 http://css-tricks.com/restart-css-animation/