Timing, Easing y Curvas de Movimiento

El Arte del Timing y las Curvas de Movimiento

El timing (duración) y el easing (aceleración) son los dos parámetros más importantes de cualquier animación. Un movimiento de 200ms con ease-out se siente natural; el mismo movimiento de 1000ms con linear se siente robótico y lento. Dominar estos conceptos es dominar el motion design.

Duraciones recomendadas para UI

• Micro-interacciones (hover, focus, toggle): 100-200ms — debe sentirse instantáneo


• Transiciones de elementos (cards, modales, menús): 200-400ms — suficiente para percibir el movimiento


• Transiciones de página: 300-500ms — el cambio debe ser suave pero no lento


• Animaciones decorativas (loading, illustrations): 500ms-2s — pueden ser más expresivas


• Regla: si dudas, elige más rápido — una animación rápida se siente ágil, una lenta se siente pesada

Tipos de easing y cuándo usar cada uno

• linear: velocidad constante — se siente mecánico y artificial, casi nunca usar en UI


• ease-out (decelerar): empieza rápido y frena suavemente — ideal para elementos que ENTRAN a la pantalla


• ease-in (acelerar): empieza lento y acelera — ideal para elementos que SALEN de la pantalla


• ease-in-out: acelera y luego decelera — ideal para movimientos dentro de la pantalla (de A a B)


• cubic-bezier personalizado: para movimientos con personalidad — usa cubic-bezier.com para crear curvas custom

Curvas de movimiento avanzadas

• Spring (resorte): movimiento que rebota antes de estabilizarse — se siente orgánico y playful (Framer Motion lo tiene nativo)


• Bounce: rebote al final del movimiento — úsalo con moderación, puede ser molesto si se abusa


• Stagger: elementos múltiples que aparecen en secuencia con un delay entre cada uno — ideal para listas y grids


• Material Design recomienda: 'Standard easing' cubic-bezier(0.2, 0, 0, 1) para la mayoría de transiciones


• Apple recomienda: curvas más rápidas al inicio con desaceleración suave — su UI se siente 'snappy'

Ejemplo práctico

/* Transiciones CSS con easing */

.button {

  transition: transform 150ms ease-out, 

              background-color 200ms ease;

}

.button:hover {

  transform: scale(1.02);

}

.button:active {

  transform: scale(0.98);

  transition-duration: 50ms; /* Respuesta inmediata al click */

}



/* Modal que entra desde abajo */

.modal {

  transform: translateY(100%);

  transition: transform 350ms cubic-bezier(0.2, 0, 0, 1);

}

.modal.open {

  transform: translateY(0);

}



/* Respetar preferencias del usuario */

@media (prefers-reduced-motion: reduce) {

  * {

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

  }

}

Consejo: Siempre incluye @media (prefers-reduced-motion: reduce) en tu CSS para respetar a usuarios que prefieren menos movimiento. Es una buena práctica y mejora la accesibilidad.