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

File Size: 21.3 KB
Views Total: 570
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 {
  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.


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

$.keyframes('myAnimation', {
  // ...

5. Config the animation using the following parameters:

  $('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')
.anime('animation-2', '1s');

7. Clear the animation from the element.

// clear

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

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