animation - examples - Animaciones de cadena CSS3

css animation hover

Question

Tengo una serie de animaciones que necesito 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

Estaba construyendo una cadena de animaciones en Chrome 16 usando la forma "correcta" y la más general: disparando la segunda animación en webkitAnimationEnd, con las animaciones definidas por los fotogramas clave referenciados por una regla de clase que define las variables de animación * y activadas agregando 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 2

Hay varias maneras de encadenar las animaciones: existe la forma pura de CSS, que utiliza -webkit-animation-delay, donde define múltiples animaciones y le dice al navegador cuándo iniciarlas, 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 forma 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 código que un enlace, y más que CSS, por supuesto, pero es relable y más flexible, en mi humilde opinión.

Answer 3

Mientras buscaba lo mismo, sin el uso de algo como jQuery, se me ocurrió la misma idea de encadenamiento, 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 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 de className cuando finalice 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, debe usar Vanilla JS.

Hice algunas investigaciones y logré juntar algo. Mira este violín para ver un ejemplo:

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

El producto final está en mi repo github .

Espero que esto te brinde cierta información / ayuda.