jQuery Plugin To Handle Animate.css Powered CSS3 Animations

Animate.css.js is a lightweight jQuery plugin used to handle / manage Animate.css based CSS3 animations with callbacks and promises support.

How to use it:

1. You first need to load the Animate.css in the head section of the html page.

<link rel="stylesheet" href="/path/to/animate.min.css">

2. Then load the jQuery Animate.css.js after jQuery library as this:

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="src/jquery-animate.css.js"></script>

3. Let's start to animate elements on the page. The JavaScript snippet as shown below will apply the 'bounce' animation to the element named '.target'.

$(".target").animateCss('bounce');

4. Add a specified animation duration to the 'bounce' animation.

$(".target").animateCss('bounce', {
  duration : 2000  // 2 seconds
});

5. Specify the delay time until the 'bounce' animation begins.

$(".target").animateCss('bounce', {
  delay: 500 // .5 second
});

6. Fire a callback function after the 'bounce' animation ends.

$(".target").animateCss('bounce', {
  callback: function() {
    // ...
  }   
});

7. Specify the the queueName to be used in promises.

$(".target").animateCss('bounce', {
  queue : 'fx'
});

8. Promises.

$(".target").animateCss('bounce').promise()
.then(
  function() {
    $(this).html("Promise resolved!");
  }
);

---

This awesome jQuery plugin is developed by bommox. For more Advanced Usages, please check the demo page or visit the official website.