Animate.css
animate.css
is 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