Solve the Problem of jquery re-playing css animations _ jquery

When you need to re-play the animation with a script for css animation, I would like to share with you the following. If you are interested, please refer to it and hope to help you with css animation recently, you may need to use a script to play the animation again. For example:

Css animation code

The Code is as follows:

. Seed_txt_out. seed_txt h2 {
Animation-name: seed-h2;
Animation-duration: 2 s;
Animation-timing-function: progress;
Animation-delay: 0 s;
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

The Code is as follows:

$ (". Seed_txt_out"). children ("p"). removeClass ("seed_txt ");
$ (". Seed_txt_out"). children ("p"). addClass ("seed_txt ");

At this time, you will find that the animation will be correctly played for the first time, but the animation will not be played for the second time.

Later, I checked it online. The solution was very simple. Copy an element, remove the original one, and add the style on the new one.

The Code is as follows:

Optional (opts.txt). children ("p"). removeClass ("seed_txt ");
Temp = logs (opts.txt ). children ("p: eq (" + $ (this ). parent ("ul "). children ("li "). index (this) + ")");
NewDiv = temp. clone (true );
Temp. after (newDiv );
Temp. remove ();
NewDiv. addClass ("seed_txt ");

There is a link here to solve the problem for foreigners. I also talked about other cases. If you encounter a similar problem, refer to, of course, English.
Http://css-tricks.com/restart-css-animation/