# Animate

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

## Usage

### CSS

In order to use this plugin on your page you will need to include the following styles in the Page CSS area from the page’s head section:

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

### Initialization

To animate an element, add the class `animated` to an element. You can include the class `infinite` for an infinite loop. Finally you need to add one of the following classes to the element:

Class Name |  |  |
--- | --- | --- | ---
`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`
`slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp`
`heartBeat` |  |  |

## Examples

Show code

# Example

    <h1 class="animated infinite bounce delay-2s">Example</h1>