You can trigger or pause a CSS animation in JavaScript by manipulating the class of the element that the animation is applied to.

To trigger the animation, you can add the class that contains the animation to the element. For example:

element.classList.add("animation-class");

To pause the animation, you can use the animation-play-state property. You can set it to “paused” to pause the animation. For example:

element.style.animationPlayState = "paused";

You can also use the getComputedStyle method to get the current value of the animation-play-state property and toggle it between “paused” and “running”.

var animationState = window.getComputedStyle(element).getPropertyValue("animation-play-state");
if (animationState === "running") {
  element.style.animationPlayState = "paused";
} else {
  element.style.animationPlayState = "running";
}

Additionally, you can use javascript animation libraries like animate.css, greenSock, velocity.js etc to easily trigger and pause CSS animations.

Also Read:

Categorized in:

JavaScript

Tagged in:

, ,