JavaScript Element animationend Event

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

Definition

In JavaScript, the animationend event fires when a CSS Animation has completed (MDN). If the animation aborts early (element removed from the DOM, or the animation removed from the element), animationend is not fired. The event object is an AnimationEvent.

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

Syntax

Listen for animationend. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element whose CSS animation finished
AnimationEventRequired. Carries animationName, elapsedTime, pseudoElement
CSS animationRequired. Must run to completion for end to fire
IterationsOptional. End fires after the last iteration

Return Value

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

JavaScript Examples

Example 1 — Listen for animationend

MDN pattern: log when the CSS animation completes.

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

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

How It Works

  1. Select the animating element. It must have a CSS animation that can finish.
  2. Register the listener. Prefer addEventListener("animationend", …).
  3. Let it complete. End fires only after a normal finish (MDN).
  4. Show feedback. Log or update UI when the run is done.

Example 2 — Read AnimationEvent Fields

Print animationName and elapsedTime when end fires.

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

box.addEventListener("animationend", (event) => {
  console.log("name:", event.animationName);
  console.log("elapsed:", event.elapsedTime);
  console.log("pseudo:", event.pseudoElement);
});
Try It Yourself

How It Works

  1. Receive an AnimationEvent. Same type as start / cancel / iteration.
  2. Read animationName. Matches the CSS animation-name that finished.
  3. Read elapsedTime. Seconds the animation had been running (excluding pause).
  4. Check pseudoElement. Empty string means the element itself, not a ::pseudo.

Example 3 — End vs animationcancel

Listen for both; only one path runs for a given animation run.

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

box.addEventListener("animationend", () => {
  console.log("finished (animationend)");
});

box.addEventListener("animationcancel", () => {
  console.log("aborted (animationcancel)");
});
Try It Yourself

How It Works

  1. Attach both listeners. Finish and abort are separate outcomes.
  2. Finish path. Let the animation complete → only animationend.
  3. Abort path. Remove the animation mid-run → no animationend (MDN).
  4. Cleanup tip. Use cancel (where supported) when you need abort-side cleanup.
Compatibility

Browser Support

Element animationend is a standard CSS Animations event. MDN marks it Baseline Widely available since December 2019 — safe for everyday use in modern browsers.

✓ Baseline Widely available

Element animationend

Fires when a CSS animation completes — pair with animationcancel when abort cleanup matters.

Wide Baseline
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
animationend Widely available

Bottom line: Use animationend for normal finish cleanup. Remember: early abort means no animationend — listen for animationcancel too when needed.

Frequently Asked Questions

It fires when a CSS Animation has completed (MDN). If the animation aborts before completion — for example the element is removed from the DOM or the animation is removed from the element — animationend is not fired.
No. MDN marks Element animationend 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("animationend", handler) or set element.onanimationend = handler. Prefer addEventListener when you need multiple handlers or easy removal.
animationend means the animation finished normally. animationcancel means it was aborted early and never reached a normal end — then animationend does not fire for that run.
No. Each completed iteration (except the last) fires animationiteration. After the final iteration finishes, animationend fires once.

Next: animationiteration

Learn when each loop of a repeating CSS animation completes.

animationiteration 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)

10 people found this page helpful

JavaScript Element animationcancel Event JavaScript Element animationiteration Event