jQuery Plugin For Handling CSS3 @Keyframe Animations - Anime.js

Anime.js is a lightweight and dynamic jQuery animation plugin that makes it easy to create and control CSS3 @keyframes based animations on web pages. 

It is ideally suited for working with third-party CSS3 animation libraries such as animate.css or magic.css.

How to use it:

1. Download the plugin and insert the main script jquery.anime.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery.anime.js"></script>

2. Create an animation using CSS @keyframes.

/* jello animation from animate.css */
@keyframes jello {
  from,
  11.1%,
  to {
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

3. Apply the animation to the element you specify.

$(function(){ 
  $('#demo').anime('jello');
});

4. You can also create CSS3 @keyframes animations programmatically.

$.keyframes('myAnimation', {
  // ...
});

5. Config the animation using the following parameters:

• name: animation-name CSS property
• duration: animation-duration CSS property
• ease: animation-timing-function CSS property
• delay: animation-delay CSS property
• iteration: animation-iteration-count CSS property
• direction: animation-duration CSS property
• state: animation-play-state CSS property
• mode: animation-fill-mode CSS property
• onComplete: callback function

$(function(){ 
  $('Selector').anime(name, duration, ease, delay, iteration, direction, state, mode, cssValue, onComplete);
});

6. You can also chain multiple animations together using the $.fn.then() method to run animations in sequence.

$('#demo').anime('animation-1', '1s')
.then()
.anime('animation-2', '1s');

7. Clear the animation from the element.

// clear
$('#demo').anime('none');

// cancel
$('#demo').delay(1000).anime('myAnimation', '1s');
$('#demo').clearQueue();

---

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