transition: del salto brusco al movimiento con intención

Llevas nueve módulos usando :hover y todos tus efectos cambian de golpe: un fotograma el botón es violeta, al siguiente es morado oscuro. Hoy aprendes la propiedad que rellena el espacio entre esos dos fotogramas — y la regla de duración que usan los design systems serios (incluido el de esta plataforma que estás mirando).

El amortiguador entre dos estados

Las cuatro piezas

1. property: QUÉ propiedad animar. Nómbrala siempre — existe transition: all, y es una trampa: anima cualquier cosa que cambie, incluidas propiedades que no pediste (y que el navegador paga caras, como verás en el módulo 11). Explícito gana.
2. duration: cuánto dura. En ms (o s); sin duración no hay transición.
3. timing-function: la forma del frenado — tan importante que tiene su propia lección, la siguiente.
4. delay: espera antes de arrancar. Útil en cadenas (módulo 11) y en menús que no deben abrirse por un roce accidental del cursor.

La regla 150-300ms

La duración correcta casi nunca se siente: se nota cuando falta (brusco) o cuando sobra (la interfaz "nada en miel"). El rango profesional para microinteracciones — hovers, botones, foco — es 150 a 300ms:

• Menos de ~100ms el ojo no registra el movimiento: pagaste transición para nada.
• Más de ~400ms en un hover, el usuario ESPERA a la interfaz. Una espera de 350ms por botón, mil veces al día, es fricción real.
• Elementos grandes (un panel lateral, un modal) toleran 300-400ms porque recorren más distancia visual. Un botón, jamás.

El design system de CodeForge usa 150-250ms en toda la plataforma — ahora sabes por qué cada hover de este sitio se siente "quieto pero vivo".

Dónde se declara: la trampa número 1

<div class="fila">
<button class="bien">transition en base</button>
<button class="mal">transition en :hover</button>
</div>
<p class="nota">Entra Y SAL de cada botón. El primero anima en ambos sentidos; el segundo anima al entrar... y se estrella al salir.</p>

body { font-family: system-ui; padding: 28px; background: #f8fafc; display: grid; gap: 8px; }
.fila { display: flex; gap: 16px; flex-wrap: wrap; }
button { border: 0; padding: 14px 22px; border-radius: 10px; background: #6d28d9; color: white; font-size: 14px; font-weight: 600; cursor: pointer; }
.bien { transition: transform 220ms ease-out; }
.bien:hover { transform: translateY(-6px); }
.mal:hover { transform: translateY(-6px); transition: transform 220ms ease-out; }
@media (prefers-reduced-motion: reduce) { .bien, .mal:hover { transition: none; } }
.nota { font-size: 13px; color: #64748b; max-width: 50ch; }

La regla: la transición vive en el estado BASE, no en :hover. Las declaraciones de :hover solo existen mientras el cursor está encima; si la transición vive ahí, al salir del hover desaparece con él — y el viaje de regreso queda sin amortiguador. Es el bug de transiciones más común del mundo y ahora lo detectas en un segundo.

El respeto es innegociable

Desde esta lección, TODO lo que se mueva en tus ejemplos y proyectos lleva su cláusula de empatía:

@media (prefers-reduced-motion: reduce) {
.tarjeta, .boton { transition: none; }
}

Hay personas para quienes el movimiento en pantalla produce mareo o náusea real (trastornos vestibulares), y lo declaran en su sistema operativo. Ignorarlo no es un descuido estético — es accesibilidad. El módulo 11 le dedica una lección entera a hacerlo bien y en grande; por ahora, la regla simple: si agregaste movimiento, agregaste su @media.

Mini-reto

Recorre "El Observador" y ponle amortiguador a TODO lo que ya tenía :hover: enlaces del menú, tarjetas de noticia, botones. Regla del ejercicio: cada transición con propiedad explícita (nada de all), entre 150 y 300ms, declarada en el estado base, y el @media de reduced-motion al final de la hoja. Tu periódico va a pasar de "página de práctica" a "producto" con diez líneas.

Qué sigue

Dejaste de golpear puertas. Pero ease-out no es la única forma de frenar: hay curvas para entrar, curvas para salir, curvas a medida con cubic-bezier() y hasta rebotes elásticos con linear(). La física del movimiento, próxima lección.