Recently in the CSS animation, encountered the need to use a script to replay the animation. For example:
CSS Animation code
Copy Code code 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 Call Playback
Copy Code code as follows:
$ (". Seed_txt_out"). Children ("div"). Removeclass ("Seed_txt");
$ (". Seed_txt_out"). Children ("div"). addclass ("Seed_txt");
At this point, you will find that the first display, the animation will play correctly, but the second time, the animation will not play.
Later on the Internet to check, the solution is very simple, copy an element, the original remove, in the new above add the style can be.
Copy Code code as follows:
$ (opts.txt). Children ("div"). Removeclass ("Seed_txt");
Temp = $ (opts.txt). Children ("Div:eq" ("+ $"). Parent ("UL"). Children ("Li"). Index (this) + ")";
Newdiv = Temp.clone (true);
Temp.after (NEWDIV);
Temp.remove ();
Newdiv.addclass ("Seed_txt");
Here is a link, foreigners to solve the solution. and said other things. Friends who encounter similar problems can be consulted, of course, in English.
http://css-tricks.com/restart-css-animation/