The animationend event is fired when a CSS Animation has completed (but not if it aborts before reaching completion, such as if the element becomes invisible or the animation is removed from the element).

Bubbles Yes
Cancelable No
Interface AnimationEvent
Event handler property onanimationend

Examples

This example gets an element that's being animated and listens for the animationend event:

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

animated.addEventListener('animationend', () => {
  console.log('Animation ended');
});

The same, but using the onanimationend event handler property:

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

animated.onanimationend = () => {
  console.log('Animation ended');
};

Specifications

Specification Status Comment
CSS Animations Working Draft Initial definition

Browser compatibility

No compatibility data found. Please contribute data for "api.Element.animationend_event" (depth: 1) to the MDN compatibility data repository.

See also

Document Tags and Contributors

Contributors to this page: wbamberg, Sebastianz, mfluehr, Sheppy, fscholz, teoli, ethertank, louisremi
Last updated by: wbamberg,