jquery重新播放css动画

最近在做css动画，遇到需要用脚本重新播放动画的情况。例如：

css动画代码

[html] view plain copy print ?

1. .seed_txt_out .seed_txt h2 { 
2.     animation-name: seed-h2; 
3.     animation-duration: 2s; 
4.     animation-timing-function: ease; 
5.     animation-delay: 0s; 
6.     animation-iteration-count: 1; 
7.     animation-direction: alternate; 
8.     animation-play-state: running; 
9.     position: relative; 
10.     top: 10px; 
11. } 
12. @keyframes seed-h2 
13. { 
14. from   {top: -120px;} 
15. to {top: 10px;} 
16. } 

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

jquery调用播放

[html] view plain copy print ?

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

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

这时候，会发现，第一次显示，动画会正确播放，但是，第二次的时候，动画就不会播放了。

后来上网查了一下，解决办法很简单，复制一个元素，把原来的去掉，在新的上面添加式样就可以了。

[html] view plain copy print ?

1. $(opts.txt).children("div").removeClass("seed_txt"); 
2. temp = $(opts.txt).children("div:eq(" + $(this).parent("ul").children("li").index(this) + ")"); 
3. newDiv = temp.clone(true); 
4. temp.after(newDiv); 
5. temp.remove(); 
6. newDiv.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/