Shorthand Animation

Escribir menos para decir más

Hasta ahora, hemos visto ocho propiedades distintas para controlar una animación. Si tuvieras que escribir las ocho cada vez que animas un elemento, tu código CSS se inflaría rápidamente y su mantenimiento sería un dolor de cabeza. El shorthand animation es tu atajo profesional: te permite condensar toda esa configuración en una sola línea elegante.

Esto no es solo una cuestión de estética. Cuando lees código de otros desarrolladores, el shorthand te permite entender la intención completa del movimiento de un solo vistazo, como leer una oración completa en lugar de deletrear letras sueltas.

La única regla estricta: los tiempos

El navegador es sorprendentemente inteligente interpretando el shorthand. Puedes poner linear antes o después de infinite, y lo entenderá igual. Pero tiene una limitación vital: no puede distinguir entre duración y delay si solo ve números.

Por convención y obligación matemática, el primer valor de tiempo que el navegador encuentra siempre es la duración (duration). El segundo valor de tiempo siempre será el retraso (delay).

La estructura mental profesional

Aunque el orden (excepto los tiempos) es flexible, los profesionales usan una estructura mental predecible. Piensa en responder estas preguntas: ¿Qué? ¿Cuánto dura? ¿Cómo acelera? ¿Espera? ¿Cuántas veces? ¿Cómo va y viene? ¿Qué pasa al final?

animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode];

Lectura y traducción de código real

Lee la siguiente línea de código profesional en voz alta:

animation: slideGlow 2s ease-in-out 0.5s infinite alternate both;

La traducción mental automática del navegador es: "Ejecuta slideGlow en 2 segundos, con aceleración suave en los extremos, esperando medio segundo antes de empezar. Repítelo infinitamente, yendo y viniendo, y mantén los estilos antes de empezar y después de terminar".

Combinando múltiples secuencias

El verdadero poder del shorthand brilla cuando aplicas múltiples animaciones al mismo elemento separándolas por comas. Es la forma más limpia de componer movimientos complejos a partir de animaciones simples y reutilizables:

.button-fancy {
  animation: fadeIn 0.5s ease-out, bounceLight 2s infinite alternate;
}