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.