Marc Semper Lloret
← CSS: diseño, maquetación y responsive

Sesión 15 · Semana 5

Transiciones y transformaciones

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se anima un cambio de estado, qué propiedades conviene animar y cómo respetar a quien prefiere no ver movimiento.
  2. 2. Haz: Añade transiciones con una finalidad y quita las que no la tengan.
  3. 3. Comprueba: Cada movimiento de tu página comunica algo.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué estados de un enlace debe distinguir una interfaz?
  2. ¿Por qué no se debe eliminar outline sin ofrecer una alternativa?
  3. Usa Tab: predice qué debería cambiar visualmente antes de probarlo.

Transiciones

Una transición suaviza el paso de un estado a otro. Se declara en el estado normal, no en el :hover, para que funcione en los dos sentidos:

.card {
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
}
transform    qué propiedad se anima
150ms        cuánto dura
ease         cómo acelera

No animes all

transition: all 300ms parece cómodo y anima también cosas que no querías, incluidas propiedades que obligan al navegador a recalcular el layout entero. El resultado es una interfaz que va a tirones sin que se sepa por qué.

Nombra las propiedades. Si puedes elegir, anima transform y opacity: son las dos que el navegador resuelve sin rehacer el layout, y por eso van suaves.

Transformaciones

transform: translateY(-2px);
transform: scale(1.03);
transform: rotate(2deg);
transform: translateY(-2px) scale(1.02);   /* se combinan en una sola declaración */

Una transformación no afecta al espacio que ocupa el elemento: se dibuja movido, pero su hueco sigue donde estaba y nada se descoloca alrededor. Por eso mover una tarjeta con transform es seguro y hacerlo con margin-top no.

El movimiento tiene que decir algo

Una interfaz no mejora por tener zooms, rebotes, sombras y degradados. Cada efecto debería responder a una pregunta: ¿qué le está comunicando esto a quien lo ve?

Movimiento Comunica ¿Vale la pena?
Un botón que se aclara al pasar por encima «Esto se puede pulsar» Sí
Una tarjeta que se eleva ligeramente «Esto es interactivo» Sí
Un campo que se marca al recibir el foco «Estás escribiendo aquí» Sí
Un titular que entra rebotando al cargar Nada No

Respetar la preferencia del usuario

Hay quien configura su sistema para reducir las animaciones, y no por gusto: el movimiento puede provocar mareo o desorientación. El sistema operativo lo comunica, y CSS puede leerlo:

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

Es uno de los poquísimos sitios donde !important está justificado: es una preferencia de la persona, y debe ganar a cualquier estilo del sitio.

prefers-reduced-motion

Una media query que no pregunta por el tamaño de la pantalla sino por una preferencia declarada por quien usa el dispositivo. Existen más de esta familia, como prefers-color-scheme.

Tarea 15 · Menos es más

  1. Añade una transición a tus botones y otra a tus tarjetas o enlaces.
  2. Asegúrate de que los estados de :hover y :focus-visible son claros y distintos entre sí.
  3. Añade el bloque de prefers-reduced-motion.
  4. Después, la parte determinante: recorre tu sitio y elimina cualquier efecto que no comunique nada. Por cada uno que dejes, escribe en un comentario qué informa.

Es la única tarea de la unidad en la que se puntúa quitar cosas.

Objetivo mínimoEstados claros, dos transiciones justificadas y movimiento reducido.
Si lo tienesPrueba teclado y ratón y elimina cualquier estado que dependa solo del color.
RetoAudita los movimientos de una interfaz ajena y conserva únicamente los que comunican.

Checkpoint · fin de la sesión 15 y de la semana 5

  • Todas tus imágenes tienen max-width: 100% y no se deforman.
  • El foco es visible en todos los elementos interactivos.
  • Los enlaces del texto se distinguen sin depender solo del color.
  • Tus transiciones nombran propiedades concretas, no all.
  • Respetas prefers-reduced-motion.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿En qué estado se declara la transition, y por qué?
  2. ¿Por qué mover algo con transform es más seguro que con margin?
  3. ¿Qué pregunta prefers-reduced-motion?
Ver respuestas

1 · En el estado normal, para que la animación ocurra tanto al entrar como al salir del estado.

2 · Porque transform no cambia el espacio que ocupa el elemento, así que nada se descoloca a su alrededor.

3 · Si la persona ha pedido en su sistema que se reduzcan las animaciones.

Microprueba semanal 5 · 5–10 minutos

Individual, sin IA y sin apuntes.

  1. Explica cómo evitar que una imagen se deforme dentro de una tarjeta.
  2. Escribe un foco visible que no dependa solo del color.
  3. Añade una transición breve y explica cómo respetarías prefers-reduced-motion.