Animate CSS jQuery Plugin

A jQuery plugin to stack animation and transition over CSS3.

Getting Started

Bower

Install with Bower bower install jquery.animateCSS

Download

Download the development version.

In your web page:

<script src="jquery.js"></script>
<script src="jquery.animateCSS.js"></script>
<script>
$(document).ready( function(){
  $('#your-id').animateCSS("fadeIn");
});
</script>

Documentation

Examples

Basic

$('#your-id').animateCSS('slideOut');

With callback

$('#your-id').animateCSS('slideOut', function(){
    console.log('Boom! Animation Complete');
});

Chain multiple animations

If you use the standard jQuery chaining mechanism, each animation will fire at the same time so you have to include the next animation in the callback.

$('#your-id')
  .animateCSS('slideOut')
  .animateCSS('slideLeft');