This library is a wrapper around Keyframes.js, a vanilla js library that allows dynamic generation of CSS keyframes with callback events and other niceness.
CSS3 introduced fancy features like transformations, translations, rotations and scaling. jQuery has a very nice built in $(selector).animate() function which allows for easy setup of these animations. However, jQuery's animate() does not support multiple keyframes. jQuery.Keyframes helps you accomplish just that.
<script src='http://code.jquery.com/jquery-3.3.1.slim.min.js'></script>Include script in your document using the following line:
<script src='/path/to/jquery.keyframes[.min].js'></script>Be sure to define and play animations only after the page has loaded using window.onload.
Detecting CSS animation support
var supportedFlag = $.keyframe.isSupported();Adding a new animation sequence (keyframe)
$.keyframe.define([{
name: 'trapdoor-sequence',
'0%': {'height': '70px'},
'30%': {'height': '10px'},
'60%': {'height': '30px'},
'100%': {'height': '10px'}
}]);Adding a single frame style
$.keyframe.define({
name: 'ball-roll',
from: {
'transform': 'rotate(0deg)'
},
to: {
'transform': 'rotate(360deg)'
}
});Adding multiple frame styles
$.keyframe.define([{
name: 'roll-clockwise',
'0%': {
'margin-left' : '0px',
'background-color' : 'red',
'transform' : 'rotate(0deg)'
},
'100%': {
'margin-left' : '600px',
'transform' : 'rotate(360deg)'
}
},{
name: 'roll-anti-clockwise',
'0%': {
'margin-left' : '0px',
'background-color' : 'red',
'transform' : 'rotate(0deg)'
},
'100%': {
'margin-left' : '600px',
'transform' : 'rotate(-360deg)'
}
}
]);Adding styles and properties in array fashion
Gives resemblance to CSS styling definitions
var shake_start = {'transform': 'translate(0px)'};
var shake_odd1 = {'transform': 'translate(-10px, -10px)'};
var shake_even1 = {'transform': 'translate(10px, 10px)'};
var shake_odd2 = {'transform': 'translate(10px, -10px)'};
var shake_even2 = {'transform': 'translate(-10px, 10px)'};
$.keyframe.define([{
name: 'crazy',
'0%': shake_start,
'10%': shake_odd2,
'20%': shake_even1,
'30%': shake_odd2,
'40%': shake_even2,
'50%': shake_odd2,
'60%': shake_even1,
'75.3%': shake_odd1,
'80.45%': shake_even2,
'91.6%': shake_odd1
}
]);Please note, you can add as many properties to the array as you want to
Responsive animations
$.keyframe.define([{
name: 'roll-clockwise',
media: 'screen and (max-width: 700px)',
from: {
'margin-left' : '0px'
},
to: {
'margin-left' : '600px'
}
}
]);Playing an animation
The css3 animation methods available are better documented here: http://www.w3schools.com/css/css3_animations.asp
$(selector).playKeyframe({
name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element
duration: '1s', // [optional, default: 0, in ms] how long you want it to last in milliseconds
timingFunction: 'linear', // [optional, default: ease] specifies the speed curve of the animation
delay: '0s', //[optional, default: 0s] how long you want to wait before the animation starts
iterationCount: 'infinite', //[optional, default:1] how many times you want the animation to repeat
direction: 'normal', //[optional, default: 'normal'] which direction you want the frames to flow
fillMode: 'forwards', //[optional, default: 'forward'] how to apply the styles outside the animation time, default value is forwards
complete: function(){} //[optional] Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
});Playing an animation (shorthand)
$(selector).playKeyframe(
'trapdoor-sequence 1s linear 0s infinite normal forwards',
complete
);Playing multiple animations
$(selector).playKeyframe([
'trapdoor-sequence 1s linear 0s infinite',
{
name: 'ball-roll',
duration: "3s",
timingFunction: 'ease',
iterationCount: 1
}
], complete);Reset the animation
$(selector).resetKeyframe(callback);Freeze keyframe animation and kill callbacks
$(selector).pauseKeyframe();Resume keyframe animation
$(selector).resumeKeyframe();- Hipster Gallery: http://labs.bebensiganteng.com/html5/hipstergallery/#thumbnails/0
- Ronneby Wordpress Theme: https://themeforest.net/item/ronneby-highperformance-wordpress-theme/11776839?s_rank=1
- Brooklyn Wordpress Theme: https://themeforest.net/item/brooklyn-responsive-multipurpose-wordpress-theme/6221179
- Contrive Wordpress Theme: https://themeforest.net/item/contrive-building-construction-html5-template/14535825
- DFD-Native Wordpress Theme: https://themeforest.net/item/native-powerful-startup-development-tool/19200310
- Sunday Wordpress Theme: http://themes.dfd.name/sunday/promo/
See other plugins that allow for spritesheets & more complex movement paths: https://github.com/Keyframes
- Keyframes.Pathfinder: A plugin for jQuery.Keyframes that generates complex movement paths
- Keyframes.Spritesheet: Keyframes.Spritesheet easily generates css3 keyframes for elements using animated spritesheets.
Hi! I’m krazyjakee 🎮, creator and maintainer of Keyframes & NodotProject - a suite of open‑source Godot tools (e.g. Nodot, Gedis etc) that empower game developers to build faster and maintain cleaner code.
I’m looking for sponsors to help sustain and grow the project: more dev time, better docs, more features, and deeper community support. Your support means more stable, polished tools used by indie makers and studios alike.
Every contribution helps maintain and improve this project. And encourage me to make more projects like this!
This is optional support. The tool remains free and open-source regardless.
Created with ❤️
For contributions, please open issues on GitHub
2.0.0
- Update dependencies
1.0.0
- Moved to use keyframes.js as a base
0.1.0
- Remove all vendor prefix functionality (if you need this stick with 0.0.9)
- Remove debug output
- Source code now in ES6
- Remove advanced example
- Add jQuery 3.x to example
- Add linting
0.0.9
- Add debug output