Animate.css – Ready to use CSS3 animations

Animate.css is a bunch of open source (MIT Licence) animations in the form of a single CSS file which you can add to your website or web application to add some nice looking animations.
There is no JavaScript required for the animations to run – just add a CSS class to an element.

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

As it uses CSS3 animations, “cross-browser” means all browsers that support CSS3 animations. So all major browsers, but IE only starting from version 10.

It is used by companies like foursquare and Ghost Games (an EA game studio).

You can download a CSS file with all animations or you can customize your download to include only the animations you pick.

To use it, all you have to do is add two css class to an html element: “animated” to enable the animation, plus the class for a specific animation, e.g. “bounce”.

<div id="myElement" class="animated bounce">Test</div>

If you want to start an animation programatically, this is how you would do it with jQuery (assuming that you already assigned class “animated”):

$("#myElement").addClass("bounce");

This is how you would do it with plain old JavaScript and Html5:

document.getElementById("myElement").classList.add("bounce");

My personal favorites are the animations tada, lightSpeedIn and hinge, although the basic effects are probably the ones that will be used more often for things like fading elements in.