Simple helper to css animate element with class

utils.js

var utils = {

    /**
     * Assigns an animation class to the selected elements, removing it when
     * the animation finishes.
     * @param  {jQuery}   el     The jQuery element.
     * @param  {string}   name   Class name to add.
     * @param  {Function} cb     Callback function when animation finishes.
     * @param  {Boolean}  nowait Call the callback without waiting.
     * @param  {String}   child  Child element that runs the animation or transition.
     */
    animWithClass: function(el, name, cb, nowait, child) {
      var elem = child ? el.find(child) : el;

      elem.one(ANIMATION_END + ' ' + TRANSITION_END, function(e) {
        el.removeClass(name);
        if (cb && nowait) {
          cb.apply(el[0]);
        } else if (cb) {
          setTimeout(function() { cb.apply(el[0]); }, 0);
        }
      });
      el.addClass(name);
    }
};

/**
 * Figure out cross-browser animation event names.
 */
var ANIMATION_END, TRANSITION_END;
(function() {
  var name,
      el = document.createElement('div'),
      animationNames = {
        'WebkitAnimation': 'webkitAnimationEnd',
        'MozAnimation': 'animationend',
        'OAnimation': 'oAnimationEnd oanimationend',
        'animation': 'animationend'
      },
      transitionNames = {
        'WebkitAnimation': 'webkitTransitionEnd',
        'MozAnimation': 'transitionend',
        'OAnimation': 'oTransitionEnd otransitionend',
        'animation': 'transitionend'
      };

  for (name in animationNames) {
    if (el.style[name] !== undefined) {
      ANIMATION_END = animationNames[name];
      TRANSITION_END = transitionNames[name];
    }
  }
})();