jQuery AnimationEnd Plugin - Provides a callback when a CSS3 animation is complete on an element

There will be some instances where in we have to do something after a CSS3 animation is complete on a particular element. This plugin will come in handy on those cases.

Plugin attaches to the animationEnd and transitionEnd events, fired when an animation is complete and provides a callback.


$.fn.animationEnd = function(callback) {
        return this.each(function(){
          var $this = $(this);
              $this.bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd transitionend webkitTransitionEAnind oTransitionEnd MSTransitionEnd", function() {
                if (typeof callback == 'function') {
                    callback.call(this); // brings the scope to the callback


In the demo, I have a case where we want to remove the class which provides the css3 styles, at the animation end so that we can add the class again to trigger the animation.


Suggestions are welcome to improve this plugin.Please, point out mistakes as well.