Las cuatro sub-propiedades de transition

Ya sabés escribir :hover desde CAT-13. El problema es que el cambio es abrupto — el elemento salta de un estado al otro de golpe. transition es el mecanismo que suaviza ese salto.

La clave: la transición se declara en el estado normal, no en el :hover. Así aplica en ambas direcciones — al entrar al hover y al salir.

`transition-property`: qué se anima

transition-property especifica qué propiedad CSS va a transicionarse cuando su valor cambie.

.boton {
  /* Solo anima la opacidad */
  transition-property: opacity;
}

El valor especial all transiciona toda propiedad animable que cambie — conveniente, pero peligroso para el rendimiento porque puede activar transiciones no deseadas.

Importante: no toda propiedad CSS admite transición. Solo las que tienen valores interpolables como opacity, color, background-color, transform. La propiedad display no transiciona — el cambio de none a block es siempre instantáneo.

`transition-duration`: el tiempo

transition-duration define cuánto tarda la transición. Sin duración, no hay transición visible — el valor por defecto es 0s.

.boton {
  transition-property: opacity;
  transition-duration: 0.3s; /* 300 milisegundos */
}

CSS acepta segundos (s) y milisegundos (ms). 0.3s y 300ms son equivalentes. La unidad es obligatoria — escribir 0.3 sin s es inválido y la propiedad se ignora en silencio.

Para botones y elementos de UI, el rango natural es 0.15s–0.4s. Menos de 100ms es casi imperceptible; más de 500ms se siente lento.

`transition-timing-function`: la curva de velocidad

transition-timing-function controla cómo cambia la velocidad de la transición a lo largo del tiempo.

.boton {
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out; /* arranca y frena suave */
}

Valor	Comportamiento	Cuándo usarlo
`ease`	Arranca lento, acelera, frena suave (por defecto)	UI genérica
`linear`	Velocidad constante	Barras de progreso, spinners
`ease-in`	Arranca lento, termina rápido	Elementos que salen de pantalla
`ease-out`	Arranca rápido, termina lento	Elementos que entran a pantalla
`ease-in-out`	Arranca y termina lento	Hover — suaviza los dos extremos

Todos estos keywords son atajos de funciones cubic-bezier() — no es necesario conocer la función para usarlos.

`transition-delay`: la espera

transition-delay define cuánto tiempo espera el navegador antes de iniciar la transición después de que se activa el cambio.

.boton {
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.1s; /* espera 100ms antes de arrancar */
}

El valor por defecto es 0s — sin espera. Un delay de 0.1s puede mejorar la experiencia en elementos pequeños para evitar que la transición se dispare por pasar el mouse de refilón.

Las cuatro van en el estado normal

/* ✅ Las cuatro sub-propiedades en el selector normal */
.boton {
  background-color: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  /* ... */
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.1s;
}

.boton:hover {
  opacity: 0.7; /* el cambio que se suaviza */
}

Nota sobre el motor: el validador lee los valores computados en el estado de reposo con getComputedStyle. El efecto visual de la transición (la suavidad al pasar el mouse) solo se puede comprobar en el preview — el motor no dispara eventos de hover.

Tu turno: agregá las cuatro sub-propiedades a .boton con los valores exactos indicados. Luego pasá el mouse en el preview para ver el botón atenuándose suavemente.