Animaciones CSS con keyframes en React

Una regla @keyframes describe una animación de varios pasos indicando los valores de las propiedades en distintos puntos de una línea temporal, mediante from/to o porcentajes como 0%, 50% y 100%.

A diferencia de las transiciones, los keyframes pueden describir movimientos complejos de varias etapas que se ejecutan por sí solos, sin un cambio de estado en cada paso.

Puede aplicar un conjunto de keyframes mediante la propiedad animation: animation: slideIn 400ms ease forwards. Esta propiedad agrupa el nombre, la duración, la función de temporización y el modo de relleno.

El modo de relleno forwards mantiene el elemento en los valores de su último keyframe cuando termina la animación, evitando que vuelva bruscamente al inicio.

En React, normalmente añade una clase que contiene la declaración animation cuando el estado pasa a ser verdadero. Por ejemplo, añadir is-entering inicia los keyframes en el momento en que el elemento se monta o cambia una bandera.

Esto mantiene la lógica de la animación en CSS, mientras React solo decide cuándo añadir la clase.

animation-fill-mode controla qué estilos se aplican antes y después de que se ejecute la animación. forwards conserva el último keyframe, backwards aplica el primero durante cualquier retraso y both hace ambas cosas.

Sin forwards, un elemento que se anima hasta un estado visible volvería a ser invisible bruscamente cuando terminara la animación.

animation-direction: alternate reproduce la animación hacia delante y después hacia atrás en cada iteración. Combinada con animation-iteration-count: infinite, crea un movimiento fluido de ida y vuelta, como un efecto de pulsación o respiración.

Resulta útil para indicadores de carga o para un movimiento sutil que atraiga la atención.

animation-play-state puede ser running o paused. Puede controlarlo desde el estado de React; por ejemplo, puede pausar una marquesina al pasar el cursor cambiando una clase.

Como se pausa en lugar de reiniciarse, la animación continúa exactamente desde el punto en que se detuvo.

Una animación de keyframes solo se reproduce una vez cuando su clase se aplica por primera vez; volver a añadir la misma clase no la reinicia. El truco más limpio en React consiste en cambiar la key del elemento para que React vuelva a montar un nodo nuevo y reproduzca la animación desde el principio.

Por ejemplo, key={count} en un toast hace que se vuelva a montar cada vez que count se incrementa.

Algunas personas activan la reducción de movimiento en su sistema operativo por comodidad o accesibilidad. Incluya las animaciones no esenciales en @media (prefers-reduced-motion: reduce) y desactívelas o acórtelas allí.

Respetar esta preferencia hace que su interfaz sea más inclusiva y evita provocar molestias.

Para animar elementos cuando entran en la ventana gráfica, use un IntersectionObserver dentro de un useEffect. Cuando la entrada pasa a ser visible, actualice el estado, lo que añade la clase de animación.

Esto produce efectos de revelado al desplazarse sin necesidad de listeners de desplazamiento pesados ejecutándose en cada fotograma.

animation-delay escalona el momento en que comienza cada animación de keyframes. Si asigna retrasos crecientes a una lista de elementos, estos se animan en secuencia para crear un revelado coreografiado.

Puede calcular el retraso de cada elemento en React con style={{ animationDelay: i * 80 + 'ms' }}.

Use transiciones para cambios sencillos entre dos estados provocados por una interacción, y keyframes cuando necesite movimiento en varios pasos, un bucle o una animación que se ejecute independientemente de un cambio de estado.

Ambos son CSS puro, por lo que React solo decide cuándo se añaden las clases y el navegador gestiona los fotogramas.

Compruebe su comprensión del comportamiento de los keyframes.

Aprendió a definir @keyframes, aplicarlos con la abreviatura animation, controlar el modo de relleno y la dirección, pausar y volver a activar animaciones, y revelar elementos al desplazarse con IntersectionObserver.

También vio cómo respetar prefers-reduced-motion para ofrecer un movimiento accesible.