Controlling CSS3 Animations With jQuery - Animate.js

The Animate.js jQuery plugin makes it easier to apply Animate.css based CSS3 animations to any DOM elements with support for configurable duration and delay.

How to use it:

1. Load the latest versions of jQuery JavaScript library and Animate.css CSS3 animation library in your document.

<link rel="stylesheet" href="/path/to/animate.min.css">
<script src="/path/to/jquery-3.2.1.min.js"></script>

2. Load the jQuery Animate.js after jQuery library but before the closing body tag.

<script src="jquery.animate.min.js"></script>

3. Activate the plugin and specify the animation type you want to use.

$('#element').doAnim('bounce');
// or
$('#element').animateCss('bounce');

4. Specify how many times the animation should run.

$('#element').doAnim({

  'animation': 'bounce'
  'times': 3, // 0 = inifinite
  
});

5. Specify the duration of the CSS3 animation (in seconds).

$('#element').doAnim({

  'animation': 'bounce'
  'duration' : 1

});

6. Specify the delay for the CSS3 animation (in seconds).

$('#element').doAnim({

  'animation': 'bounce'
  'delay': 2

});

---

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