transition: animar cambios de estado

El problema: los cambios son bruscos

Cuando una propiedad cambia (por ejemplo, al pasar el ratón con :hover), por defecto el cambio es instantáneo: el color salta de golpe, sin avisar. transition hace que ese cambio ocurra de forma gradual y suave, y la diferencia entre un "clac" y un fundido elegante es enorme.

.boton {
  background: #2563eb;
  transition: background 0.3s ease;
}
.boton:hover {
  background: #1e40af;   /* el cambio se anima en 0.3s */
}

Anatomía de transition

La forma corta acepta varios valores en este orden:

transition: propiedad duración función-de-tiempo retardo;
/* ejemplo: */
transition: transform 0.4s ease-in-out 0s;

• propiedad: qué animar (background, transform, opacity...) o all.
• duración: cuánto dura (0.3s, 200ms...). Obligatoria para que se vea.
• función de tiempo (easing): el ritmo. ease, linear, ease-in, ease-out, ease-in-out, o cubic-bezier(...).
• retardo: cuánto espera antes de empezar (opcional).

Buen uso con :hover

La regla práctica: pon la transition en el estado base (no en el :hover), así se anima tanto al entrar como al salir.

.tarjeta {
  transition: transform 0.2s ease-out;
}
.tarjeta:hover {
  transform: scale(1.05);   /* crece suavemente al pasar el ratón */
}

⚠️ TRAMPA CLÁSICA: animar propiedades caras como width, height o top obliga al navegador a recalcular el layout en cada fotograma y el efecto se vuelve a tirones. Anima transform y opacity siempre que puedas: son baratas y van suaves como la mantequilla.

Ejemplos

Una transición típica como cadena de texto

const transicion = "transform 0.2s ease-out";
console.log(transicion);