Animation accessor on animation and transition events

at a glance

Member reference

The developer-facing surface is exactly four items, documented on two stable member pages, each covering all nine dimensions (syntax, inputs, outputs, errors, context, lifecycle, examples, compatibility, and security/privacy):

• AnimationEvent.animation — the CSSAnimation that fired an animationstart, animationiteration, animationend, or animationcancel event; plus AnimationEventInit.animation, the matching constructor member (defaults to null)
• TransitionEvent.animation — the CSSTransition that fired a transitionrun, transitionstart, transitionend, or transitioncancel event; plus TransitionEventInit.animation, the matching constructor member (defaults to null)

Why it exists

Before this, an animationstart handler received only metadata — the animation's name, elapsed time, pseudo-element — so reaching the actual Animation instance meant querying element.getAnimations() and filtering. That workaround has a real hole, called out in the spec proposal (csswg-drafts #9010): when the same keyframes run twice on one element (animation: fade 1s, fade 1s), nothing in the event tells you which of the two matching objects fired it. The event now carries the instance itself, so the ambiguous lookup disappears.

Firefox and Safari shipped first; Chrome 151 is the catch-up (“Chromium catches up” per the feature detail), aligning with the CSS Animations Level 2 and CSS Transitions Level 2 drafts. The ChromeStatus entry also records a pragmatic partial polyfill for older engines — feature-detect the attribute, else fall back to a getAnimations() match — with the caveat that a perfect polyfill is impossible precisely in the duplicate-name case. Security and privacy reviews on the ChromeStatus entry are both “Not applicable”; the level-2 specifications report no new privacy or security considerations (the same objects were already reachable via getAnimations()).

Examples

// Pause the exact animation that fired the event — no getAnimations() lookup.
element.addEventListener("animationstart", (event) => {
  event.animation.pause();           // event.animation is the CSSAnimation
  event.animation.finished.then(() => console.log("settled"));
});

element.addEventListener("transitionend", (event) => {
  console.log(event.animation.transitionProperty, "finished"); // CSSTransition
});

// Feature-detect; fall back to the old (ambiguous) lookup on older engines.
element.addEventListener("animationstart", (event) => {
  const animation = ("animation" in event)
    ? event.animation
    : element.getAnimations().find(a => a.animationName === event.animationName);
  animation?.pause();
});

More live angles on the showcase: Conduct a running animation and Transition companion (all routes HEAD-verified 200 on 2026-07-26).

Browser compatibility

The BCD entries carry identical rows for both interfaces and link the canonical references directly — api/AnimationEvent.json and api/TransitionEvent.json each record an mdn_url (the MDN attribute page) and a spec_url (the css-animations-2 / css-transitions-2 definition, the latter confirming the unusually cased #Events-TransitionEvent-animation anchor). WPT coverage exists: css/css-animations/animationevent-types.html asserts animationstart/animationend/animationiteration events expose animation and that it is the same object found via getAnimations(); css/css-transitions/events-008.html asserts transitionrun/transitionstart/transitionend expose a CSSTransition with the correct transitionProperty. The Chromium implementation landed in CL 7914303 (merged), which also updated the interface expected-files (animationevent-interface, transitionevent-interface, animationevent-types, events-008).

Specifications

Anchor caution: the transition attribute's anchor is the unusually cased #Events-TransitionEvent-animation (verified live 2026-07-26) — there is no #dom-transitionevent-animation anchor, unlike the animations spec whose attribute and dictionary anchors both follow the #dom-* convention.

See also

• MDN — AnimationEvent: animation property and MDN — TransitionEvent: animation property (value, specifications, and compat as of 2026-07-26; no worked examples — gendn generated this full reference instead of a redirect stub; see also the AnimationEvent and TransitionEvent interface pages)
• Chromium animation_event.idl · transition_event.idl · animation_event_init.idl · transition_event_init.idl
• Chromium CL 7914303 — Add animation property to AnimationEvent and TransitionEvent (merged)
• WPT — animationevent-types.html · WPT — events-008.html
• Chrome Platform Showcase — Animation accessor on animation and transition events