v145 · Web APIs · Animationcancel Demo

Animationcancel Demo

Both registration methods — element.onanimationcancel = fn and addEventListener('animationcancel', fn) — are set up on the same element. Cancel the animation and see which handler fires. In Chrome 145 both fire; in older Chrome only the addEventListener version fires.

Checking onanimationcancel property support…

animated element

pulse
animation-name: pulse · infinite
Both handlers registered below

registration methods

Property: element.onanimationcancel = fn

el.onanimationcancel = event => {
  log('onanimationcancel fired: '
    + event.animationName);
};
Waiting for cancel…

Listener: addEventListener('animationcancel')

el.addEventListener('animationcancel',
  event => {
    log('addEventListener fired: '
      + event.animationName);
  });
Waiting for cancel…

trigger cancellation

Cancel the animation above to see events…

see also