CSS3 animation/transition event handling

I'm a big fan of CSS3 animations and transitions, hardware accelerated, great for mobile and frees you from large animation libraries (e.g. JQuery).

A nice part of the animation/transition module specifications are the JavaScript DOM events (animationend and transitionend) that fire at the completion of your tweens which is very useful for chaining animations and allowing your user interface to continue it's flow only after tweens have finished. But you are left with a small problem:

• Detecting the correct event types to use between browser vendors
• Handing your UI flow in the instances where CSS3 animations/transitions aren't available (e.g. IE versions below 10) in an elegant way.

For these reasons I have created a small library called CSSAnimEvent which you can grab from here:

https://github.com/magnetikonline/cssanimevent

It provides CSSAnimEvent.onAnimationEnd(el,endHandler) and CSSAnimEvent.onTransitionEnd(el,endHandler) methods which allow end handlers to be called upon the completion of your DOM element's animations and transitions in a cross browser way.

Plus for browsers that don't support animations/transitions end handlers are called instantly in your program flow which mimics how the browser will handle things visually - simplifying your JavaScript code flow.