JavaScript Element animationstart Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word ANIMATIONSTART

Definition

In JavaScript, the animationstart event fires when a CSS Animation has started (MDN). If there is an animation-delay, it fires after that delay expires. A negative delay still fires the event, with elapsedTime equal to the absolute value of the delay.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for animationstart. Start with this line.

JavaScript
el.addEventListener("animationstart", fn)
CallWhat it does
el.addEventListener("animationstart", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("animationstart", …) — no import required.

Library declarations
JavaScript
el.addEventListener("animationstart", fn)

Parameters

ParameterDescription
CSS animationRequired. Must actually start keyframes
animation-delayOptional. Positive delay postpones the event

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Listen for animationstart (MDN)

Log a message as soon as the CSS animation begins.

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

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

How It Works

  1. Select the animated element. It must run a CSS animation.
  2. Register the listener. animationstart runs when playback begins.
  3. Show feedback. Log or update UI as soon as the animation starts.
  4. No delay? The event fires almost immediately after the animation is applied.

Example 2 — Read AnimationEvent Fields

Log animationName and elapsedTime at start.

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

box.addEventListener("animationstart", (event) => {
  console.log(event.animationName);
  console.log(event.elapsedTime);
});
Try It Yourself

How It Works

  1. Receive an AnimationEvent. Same type as iteration/end/cancel.
  2. Read animationName. Which @keyframes name started.
  3. Read elapsedTime. Usually 0 unless delay is negative (MDN).
  4. Filter when needed if an element runs more than one animation.

Example 3 — Positive Delay

MDN: with animation-delay, animationstart waits until the delay ends.

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

box.addEventListener("animationstart", () => {
  out.textContent = "animationstart (after delay)";
});

// CSS: animation: pulse 0.5s ease-out 0.5s 1;
//                          duration     delay
Try It Yourself

How It Works

  1. Set a positive delay in CSS (for example 0.5s).
  2. Apply the animation. The browser waits before starting playback.
  3. Event fires after the delay — that is when the animation has started (MDN).
  4. Try a negative delay in the lab to see a non-zero elapsedTime.
Compatibility

Browser Support

Element.animationstart is marked Baseline Widely available on MDN (since December 2019). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Element animationstart

Fires when a CSS animation starts — after any positive animation-delay.

Widely Available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer Legacy with prefixes historically
Partial support
animationstart Baseline support

Bottom line: Safe for modern browsers. Listen for animationstart after applying a CSS animation, and account for animation-delay. See the MDN Element animationstart reference.

Frequently Asked Questions

It fires when a CSS Animation has started (MDN). If there is an animation-delay, the event fires after that delay expires. With a negative delay, the event still fires and elapsedTime equals the absolute value of the delay.
No. MDN marks Element animationstart as Baseline Widely available (since December 2019). It is not Deprecated, Experimental, or Non-standard.
An AnimationEvent. Useful read-only properties include animationName, elapsedTime, and pseudoElement.
Use element.addEventListener("animationstart", handler) or set element.onanimationstart = handler. Prefer addEventListener when you need multiple handlers or easy removal.
Usually 0.0. If animation-delay is negative, elapsedTime is (-1 * delay) — for example a delay of -0.5s yields elapsedTime 0.5, and the animation begins partway through its sequence (MDN).
animationstart is first. Then you may get animationiteration between loops, animationend when the full run completes, or animationcancel if the animation aborts early.

Next: Element auxclick

Learn the non-primary pointer button click event.

auxclick tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element animationiteration Event JavaScript Element auxclick Event