Animate.css

Animations

A cross-browser library of CSS and JavaScript animations.

Official documentation

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

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.

Usage

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

<link rel="stylesheet" href="assets/vendor/animate.css/animate.min.css">

Add the class .animated to the element you want to animate.

Infinity

You may also want to include the class .infinite for an infinite loop

Animation classes

Add one of the following animation classes:

Class names
`.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`

Example

<div class="animated infinite bounce">Example</div>

Customize

You can change the duration of your animations by adding a delay or by changing the number of times that it plays:

#yourElement {
  -vendor-animation-duration:: 3s;
  -vendor-animation-delay:: 2s;
  -vendor-animation-iteration-count:: infinite;
}