Animations

A cross-browser library of CSS and JavaScript animations.

Animate.css #

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.

Official documentation

For more detailed information and examples, see the official documentation: Animate.css .

How to use? #

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../vendors/animate.css">

Basic example #

<h1 class=""
															    data-animation="fadeInUp"
															    data-animation-delay="800"
															    data-animation-duration="1500">FadeIn</h1>

Examples #

.bounce

.flash

.pulse

.rubberBand

.shake

.headShake

.swing

.tada

.wobble

.jello

.bounceIn

.bounceInDown

.bounceInLeft

.bounceInRight

.bounceInUp

.bounceOut

.bounceOutDown

.bounceOutLeft

.bounceOutRight

.bounceOutUp

.fadeIn

.fadeInDown

.fadeInDownBig

.fadeInLeft

.fadeInLeftBig

.fadeInRight

.fadeInRightBig

.fadeInUp

.fadeInUpBig

.fadeOut

.fadeOutDown

.fadeOutDownBig

.fadeOutLeft

.fadeOutLeftBig

.fadeOutRight

.fadeOutRightBig

.fadeOutUp

.fadeOutUpBig

.flipInX

.flipInY

.flipOutX

.flipOutY

.lightSpeedIn

.lightSpeedOut

.rotateIn

.rotateInDownLeft

.rotateInDownRight

.rotateInUpLeft

.rotateInUpRight

.rotateOut

.rotateOutDownLeft

.rotateOutDownRight

.rotateOutUpLeft

.rotateOutUpRight

.hinge

.jackInTheBox

.rollIn

.rollOut

.zoomIn

.zoomInDown

.zoomInLeft

.zoomInRight

.zoomInUp

.zoomOut

.zoomOutDown

.zoomOutLeft

.zoomOutRight

.zoomOutUp

.slideInDown

.slideInLeft

.slideInRight

.slideInUp