Tuesday, August 28, 2012

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


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") ;


---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!


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

  2. Css3 Transitions Tutorial : Javascript

  3. Quick Tip: CSS3 Transition End Event

No comments:

Post a Comment