onanimationcancel on GlobalEventHandlers

concepts

1. Animationcancel Demo

   An element with a running CSS animation. Use the property syntax (element.onanimationcancel = fn) and addEventListener to register handlers, then trigger cancellation and compare which fires.

2. Cancel Triggers

   Shows all the ways a CSS animation can be cancelled — display: none, removing from DOM, clearing the animation-name, and setting animation: none — and how animationcancel fires for each.

3. Cancel-aware Toast

   A toast queue that listens for onanimationcancel so it can log when a toast is interrupted — replaced, yanked with display:none, or removed — for analytics or recovery.

4. Loading Spinner

   An animated loading spinner with three cancel modes: display:none, animation:none, and "finish normally". Each mode fires either animationcancel (via the new .onanimationcancel property) or animationend, and the event log shows which — and why.

why it shipped

The animationcancel event was specified in the CSS Animations Level 1 spec alongside animationstart, animationiteration, and animationend. The sibling events have always been available as event handler properties (onanimationstart, onanimationend), but onanimationcancel was missing — a spec oversight that Chrome 145 fixes to achieve consistency and full spec compliance.

the fix

// Before Chrome 145: this was silently ignored
element.onanimationcancel = event => { console.log('cancelled', event.animationName); };

// Before Chrome 145: this worked (but not the property form)
element.addEventListener('animationcancel', event => { /* ... */ });

// Chrome 145+: BOTH now work
element.onanimationcancel = event => { console.log('cancelled', event.animationName); };
element.addEventListener('animationcancel', event => { /* ... */ });

// Also works on window
window.onanimationcancel = event => { console.log('global cancel:', event.animationName); };

// animationcancel fires when:
// - element gets display: none
// - element is removed from DOM
// - animation-name is changed/removed
// - animation: none is set
// - element gets visibility: hidden (in some cases)

references

• ChromeStatus entry
• MDN — animationcancel event
• CSS Animations Level 1 spec — onanimationcancel