Animate.css is a wonderful thing to animate whatever you want in your project. It’s a bunch of cool, fun, and cross-browser animations for creating outstanding sliders, for emphasis, home pages, and general just for adding coolness to the modern web.
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.
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'); You can 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;
}Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, ms, o)
Effects:
Attention seekers
- flash
- bounce
- shake
- tada
- swing
- wobble
- wiggle
- pulse
Flippers
- flip
- flipInX
- flipOutX
- flipInY
- flipOutY
Fading entrances
- fadeIn
- fadeInUp
- fadeInDown
- fadeInLeft
- fadeInRight
- fadeInUpBig
- fadeInDownBig
- fadeInLeftBig
- fadeInRightBig
Fading exits
- fadeOut
- fadeOutUp
- fadeOutDown
- fadeOutLeft
- fadeOutRight
- fadeOutUpBig
- fadeOutDownBig
- fadeOutLeftBig
- fadeOutRightBig
Bouncing entrances
- bounceIn
- bounceInDown
- bounceInUp
- bounceInLeft
- bounceInRight
Bouncing exits
- bounceOut
- bounceOutDown
- bounceOutUp
- bounceOutLeft
- bounceOutRight
Rotating entrances
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
Rotating exits
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
Lightspeed
- lightSpeedIn
- lightSpeedOut
Specials
- hinge
- rollIn
- rollOut