Animation Duration
El tiempo que separa una animación fluida de una que parece un error
Una animación demasiado rápida apenas se percibe. Una demasiado lenta hace que la interfaz se sienta lerda y el usuario comience a dudar si hizo clic o no. Encontrar el tiempo correcto no es una decisión aleatoria —es una decisión de diseño que impacta directamente cómo el usuario percibe la velocidad y respuesta de tu aplicación.
animation-duration es la propiedad que defines la duración total de un ciclo completo de la animación: desde el primer fotograma (0%) hasta el último (100%). Su valor por defecto es 0s, lo que significa que si olvidas declararlo, la animación existe en tu código pero nunca ocurre en pantalla. Sin unidad de tiempo, no hay movimiento.
Segundos vs Milisegundos: ¿cuándo usar cada uno?
CSS acepta los tiempos en dos formatos:
- Segundos (s):
1s,2.5s,0.3s. El más intuitivo para duraciones largas. - Milisegundos (ms):
300ms,500ms,1200ms. Útiles cuando trabajas con valores pequeños y quieres evitar decimales. Recuerda:1s = 1000ms.
Ambos son equivalentes. 0.3s y 300ms producen exactamente el mismo resultado. Usa el que haga tu código más legible en cada contexto.
La guía de tiempos del mundo real
Los diseñadores de interfaces llevan años refinando estos rangos. No son arbitrarios: responden a cómo el cerebro humano procesa y anticipa el movimiento:
- ✦ 100ms–200ms (Instante): El umbral en el que el usuario percibe una respuesta como inmediata. Perfecto para botones, toggles y micro-interacciones. Más rápido se convierte en parpadeo; más lento, en retraso.
- ✦ 200ms–350ms (Fluido): El estándar de oro para menús desplegables, modales y transiciones de estado. Se siente rápido pero el ojo tiene tiempo de registrar el movimiento.
- ✦ 350ms–600ms (Pausado): Para elementos que recorren una distancia grande en pantalla, como drawers laterales o paneles completos. El cerebro necesita ese tiempo para seguir el movimiento.
- ✦ +1000ms (Cinemático): Solo para ilustraciones, fondos animados, loaders o elementos narrativos. En la UI interactiva del día a día, se sentirá pesado e impaciente.
La percepción visual y por qué importa
El ojo humano está diseñado para detectar movimiento, pero procesarlo requiere tiempo. Las animaciones por debajo de 80ms apenas se registran conscientemente —el usuario las percibe como un "parpadeo" o un cambio abrupto, no como un movimiento. Las que superan los 700ms en acciones cotidianas generan impaciencia: el usuario ya no está disfrutando el movimiento, está esperando que termine.
Consejo profesional
Como regla de diseño general, los elementos que entran a la pantalla deben durar ligeramente más (ej. 250ms) que los elementos que salen (ej. 200ms), ya que la salida requiere menos atención.
Comparativa visual de velocidades
<div class="speed-tester">
<div class="test-row">
<span class="label">200ms (Micro-interacción)</span>
<div class="track"><div class="dot speed-fast"></div></div>
</div>
<div class="test-row">
<span class="label">500ms (Estándar Web)</span>
<div class="track"><div class="dot speed-medium"></div></div>
</div>
<div class="test-row">
<span class="label">1000ms (1s - Transición Lenta)</span>
<div class="track"><div class="dot speed-slow"></div></div>
</div>
<div class="test-row">
<span class="label">3000ms (3s - Cinemática/Lenta)</span>
<div class="track"><div class="dot speed-superslow"></div></div>
</div>
</div>Compara visualmente cómo se desplazan los elementos en función de su duración.
Errores comunes
Practica lo aprendido
Experimenta modificando los valores del código para comparar cómo cambia la inmediatez y fluidez de los elementos.