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
. 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
$(".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.
$(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/
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
