Animaciones Keyframe con CSS3 y Javascript

También funciona como un módulo de AMD, así como un objeto global

css-animations.js es una biblioteca que utiliza la API CSS DOM para acceder a las animaciones de CSS3 keyframe, y permite controlar las animaciones con Javascript.

Puedes fácilmente añadir, modificar o quitar keyframes de animaciones existentes.

Cómo utilizarla

Descarga css-animations.js a tu proyecto y lo cargas. También funciona como un módulo de AMD, así como un objeto global.

Si no se utiliza como un módulo de AMD, exporta a objetos globales denominados CSSAnimations que permite acceder a la API.

Soporte del navegador

Esta biblioteca sólo se ha probado en Firefox y Chrome 17 + 23 +

Demos

JS Bin

JS Bin

Ejemplo

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