css-animations.js
is a library which uses the CSS DOM API to access CSS3 keyframe animations, it enables you to control the animations with Javascript.
You can easily add, modify, or remove keyframes from existing animations.
How to use
Download css-animations.js
to your project and load it. It also works as an AMD module as well as a global object.
If not using it as an AMD module, it exports a global objects named CSSAnimations that allows you to access the API.
Browser Support
This library has only been tested in Firefox 17+ and Chrome 23+
Demos
Adding a keyframe
JS Bin
Modifying a keyframe
JS Bin
Creating a new animation
JS Bin
Examples
// Changing an animation
var anim = CSSAnimations.get('pulse');
anim.setKeyframe('100%', { 'background-color': 'red' });
// Dynamically creating and applying an animation
var anim = CSSAnimations.create({
'0%': { transform: 'translateY(0)' },
'70%': { transform: 'translateY(50px)' },
'100%': { transform: 'translateY(150px)' }
});
$(el).css({ 'animation-name': anim.name,
'animation-duration': '1s' });
$(el).on('animationend', function() {
CSSAnimations.remove(anim.name);
});