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.