Different event names on different browsers

The events names are ‘transitionend’ (FF), ‘OTransitionEnd’ (Opera), ‘webkitTransitionEnd’ (Webkit). IE9 and lower do not support this, although there are vague promises IE10 will.

The easiest but less elegant approach would be to add event handlers for all of the above cases - in vanilla Javascript:

var el = document.querySelector( "..." ); //some element(s)
el.addEventListener(webkitTransitionEnd', onTransitionEnd, false );
el.addEventListener(transitionend', onTransitionEnd, false );
el.addEventListener(OTransitionEnd', onTransitionEnd, false );

Or one can use a sniffer to determine which event name to use

var onTransitionEnd = function (e){ alert('TRANSITION FINISHED'); };
var eventName = document.body.style.webkitBorderRadius
  ? "webkitTransitionEnd"
  : "transitionend";
el.addEventListener(eventName, onTransitionEnd, false);

In jQuery

var onTransitionEnd = function (e){ alert('TRANSITION FINISHED'); };
var eventName = document.body.style.webkitBorderRadius
  ? "webkitTransitionEnd"
  : "transitionend";
$( document.body ).on( eventName, onTransitionEnd );

Fallback when CSS transitions are not available

Of course we can’t just ignore IE - they are (still!) the most used web browser out there. My preferred strategy is to use modernizr as a sniffer, and fallback on your framework’s animation methods if not supported.

if( Modernizr.csstransitions ) {
  //use them if available
} else {
  //use your preferred js animation functions
}