CSS3 transitions callbacks

2011-07-08

css3,
javascript

This post is old, and probably obsolete

CSS3 transitions fire off a TransitionEnd event when they end, so that you can attach a Javascript handler to it. The only (minor) inconvenient is that the event takes different names depending on the platform.

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:

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.