Animaciones de cadena CSS3

Question

Tengo una serie de animaciones que debo realizar en algunos textos, y estaba planeando usar CSS3. Mi plan es tener algo de texto que se mueva lentamente hacia abajo en la pantalla y, una vez que llegue a cierta parte de la pantalla, se resaltarán ciertas palabras y eventualmente el texto continuará moviéndose por la pantalla y desaparecerá dejando espacio para más texto.

Mi pregunta es, ¿cuál es la mejor manera de "encadenar" estas animaciones. ¿Debo tener una animación para mover hacia abajo la pantalla, una animación separada para resaltar el texto y una tercera animación para mover el resto de la pantalla? Entonces, ¿debo establecer un retraso de la animación para que solo comience la segunda y tercera animación una vez que las animaciones anteriores se hayan completado? Creo que estoy bien con la creación de las animaciones separadas que se encadenarán juntas, pero no estoy seguro de cómo estas animaciones deberían desencadenar la próxima animación para comenzar.

Answer 1

Hay varias maneras de encadenar las animaciones: existe la forma pura de CSS, utilizando -webkit-animation-delay, donde se definen varias animaciones y se indica al navegador cuándo se deben iniciar, por ejemplo.

-webkit-animation: First 1s, Second 2s; 
-webkit-animation-delay: 0s, 1s; 
/* or -moz etc.. instead of -webkit */ 

Otra forma es enlazar al evento final de la animación y luego iniciar otro. Aunque creo que esto no es confiable.

$('#id') 
    .bind('webkitAnimationEnd',function(){ Animate2() }) 
    .css('-webkit-animation','First 1s'); 

La tercera manera es establecer tiempos de espera en Javascript y cambiar la propiedad de animación css. Esto es lo que uso la mayor parte del tiempo, ya que es el más flexible: puedes cambiar fácilmente el tiempo, cancelar secuencias de animación, agregar nuevas y diferentes, y nunca he tenido un problema como el que tengo vinculante para la transición. evento.

$('#id').css('-webkit-animation','First 1s'); 
window.setTimeout('Animate2("id")', 1000); 
function Animate2.... 

es más que un código de vinculación y más de CSS, por supuesto, pero es relable y más flexible, en mi humilde opinión.

Answer 2

Estaba construyendo una cadena de animaciones en Chrome 16 usando la "derecha" - y la más general - forma: disparando la segunda animación en webkitAnimationEnd, con las animaciones definidas por fotogramas referenciados de una regla de clase que define la animación- * variables, y se activa al agregar el nombre de clase a los elementos de destino. Esto es "correcto" porque define todos los intervalos de tiempo relativamente, una vez, porque es el más flexible (por ejemplo, cada animación puede involucrar elementos separados, lo que no se puede hacer dentro de un fotograma clave), y porque maximiza el aprovechamiento de CSS3.

Falló. ¡Se corrigió quitando el nombre de clase de la transición completa antes de disparar el siguiente!

Answer 3

Mientras buscaba lo mismo, sin el uso de algo como jQuery, se me ocurrió la misma idea de encadenar, escuchando webKitanimationEnd, como lo sugirieron otros. De esta forma, podría usar CSS para las transiciones y el tiempo de la animación.

Puede crear una matriz como una cola y agregar el elemento que desea animar (con algunas opciones como efecto y tipo de animación). Luego, puede procesar esta cola yendo a la siguiente animación cuando finalice una animación. Esta animación podría ser un elemento diferente o una animación posterior del mismo elemento. Recuerde eliminar la clase de animación del className cuando finaliza la animación. Para cada paso, simplemente agregue las clases de CSS apropiadas y luego elimínelas cuando termine la animación. Debido a que escuchamos animationEnd, el tiempo se puede hacer con CSS solamente, dejando solo el procesamiento a JavaScript.

Esta es una tarea tan mínima que si su proyecto aún no está utilizando una biblioteca como jQuery, simplemente debe usar Vanilla JS.

Hice algunas investigaciones y logré juntar algo. Ver this fiddle para ver un ejemplo:

var manager = new AnimationManager(); 
manager.enqueue(animations).animate(); 

El producto final es en mi github repo.

Espero que esto le proporcione alguna información/ayuda.