Animation Delay
¿Qué es animation-delay?
La propiedad animation-delay determina el tiempo de espera entre el momento en que se aplica la animación a un elemento y el momento en que realmente comienza a reproducirse su primer fotograma.
Delay Positivo (Espera activa)
Si definimos un delay positivo, como animation-delay: 1s, el elemento esperará exactamente un segundo antes de iniciar el movimiento. Durante esta espera, los estilos iniciales que adopta el elemento dependen de la propiedad animation-fill-mode (que estudiaremos en detalle más adelante).
Delay Negativo (El gran truco)
¿Qué pasa si asignamos un valor negativo como animation-delay: -1s? ¡El navegador inicia la animación **instantáneamente**! Sin embargo, en lugar de comenzar desde el segundo 0 (0%), comenzará a reproducirse como si ya llevara un segundo en curso.
Esto es sumamente útil si quieres desfasar múltiples animaciones cíclicas (como ondas o loaders) de manera que todas estén en movimiento al cargar la página, en lugar de esperar a que pasen sus respectivos delays.
Secuencias de animación (Stagger)
El "staggering" o escalonamiento es una técnica UX premium. Consiste en animar la entrada de un grupo de elementos (como tarjetas de una lista o menús de navegación) aplicando un delay progresivo a cada elemento sucesivo (ej. el primero tiene delay 0s, el segundo 0.1s, el tercero 0.2s). Esto crea una fluidez visual exquisita que guía al ojo del usuario a través de la interfaz.
Consejo profesional
Usa delays negativos para loops infinitos que deban mostrarse desfasados desde el primer instante. Evita usar delays positivos largos (más de 1s) en elementos interactivos inmediatos para que la UI no se sienta lenta.
Ejemplo práctico
<div class="delay-container">
<div class="stagger-group">
<span class="label">Efecto Secuencia (Staggered)</span>
<div class="circles-row">
<div class="circle delay-0"></div>
<div class="circle delay-1"></div>
<div class="circle delay-2"></div>
</div>
</div>
<div class="stagger-group">
<span class="label">Delay Negativo vs Positivo</span>
<div class="tracks-column">
<div class="track-row">
<span class="track-label">Delay +1s (Espera)</span>
<div class="track"><div class="dot pos-delay"></div></div>
</div>
<div class="track-row">
<span class="track-label">Delay -1s (Inicia al 50%)</span>
<div class="track"><div class="dot neg-delay"></div></div>
</div>
</div>
</div>
</div>El grupo superior muestra una secuencia de pulsos desfasados. Abajo, el punto rojo espera 1s antes de arrancar, mientras que el verde arranca de inmediato a mitad de pista gracias a su delay negativo de -1s.
Errores comunes
Practica lo aprendido
Experimenta modificando los delays en los tres círculos superiores para alterar el ritmo de la secuencia.