Detect which AnimationEnd has fired via animationName


I have several CSS3 animations linked to one div, but I only want a function to be callad a the end of the last animation.

I have used the animationEnd event so that I can trigger said function but as I said I only want the it to run on the last animation.

Is there a way to detect with animation has ended by checking the name of the animation that has triggered the animationEnd event?

thus allowing me to use a if statement to single out the last animation.

Any help would be appreciated.

/--------- Correct answer -----------/

var $element = $('.eye').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function(e){

            if (e.originalEvent.animationName === "three") {...}

The correct event which I needed was e.originalEvent.animationName

Problem courtesy of: Damon


The parameter is required when you define the function. Either of these should work;

var $element = $('.eye').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function(event){
     if (event.animationName === "three") {
         console.log('the event happened');


var $element = $('.eye').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function(e){
     if (e.animationName === "three") {
         console.log('the event happened');
Solution courtesy of: mattclegg


I don't know why... but I can catch the the animationName only by e.originalEvent.animationName

so the best option is:

function getAnimationName(e) {
  if(e.animationName != undefined) return e.animationName;
  if(e.originalEvent.animationName != undefined) return e.originalEvent.animationName;
  else return undefined;
Discussion courtesy of: Almog Baku

This recipe can be found in it's original form on Stack Over Flow.