jQuery Plugin To Handle Animate.css Powered CSS3 Animations

File Size: 9.07 KB
Views Total: 548
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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'.


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.

  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.