Animate.css

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

Usage

To use animate.css in your website, simply drop the stylesheet into your document’s <head>, and add the class animated to an element, along with any of the animation names. That’s it! You’ve got a CSS animated element.
<head>
    <link rel="stylesheet" href="/animate.min.css"z>
</head>    
You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:
$('#yourElement').addClass('animated bounceOutLeft');
Change the duration of your animations, add a delay or change the number of times that it plays:
#yourElement {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;
}

CSS3 Animation Cheat Sheet by Justin Aguilar

How it works

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.
Add an animation class to the element you want animated:
<div id="object" class="slideUp">
For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element.

Adding effects

By default, these animations will trigger when the page loads – even if the element is further down the page – but by using jQuery there are many ways you can activate the animations : See More
Love this post?