Web/API/Window/animationcancel event

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The animationcancel event is fired when a CSS Animation unexpectedly aborts. In other words, any time it stops running without sending an animationend event. This might happen when the animation-name is changed such that the animation is removed, or when the animating node is hidden using CSS. Therefore, either directly or because any of its containing nodes are hidden.

Bubbles	Yes
Cancelable	No
Interface	AnimationEvent
Event handler property	onanimationcancel

The original target for this event is the Element that had the animation applied. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on HTMLElement: animationcancel.

Examples

This code adds a listener to the animationcancel event.

window.addEventListener('animationcancel', () => {
  console.log('Animation canceled');
});

The same, but using the onanimationcancel property instead of addEventListener():

window.onanimationcancel = () => {
  console.log('Animation canceled');
};

See a live example of this event.

Specifications

Specification	Status	Comment
CSS Animations	Working Draft	Initial definition

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
animationcancel event	Chrome No support No	Edge No support No	Firefox Full support 54	IE ?	Opera No support No	Safari Full support 13.1 Full support 13.1 Full support 12 Disabled' Disabled' From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 54	Opera Android No support No	Safari iOS Full support 13.4 Full support 13.4 Full support 12 Disabled' Disabled' From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

Compatibility unknown  

Compatibility unknown

User must explicitly enable this feature.'

User must explicitly enable this feature.

See also

• CSS Animations
• Using CSS Animations
• AnimationEvent
• Related events: animationstart, animationend, animationiteration
• This event on Document targets: animationcancel
• This event on HTMLElement targets: animationcancel

Window: animationcancel event by Mozilla Contributors is licensed under CC-BY-SA 2.5.