Sometimes, we want to restart animation in CSS3 and JavaScript.
In this article, we’ll look at how to restart animation in CSS3 and JavaScript.
How to restart animation in CSS3 and JavaScript?
To restart animation in CSS3 and JavaScript, we use the Animation API.
For instance, we write
const effect = new KeyframeEffect(
el,
[{ transform: "translateY(0%)" }, { transform: "translateY(100%)" }],
{ duration: 3000, direction: "alternate", easing: "linear" }
);
const animation = new Animation(effect, document.timeline);
animation.play();
to create the effect object with the KeyframeEffect constructor.
We call it with the el element we want to animate, an array of effects, and some animation options.
Options includes the animation duration, direction, and easing.
Then we create the Animation object with effect and document.timeline.
document.timeline is the default timeline of the current document.
Then we call play to play the animation.
Conclusion
To restart animation in CSS3 and JavaScript, we use the Animation API.
