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.

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