JS Animation Control
Add and remove animation classes with JavaScript, and listen to animationend to chain behaviors after animations complete.
CSS
Intermediate
5 min read
Controlling CSS Animations with JavaScript
Example
const el = document.querySelector(".box");
// Trigger animation by adding class
el.classList.add("animate-in");
// Run something after animation completes
el.addEventListener("animationend", (e) => {
console.log("Animation done:", e.animationName);
el.classList.remove("animate-in");
el.classList.add("settled");
}, { once: true }); // once removes listener automatically Pro Tip
The { once: true } option removes the event listener after it fires once — handy for cleanup after entrance animations.