Detect which AnimationEnd has fired via animationName

css, css-animations, detect, javascript, keyframe

Solution

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.originalEvent.animationName === "three") {
         console.log('the event happened');
     }
}

Or,

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

Problem

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.

Original source