Categories
JavaScript Answers

How to restart animation in CSS3 and JavaScript?

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.