CSS3 Keyframe Animations With Javascript

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.

css3-keyframe-animations-js

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);
});