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 |
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.