JavaScript Element animationstart Event

What You’ll Learn

The animationstart event fires when a CSS Animation begins. Learn addEventListener vs onanimationstart, how animation-delay (including negative delay) affects elapsedTime, and how it leads into animationiteration / animationend—with five examples and try-it labs.

Introduction

As soon as a CSS animation is ready to play—after any positive animation-delay—the browser fires animationstart. Use it to mark UI as “playing,” disable a button, or prepare the next step in a motion sequence.

MDN: with a negative delay, the event still fires, and elapsedTime equals the absolute value of the delay. The animation begins partway through its keyframes, as if it had already been running.

Understanding animationstart

An instance event on elements that begin a CSS Animation. It answers: “Has this animation started playing?”

• Fires when the animation starts (after a positive delay, if any).
• elapsedTime is usually 0; with negative delay it is -1 * delay.
• AnimationEvent — includes animationName, elapsedTime, pseudoElement.
• Baseline Widely available on MDN (since December 2019).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("animationstart", (event) => { });

onanimationstart = (event) => { };

Event type

An AnimationEvent (inherits from Event).

Event properties

⏱️ animation-delay and elapsedTime

⚖️ Animation lifecycle events

Examples Gallery

Examples follow MDN Element: animationstart event. Try It Yourself labs start a CSS animation so you can watch the event fire—including delay cases.

const animated = document.querySelector(".animated");

animated.addEventListener("animationstart", () => {
  console.log("Animation started");
});

Animation started

const animated = document.querySelector(".animated");

animated.onanimationstart = () => {
  console.log("Animation started");
};

// Assigning again replaces the previous onanimationstart handler.

Animation started

const box = document.getElementById("box");

box.addEventListener("animationstart", (event) => {
  console.log("name:", event.animationName);
  console.log("elapsedTime:", event.elapsedTime);
  console.log("pseudoElement:", JSON.stringify(event.pseudoElement));
});

box.classList.add("fade-in");

name: fade-in
elapsedTime: 0
pseudoElement: ""

const delayed = document.getElementById("delayed");
const skipped = document.getElementById("skipped");

function logStart(el, label) {
  el.addEventListener("animationstart", (event) => {
    console.log(label + " start, elapsedTime:", event.elapsedTime);
  });
}

logStart(delayed, "delay+0.4s");
logStart(skipped, "delay-0.4s");

delayed.classList.add("run-delayed"); // animation-delay: 0.4s
skipped.classList.add("run-skipped"); // animation-delay: -0.4s

delay-0.4s start, elapsedTime: 0.4
delay+0.4s start, elapsedTime: 0

const el = document.querySelector("p.animation");
const log = document.getElementById("log");
const btn = document.getElementById("toggle");
let iterations = 0;

function append(msg) {
  log.textContent += msg + " ";
}

el.addEventListener("animationstart", () => append("start"));
el.addEventListener("animationiteration", () => {
  iterations += 1;
  append("iteration:" + iterations);
});
el.addEventListener("animationend", () => {
  append("end");
  el.classList.remove("active");
  btn.textContent = "Activate animation";
});
el.addEventListener("animationcancel", () => append("canceled"));

btn.addEventListener("click", () => {
  el.classList.toggle("active");
  log.textContent = "";
  iterations = 0;
  const on = el.classList.contains("active");
  btn.textContent = on ? "Cancel animation" : "Activate animation";
});

start iteration:1 end

🚀 Common Use Cases

• Disabling a “Play” button while an entrance animation runs.
• Showing a “playing” badge or spinner when motion begins.
• Analytics: count how often a branded animation actually starts.
• Coordinating audio or captions with the first frame after delay.
• Teaching the CSS animation lifecycle next to iteration/end/cancel.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since December 2019).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Positive animation-delay postpones the event until the delay ends.
• Negative delay sets a non-zero elapsedTime at start.
• Related learning: animationiteration, animationend, animationcancel, JavaScript hub.

💡 Best Practices