v145 · Web APIs · Cancel Triggers

Cancel Triggers

A CSS animation can be cancelled by several different mechanisms. This page demonstrates each trigger — display: none, animation: none, removing the element, and changing animation-name — and shows the animationcancel event firing for each via the onanimationcancel property (Chrome 145+).

animationcancel vs animationend: animationend fires when an animation completes naturally. animationcancel fires when it's cut short before completing — useful for cleanup code that should run regardless of whether the animation finished or was interrupted.

triggers

display: none

running

animation: none

running

Remove from DOM

running

animation-name changed

running (bounce)

global cancel log

Total cancels: 0

Trigger a cancellation above to see events…

code

const el = document.querySelector('.animated');

// Chrome 145+: property syntax works
el.onanimationcancel = event => {
  console.log('cancelled:', event.animationName);
  // Clean up state — animation did NOT complete normally
  el.classList.remove('animating');
};

// All cancellation triggers:
el.style.display = 'none';      // → animationcancel
el.style.animation = 'none';    // → animationcancel
el.style.animationName = '';    // → animationcancel
el.remove();                    // → animationcancel (fires on element before removal)
// Note: animationend does NOT fire in any of these cases

see also