jquery replay css animation problems encountered_jquery

I was doing CSS animation recently and encountered a situation where I needed to use a script to replay the animation. For example:

css animation code

Copy code The code is as follows:

. 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 calls playback

Copy code The code is as follows:

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

At this time, you will find that the animation will be displayed for the first time It plays correctly, but the animation will not play the second time.

Later I checked online and found that the solution is very simple. Just copy an element, remove the original one, and add styles to the new one.

Copy code The code is as follows:

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

Here is a link, a solution for foreigners. Other situations were also mentioned. Friends who encounter similar problems can refer to it. Of course, it is in English.
http://css-tricks.com/restart-css-animation/