Transitions ejercicio

El shorthand transition y buenas prácticas

En la lección anterior usaste las cuatro sub-propiedades por separado. El shorthand transition las combina en un solo valor — más compacto, más fácil de leer cuando el equipo ya conoce el orden.

El shorthand: orden de los valores

.boton {
  /* property   duration  timing-function  delay */
  transition:  opacity    0.3s     ease-in-out     0s;
}

El orden estándar es: propiedad → duración → timing-function → delay. Si se omite el delay, se asume 0s. Si se omite el timing-function, se asume ease.

Forma mínima — la más común en la práctica:

.boton {
  transition: opacity 0.3s ease-in-out;
  /* delay omitido → 0s por defecto */
}

Múltiples propiedades: se separan con coma, cada una con sus propios valores:

.tarjeta {
  transition:
    background-color 0.2s ease-in-out,
    transform 0.3s ease-out;
}

La cicatriz pedagógica: ¿dónde va la transition?

Este es el error más común:

/* ✅ CORRECTO: transition en el estado normal → aplica al entrar Y al salir del hover */
.boton {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.boton:hover { opacity: 0.7; }

/* ❌ ERROR: transition en :hover → solo anima al entrar; al salir el cambio es instantáneo */
.boton { opacity: 1; }
.boton:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out; /* ← no aplica al volver al estado normal */
}

La versión incorrecta “parece funcionar” al pasar el mouse — el hover se suaviza. Pero al sacar el mouse el elemento vuelve de golpe, sin transición. La transition en el estado normal garantiza que el navegador suavice el cambio en ambas direcciones.

¿Por qué no validar el shorthand directamente?

El motor lee el valor computado de transition con getComputedStyle — y ese valor es imprevisible: según el navegador, puede aparecer expandido con defaults añadidos o en un formato distinto al que escribiste. Lo que sí es estable es el valor computado de cada sub-propiedad (transition-property, transition-duration, etc.).

Por eso los checks de esta lección validan las sub-props que el shorthand establece, no el shorthand en sí. Es la misma verificación; solo que confiable.

Buenas prácticas: propiedades eficientes

No todas las propiedades tienen el mismo costo al animarse. El navegador tiene un pipeline de render con tres etapas: layout → paint → composite.

Propiedad animadaEtapa que disparaCosto
opacitySolo compositeBajo — sin layout ni repaint
transformSolo compositeBajo — sin layout ni repaint
color, background-colorRepaintMedio
width, height, top, leftLayout completoAlto — puede generar jank

Regla práctica: para transiciones de hover en UI, usá opacity y transform. Evitá transicionar width, height, margin o top/left — fuerzan al navegador a recalcular el layout completo en cada frame.

transform (que ya conocés de CAT-24) mueve y escala elementos sin sacarlos del flujo y sin triggear layout — es la propiedad ideal para efectos de hover de elevación, escala o desplazamiento.

Nota de accesibilidad: prefers-reduced-motion

Algunos usuarios configuran su sistema operativo para reducir el movimiento (por epilepsia fotosensible, mareos o preferencia personal). CSS permite respetar esa preferencia:

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

No es el foco de este módulo, pero es la práctica responsable cuando se usan transiciones en producción. Referencia: MDN — prefers-reduced-motion.

Nota sobre el motor: el validador lee las sub-propiedades de transition en el estado de reposo. El transform: translateY(-6px) del :hover y el efecto de elevación visual solo se pueden comprobar en el preview pasando el mouse sobre la tarjeta.

Tu turno: agregá transition: transform 0.25s ease-out a .tarjeta y transform: translateY(-6px) a .tarjeta:hover. Pasá el mouse en el preview para ver la tarjeta elevándose.

Cerrás el recorrido

Con esta lección completás 29/29 módulos del recorrido — los cuatro bloques:

  • Bloque I (HTML): semántica, estructura, formularios, tablas.
  • Bloque II (CSS Fundamentos): selectores, cascada, box model, display, unidades, colores, tipografía, overflow.
  • Bloque III (Layout moderno): flujo normal, positioning, Flexbox, Grid.
  • Bloque IV (Hábitos modernos): responsive, custom properties, transitions.

Lo que sigue — animaciones con @keyframes, JavaScript, frameworks CSS — es la continuación natural. Tenés la base para aprenderlo por tu cuenta.

Tarjeta con shorthand y buenas prácticas

Tenés una tarjeta (`.tarjeta`). Usando el shorthand `transition`, hacé que al hacer hover la tarjeta se eleve suavemente con `transform: translateY(-6px)`. Requisitos exactos: 1. Escribí `transition: transform 0.25s ease-out` en el estado normal de `.tarjeta`. _(El shorthand establece las sub-propiedades que los checks van a validar.)_ 2. En `.tarjeta:hover`, escribí `transform: translateY(-6px)`. _(El hover no lo valida el motor — lo observás en el preview pasando el mouse.)_ ¿Por qué `transform`? Animarla no dispara layout ni repaint — es la propiedad más eficiente para mover elementos en hover.

Preview

En la referencia