jQuery Plugin For Configurable Animate.css Powered Animations - animateCSS

File Size: 8.38 KB
Views Total: 2776
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Configurable Animate.css Powered Animations - animateCSS

animateCSS is a very small jQuery plugin which applies configurable & customizable Animate.css based CSS3 animations to any DOM objects.

Installation:

# NPM
$ npm install @claviska/jquery-animate-css --save

How to use it:

1. Include the required Animate.css in the header of your html document.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

2. Include jQuery and the JavaScript file jquery.animateCSS.js at the end of the html document.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

3. Apply a CSS3 animation of your choice to your element by calling the function animateCSS and pass the animation type as the first parameter as this:

$('.box').animateCSS('flipInY');

4. Set the animation delay & duration in milliseconds.

$('.box').animateCSS('flipInY',{
  delay: 0,
  duration: 1000
});

4. Trigger a callback function after the animation is complete.

$('.box').animateCSS('flipInY',{
  complete: function() {}
});

Change log:

2017-10-27

  • Add support for AMD/CommonJS

2017-03-24

  • Improve performance when delay = 0

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