This is just a quick video tutorial on the basics of using Animate.css to quickly add some amazing animation effects with little to no effor at all! Then I will go over a few tips on how you can use a little bit of jQuery to really expand it's functionality by making animations hapen when you hover or click on a DOM element.

Credits to Style Sheet Creator: Daniel Eden
GitHub Repository

Animate on Hover function

function animationHover(element, animation){
  element = $(element);
  element.hover(
    function() {
      element.addClass('animated ' + animation);
    },
    function(){
      //wait for animation to finish before removing classes
      window.setTimeout( function(){
        element.removeClass('animated ' + animation);
      }, 2000);
    }
  );
};

Animate on Click function

function animationClick(element, animation){
  element = $(element);
  element.click(
    function() {
      element.addClass('animated ' + animation);
      //wait for animation to finish before removing classes
      window.setTimeout( function(){
          element.removeClass('animated ' + animation);
      }, 2000);
    }
  );
};

Good luck!

Update:

Better functions - which allow you to have a separate trigger element. (ex: hover or click logo animates sloganText) Credits to Kersten for sending this.