Curvas de easing: la física del movimiento

Dos transiciones con la misma duración pueden sentirse una "premium" y la otra "robótica" — la diferencia está en la curva. El easing es cómo se reparte la velocidad durante el viaje, y es el conocimiento que separa a quien copia transiciones de quien las diseña.

Nada en el mundo físico se mueve "linear"

Las curvas y su trabajo

<div class="pista" id="pista">
<div class="corredor" style="--curva: linear;"><span>linear</span></div>
<div class="corredor" style="--curva: ease-out;"><span>ease-out</span></div>
<div class="corredor" style="--curva: ease-in;"><span>ease-in</span></div>
<div class="corredor" style="--curva: ease-in-out;"><span>ease-in-out</span></div>
<div class="corredor" style="--curva: cubic-bezier(0.34, 1.56, 0.64, 1);"><span>overshoot</span></div>
</div>
<p class="nota">Pasa el cursor sobre la pista: cinco corredores, misma distancia, misma duración (900ms exagerados para estudiarlos) — solo cambia la curva. El último se pasa de la meta y regresa.</p>

body { font-family: system-ui; padding: 24px; background: #f8fafc; }
.pista { display: grid; gap: 12px; padding: 16px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; }
.corredor { width: 52px; height: 34px; display: grid; place-items: center; background: #6d28d9; color: white; border-radius: 8px; transition: transform 900ms var(--curva); }
.corredor span { font-size: 10px; font-weight: 600; }
.pista:hover .corredor { transform: translateX(min(52vw, 300px)); }
@media (prefers-reduced-motion: reduce) { .corredor { transition: none; } }
.nota { font-size: 13px; color: #64748b; margin-top: 14px; max-width: 54ch; }

La regla profesional, la que usan Material Design, Apple y el design system de esta plataforma:

• ease-out para ENTRAR: lo que aparece (menú, tooltip, tarjeta que sube) llega rápido y aterriza suave. El usuario ve la respuesta inmediata y el final elegante.
• ease-in para SALIR: lo que desaparece arranca suave y se va acelerando — como despedirse alejándose. En la práctica se usa menos: muchas salidas funcionan mejor rápidas y con ease-out también.
• ease-in-out para lo que va y vuelve dentro de la pantalla: un panel que se desliza de un lado a otro.
• linear casi nunca en movimiento... pero es LA curva para cambios de opacity y color (los fundidos no "frenan") y para rotaciones infinitas como spinners (módulo 11).

Ojo con el ease por defecto: si no declaras curva, el navegador usa ease (una ease-in-out asimétrica). Es aceptable, pero elegir a conciencia siempre gana — di lo que quieres decir.

cubic-bezier(): tu curva, tus reglas

Las palabras clave son atajos de una función matemática que puedes escribir a mano:

Los cuatro números definen dos puntos de control de la curva tiempo-progreso. No necesitas la matemática: necesitas saber LEERLA — un segundo valor mayor que 1 significa "se pasa de la meta y vuelve" (overshoot, el quinto corredor de la pista) — y una herramienta para diseñarla: cubic-bezier.com o el editor de curvas de DevTools (clic en el icono de curva junto a la transition, en Estilos). Ahí ajustas visualmente y copias el resultado.

linear(): springs sin JavaScript

cubic-bezier() tiene un límite físico: solo puede cruzar la meta UNA vez. Un resorte real rebota varias veces — y para eso llegó linear(), que define la curva por puntos, como conectar los vértices de una gráfica:

Cada par es "progreso" y "momento del tiempo": en el 60% del viaje la tarjeta va en el 115% del recorrido (se pasó), al 80% retrocedió al 97%, y termina en 1. Las curvas de spring de producción se generan con herramientas (busca "linear() easing generator") y traen decenas de puntos; tú necesitas entender el mecanismo, no calcularlos. Nota honesta: linear() es de 2023 y ya está en todos los navegadores modernos, pero si un navegador viejo no la entiende, ignora la transition completa — para efectos decorativos es un intercambio aceptable; para movimiento crítico, usa cubic-bezier.

Mini-reto

Vuelve a las transiciones que le pusiste a "El Observador" y ponles apellido: tarjetas y menú con ease-out explícito, y al botón de "Suscríbete" el overshoot cubic-bezier(0.34, 1.56, 0.64, 1) en su scale de hover. Luego abre DevTools, encuentra el editor de curvas y deforma la del botón en vivo hasta encontrar UNA que te guste más que la mía.

Qué sigue

Dominas el plano. Ahora se le suma profundidad: perspective, rotaciones en X y Y, y el arte de mantener un "atrás" real con preserve-3d — todo lo necesario para el reto estrella del módulo: la tarjeta que se voltea.