CSS3 transitionend event with cross browser compatability using Javascript

I had 2 animations, the first one would last 10 seconds and the second one had to start from the time the first one ends. After some research I found the following solution:

First animation:

canvas1 =  document.getElementById("myCanvas") ;

canvas1.addEventListener('transitionend',     spin_finished, false);

---Start First animation

Second animation:

function spin_finished() {

       canvas1.removeEventListener('transitionend', spin_finished, false);


         - start second animation


}

The removeEventListener is required to make sure the transitionend event happens only once.

Then I ran into cross browser naming convention problem because each browser calls the transitionend event differently. Then I ran into this elegant solution by NeilJS

// CROSS-BROWSER TRANSITION END EVENT LISTENERS

var transEndEventNames = {


    'WebkitTransition': 'webkitTransitionEnd',


    'MozTransition': 'transitionend',


    'OTransition': 'oTransitionEnd',


    'msTransition': 'MSTransitionEnd',


    'transition': 'transitionend'


},


transEndEventName = transEndEventNames[Modernizr.prefixed('transition')]; // bind event listener to transEndEventName eg:


//

So the revised code looks like this after inserting the previous snippet:

First animation:

canvas1 =  document.getElementById("myCanvas") ;

canvas1.canvas.addEventListener(transEndEventName,
     spin_finished, false);

---Start animation

Second animation:

function spin_finished() {

canvas1.canvas.removeEventListener(transEndEventName, spin_finished, false);

- start second animation


}

Works great on Firefox, Safari, Opera and Chrome!

References:

1. Cross-browser CSS3 transitionend event for event listeners by NeilJS



2. Css3 Transitions Tutorial : Javascript



3. Quick Tip: CSS3 Transition End Event