animate: A JavaScript repository from lifebits

#animate.js based on requestAnimationFrame

animate.js add the CSS class animated and animation name to the element you want to animate. At the end of the animation cleans up after itself.

animate.css description of the animation classes

##Quick Use

Include the stylesheet and animate.js on your document's <head>

<head>
  <link rel="stylesheet" href="animate.css">
  <script src="animate.js"></script>
</head>

Invoke a function animate(opts)

animate({
  elemAnimated: animatedElemList,
  animateCssClass: 'animationName'
});

You can invoke a function when an animation ends: animate(opts, complete)

animate({
  elemAnimated: animatedElemList,
  animateCssClass: 'animationName'
}, function() {
  alert ("Animation Ends");
});

Main Feature: You can pass HTMLCollection in elemAnimated and set the interval before the start of the next animation.

Full example:

animate({
  elemAnimated: document.getElementsByTagName('a'),
  animateCssClass: 'slideInDown',
  duration: 1000,
  delay: 200
}, function() {
  alert ("Animation Ends");
});

View a full example

##Basic Usage ES6

Copy component in project: animate-es2015-webpack.js and animate.css
Import animate-es2015-webpack.js

import animate from '../vendor/animate/animate-es2015-webpack.js';

Invoke a function animate(opts, complete)

View a full example

lifebits/animate