CSS Animation Event Names

Find the (prefixed) JavaScript event names for CSS animations & transitions supported by the current browser.

Install

npm install --save @methodgrab/animation-events

Example:

const animEvents = require( '@methodgrab/animation-events' );

// get & cache the prefixed event names
const transitionEnd      = animEvents.transitionEndEventName();
const animationEnd       = animEvents.animationEndEventName();
const animationIteration = animEvents.animationIterationEventName();

$( '.el' )
	.addClass( 'is-transitioning' )
	.one( transitionEnd, (  ) => {
		console.log( 'Transition complete!' );
		$( '.el' ).removeClass( 'is-transitioning' );
	};

API

transitionEndEventName()

→ string
Find the (prefixed) transitionend event name.
The transitionend event is fired when a CSS transition has completed.

animationEndEventName()

→ string
Find the (prefixed) animationend event name.
The animationend event is fired when a CSS animation has completed.

animationIterationEventName()

→ string
Find the (prefixed) animationiteration event name.
The animationiteration event is fired when an iteration of an animation ends.