A set of animations you can apply to any object, using just CSS.

<link rel="stylesheet" href="/js/widgets/animate.css"> <div class="animated [insertanimationclasshere]"></div>

A super simple animation you can add to an object. Put the CSS link at the top of the site, and to have an object be animated, add the class "animated" followed by the class for the animation that you want (pick from above, the options are the class names)

Bonus: if you want the animations to loop infinitely, add the class "infinite" to the object.

Add the classes "delay-1s", "delay-2s", "delay-3s", "delay-4s", "delay-5s" to have the animation start on a delay (in 1 second intervals).

Animations by default run in 1 second (1s), you can slow it down or speed it up, by adding the classes "slower" (3s), "slow" (2s), "fast" (800ms), "faster" (500ms)

 

For animations on hover, just jquery or javascript add the classes on hover. Example:

<script > $("animated").hover(function(){ $(this).addClass("fadeIn"); }); </script>