Quick Tip: CSS3 Transition End Event

If you’re working with CSS3 transforms and transitions, you detect the completion of an animation with the vendorTransitionEnd event.

So in Chrome and Safari:

document.addEventListener('webkitTransitionEnd', function(e) {
}, false);

will log the event object to the console. Opera uses oTransitionEnd, and Firefox just uses transitionend (note the lack of camel case for this one).

If you have multiple animations on multiple elements, you need to be able to tell which element has finished animating, and at what time.  You could either bind your event listener to each element respectively (which might get a bit messy), or you could rely on event delegation. Bind your event to the document as above, and e.target will reference the dom element that just finished animating.  e.target.className and e.target.id are very handy!

The following two tabs change content below.
Nicola Hibbert is a mobile game developer based in Guildford, Surrey.

Latest posts by Nicola (see all)