All-you-need jQuery plugin for running css animations.

README.md

Usage

// With Animate.css
$(...).cssAnimate('animated bounce');

// Chaining animations with promise
$(...).cssAnimate('animated bounce')
.then(function (elm) {
  return $(elm).cssAnimate('animated flash');
})
.then(function () {
  return $.when(
    $(...).cssAnimate('animated fadeIn'),
    $(...).cssanimate('animated fadeOut')
  );
});

// For CSS animation that shows element,
// add `display: {show || 'inline-block'}` right before animation starts
$(hiddenElement).cssAnimate('animated fadeIn', {show: true});

// For CSS animation that hides element,
// add `display: none` right after animation ends
$(visibleElement).cssAnimate('animated fadeOut', {hide: true});

jquery.cssAnimate.js

(function ($) {

var EVT_ANIMATIONEND = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';

$.fn.cssAnimate = function (animClass, options) {
  options = options || {};

  var promises = [];

  this.each(function () {
    promises.push(
      runCSSAnimation($(this), animClass, options)
    );
  });

  return $.when.apply($, promises);
};

function runCSSAnimation($elm, animClass, options) {
  var dfd = $.Deferred(), timeout;

  var onAnimationend = $.proxy(function (_animClass, $evt) {
    $(this).removeClass(_animClass).off(EVT_ANIMATIONEND);
    clearTimeout(timeout);
    if (options.hide) {
      $elm.css('display', 'none');
    }
    dfd.resolve();
  }, $elm[0], animClass);

  if (options.show) {
    $elm.css('display', typeof options.show === 'string' ? options.show : 'inline-block');
  }
  $elm.on(EVT_ANIMATIONEND, onAnimationend).addClass(animClass);
  timeout = setTimeout(onAnimationend,
    durationToMs($elm.css('animation-duration')) +
    durationToMs($elm.css('animation-delay'))
  );

  return dfd.promise();
}

function durationToMs(duration) {
  if (!duration) {
    return 0;
  }

  if (duration.indexOf('ms') >= 0) {
    return Number(duration.replace(/ms/, ''));
  }
  else if (duration.indexOf('s') >= 0) {
    return Number(duration.replace(/s/, '')) * 1000;
  }
  return Number(duration.replace(/[a-z]/gi, ''));
}

})(jQuery);

jquery.cssAnimate.min.js

(function($){var EVT_ANIMATIONEND="animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd";$.fn.cssAnimate=function(animClass,options){options=options||{};var promises=[];this.each(function(){promises.push(runCSSAnimation($(this),animClass,options))});return $.when.apply($,promises)};function runCSSAnimation($elm,animClass,options){var dfd=$.Deferred(),timeout;var onAnimationend=$.proxy(function(_animClass,$evt){$(this).removeClass(_animClass).off(EVT_ANIMATIONEND);clearTimeout(timeout);if(options.hide){$elm.css("display","none")}dfd.resolve(this)},$elm[0],animClass);if(options.show){$elm.css("display",typeof options.show==="string"?options.show:"inline-block")}$elm.on(EVT_ANIMATIONEND,onAnimationend).addClass(animClass);timeout=setTimeout(onAnimationend,durationToMs($elm.css("animation-duration"))+durationToMs($elm.css("animation-delay")));return dfd.promise()}function durationToMs(duration){if(!duration){return 0}if(duration.indexOf("ms")>=0){return Number(duration.replace(/ms/,""))}else if(duration.indexOf("s")>=0){return Number(duration.replace(/s/,""))*1e3}return Number(duration.replace(/[a-z]/gi,""))}})(jQuery);