Set Multiple CSS Keyframes With jQuery - Keyframes

Set Multiple CSS Keyframes With jQuery - Keyframes
File Size: 63.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The Keyframes jQuery plugin allows you to dynamically generate customizable, CSS keyframe based animations with callbacks and useful API.

The plugin also provides an extension Keyframes.Pathfinder which helps you generates complex movement paths (Demo).

How to use it:

1. Add jQuery JavaScript library and the jQuery Keyframes plugin to the html page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="jquery.keyframes.js"></script>

2. Define new animation sequences (keyframes).

$.keyframe.define([{
  name: 'ball-move',
  '0%': {
    'margin-left': '0px'
  },
  '50%': {
    'margin-left': '600px'
  },
  '100%': {
    'margin-left': '0px'
  }
}, {
  name: 'ball-spin',
  from: {
    'transform': 'rotate(90deg)'
  },
  to: {
    'transform': 'rotate(450deg)'
  }
}]);

3. Play the animations.

// move with easing
$('.el').playKeyframe({
  name: 'ball-move',
  duration: "3s",
  timingFunction: 'ease',
  iterationCount: 'infinite',
  direction: 'normal',
  fillMode: 'forwards',
  complete: increment
});

// run spin keyframes with a callback using the shorthand method.
$('.el').playKeyframe('ball-spin 500ms linear 0s 3 normal forwards', increment);

4. More API methods to control the animations.

// Reset the animation
$(selector).resetKeyframe(callback);

// Pause the animation
$(selector).pauseKeyframe();

// Resume the animation
$(selector).resumeKeyframe();

Changelog:

2019-02-15

2018-12-08

  • jQuery noConflict compatibility

2018-08-16

  • Correct this

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