Transiciones CSS

La sombra de caja te dio profundidad calmada. Las transiciones dan un cambio calmado en el tiempo: un botón suaviza el fondo al pasar el ratón, una tarjeta se eleva un poco al recibir foco, el color de un enlace se desliza en lugar de saltar. Sigues escribiendo dos estados — el navegador interpola entre ellos durante el tiempo que indiques.

Qué es una transición

Una transición no inventa un aspecto nuevo por sí sola. Observa una propiedad que ya cambia (a menudo con :hover, :focus-visible o una clase) y anima ese cambio. Sin transición el salto es instantáneo; con una obtienes un deslizamiento corto y legible.

Las cuatro longhands son transition-property, transition-duration, transition-timing-function y transition-delay. En el día a día suele bastar el atajo transition.

Propiedad y duración

Nombra qué puede animarse y cuánto debe durar el cambio. Las duraciones son tiempos (0.2s, 200ms). Corto y con propósito gana a las esperas teatrales — la respuesta de la UI suele vivir alrededor de 150ms–300ms.

Pon la transición en la regla base para que entren y salgan del hover con animación. Lista solo las propiedades que quieres — si no, saltos accidentales de layout se deslizan medio segundo.

Timing y delay

transition-timing-function forma la curva de velocidad: ease (sensación por defecto), linear, ease-in, ease-out, ease-in-out o un cubic-bezier(...) propio. transition-delay espera antes de empezar — útil en menús escalonados, fácil de abusar en un solo botón.

Ease-out suele sentirse natural al aparecer UI. Linear encaja con progreso que debe leerse constante. Reserva el delay para secuencias intencionadas — no para que cada clic se sienta tarde.

Atajo y movimiento multipropiedad

El orden típico del atajo es: propiedad, duración, timing-function, delay. Puedes listar varias transiciones separadas por comas. Prefiere propiedades amigables con el pintado — transform y opacity suelen ser más suaves que animar width, height, top o margin.

Aquí la profundidad de la lección anterior se encuentra con el movimiento: sombra y elevación comparten un momento de hover. Mantén el recorrido pequeño para que la página siga sintiéndose sólida.

Reduced motion y cuándo usar animaciones

Algunas personas prefieren menos movimiento. Respeta prefers-reduced-motion: reduce acortando o desactivando transiciones no esenciales. Las transiciones brillan en cambios de estado A → B. Bucles o historias de varios pasos pertenecen a animaciones CSS (@keyframes) más adelante — después de Transforms.

Pruébalo tú

1. Añade una transición de fondo de 0.2s a un botón y haz hover — luego mueve transition de :hover a la regla base y compara al salir del hover.
2. Anima opacity con ease-out al conmutar una clase de panel; prueba linear y nota la sensación.
3. Combina transform: translateY(...) con un box-shadow más suave en el hover de una tarjeta (dos propiedades, una lista de atajo).
4. En DevTools, emula prefers-reduced-motion: reduce y confirma que el movimiento no esencial se retira.
5. En este ejercicio evita animar height para un menú abierto — deja ese patrón para después.

Errores frecuentes

• Escribir transition: all 1s para que toda propiedad, incluido el layout, se deslice un segundo entero
• Duraciones de varios segundos que hacen la UI lenta
• Animar width / top / margin cuando bastan transform u opacity
• Ignorar prefers-reduced-motion
• Esperar que una transición haga bucle eterno — eso es territorio de animación

Resumen

• Las transiciones suavizan cambios de propiedad entre estados durante una duración
• Controla propiedad, duración, timing-function y delay (o usa el atajo transition)
• Prefiere movimiento corto en propiedades amigables con el pintado; pon la transición en la regla base
• Honra reduced-motion; usa animaciones keyframe para bucles y secuencias complejas
• Siguiente en Effects & Motion: Transforms