Modificado por última vez en Viernes, 06 Diciembre 2013 22:40
(0 votos)

Animaciones Keyframe con CSS3 y Javascript

css3 keyframe animations con 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);
    });

Comentarios (0)

No hay comentarios escritos aquí

Deja tus comentarios

Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
0 Caracteres
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana de FeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento