v151 · javascript · web animations
Animation accessor on animation and transition events
A read-only animation property on AnimationEvent and TransitionEvent hands you the exact Animation object that fired the event — no more matching by name and target.
concepts
-
Meet the animation object
Start a CSS animation, then read the real
event.animationit produced —playState,currentTime,playbackRate, and the computed timing fromeffect.getComputedTiming(). -
Conduct a running animation
Grab
event.animationfromanimationstartand drive it with transport controls: pause, reverse, retime, and cancel a CSS-declared animation through its Web Animations handle. -
Transition companion
Trigger a CSS transition and catch the
CSSTransitionfromtransitionrun/transitionstart. Inspect it live and cancel it mid-flight — a handle CSS transitions never used to give you.
why direct access matters
CSS animations and transitions are represented internally as CSSAnimation and CSSTransition objects — subclasses of the Web Animations Animation interface. Previously, an animationstart or transitionend handler had no direct reference to that object: code had to call element.getAnimations() and match on animationName or transitionProperty, which is fragile when several animations share a name or target the same element. The Chrome 151 milestone listing records the accessor as Enabled by default, while the feature detail remains “Proposed”; when exposed, a handler can immediately read timing, await finished, or take control.
Two precision notes. The attribute is nullable in the spec (CSSAnimation? / CSSTransition?): a synthetic event constructed without the new init member reports null, so always test it before use. Cross-browser records are also forward-looking: ChromeStatus marks Firefox and Safari as shipped/shipping, while current BCD pins the property at Chrome 151, Firefox 152, and Safari 27. Those version numbers are recorded without inferring calendar release order.