jQuery Plugin For Dealing with CSS3 @Keyframe Animations – Anime.js

Anime.js is a light-weight and dynamic jQuery animation plugin that makes it straightforward to create and management CSS3 @keyframes based mostly animations on net pages. 

It’s ideally suited to working with third-party CSS3 animation libraries akin to animate.css or magic.css.

How one can use it:

1. Obtain the plugin and insert the principle 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 utilizing CSS @keyframes.

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

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

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

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

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

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

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

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

3. Apply the animation to the component you specify.

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

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

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

5. Config the animation utilizing the next parameters:

$(operate(){ 
  $('Selector').anime(identify, period, ease, delay, iteration, path, state, mode, cssValue, onComplete);
});

6. You may also chain a number of animations collectively utilizing the $.fn.then() methodology to run animations in sequence.

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

7. Clear the animation from the component.

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

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

This superior jQuery plugin is developed by chaping. For extra Superior Usages, please test the demo web page or go to the official web site.