Animation Direction

El problema de los saltos bruscos

Imagina que animas un péndulo. Defines un fotograma inicial a la izquierda y un fotograma final a la derecha. Le dices que se repita infinitamente. ¿Qué ocurre? El péndulo va de izquierda a derecha... y luego se teletransporta instantáneamente de vuelta a la izquierda para empezar de nuevo. En la vida real, las cosas no se teletransportan. Van, y luego vuelven.

animation-direction es la propiedad que le enseña al navegador a "ir y volver". Define el sentido en el que se reproduce la línea temporal a través de sus repeticiones.

Los cuatro caminos posibles

• ✦ normal: (Valor por defecto) El viaje de ida convencional, del 0% al 100%. Cuando termina, el elemento regresa abruptamente al inicio y vuelve a arrancar.
• ✦ reverse: El viaje hacia atrás, del 100% al 0%. Pero cuidado: no solo se invierte el orden visual, también se invierten las curvas de aceleración (easing). Lo que antes aceleraba al final, ahora acelerará al principio.
• ✦ alternate: La magia pura para loops. El primer ciclo va hacia adelante, el segundo hacia atrás. El tren va y vuelve por la misma vía. Es el secreto detrás de animaciones de respiración, indicadores flotantes o elementos que pulsan.
• ✦ alternate-reverse: Exactamente igual que alternate, pero comenzando el primer viaje hacia atrás.

¿Por qué no simplemente animar el regreso a mano?

Claro, podrías definir 0% izquierda, 50% derecha, 100% izquierda. Pero alternate te ahorra escribir ese paso extra. Mantiene tus keyframes limpios y enfoca tu código solo en los dos estados extremos, dejando que el navegador haga el cálculo matemático del regreso, incluyendo la inversión de los easings.