Maquetación Web Dinámica / Animaciones CSS: de sencillas a profesionales
prefers-reduced-motion: animar con empatía
Llevas dos módulos copiando un media query al final de cada ejemplo "porque el curso lo exige". Esta lección paga esa deuda: QUIÉN necesita menos movimiento y por qué, qué significa "reducir" de verdad (no es "congelar la página"), y la estrategia opt-in que usan los equipos serios para no depender de la memoria de nadie.
El porqué humano
El sistema vestibular — el acelerómetro del oído interno — le dice a tu cerebro cómo se mueve tu cuerpo. En millones de personas ese sistema funciona distinto (vértigo, migraña vestibular, secuelas de conmociones), y el conflicto entre "mis ojos ven movimiento" y "mi cuerpo está quieto" produce mareo, náusea y desorientación REALES — un parallax agresivo o una cascada de tarjetas puede costarle a alguien el resto de su tarde. Por eso los sistemas operativos ofrecen "reducir movimiento", y CSS te entrega esa preferencia en un media query. Ignorarla no es un estilo: es decidir que esas personas no pueden usar tu sitio.
Reducir no es congelar
El error común es tratar la preferencia como un interruptor de apagado total. La palabra es REDUCIR: quitar lo que marea, conservar lo que comunica. Criterio por tipo:
| Efecto | Con reduce... | Por qué |
|---|---|---|
| Parallax, zooms grandes, cascadas | Eliminar | Los grandes desplazamientos son los que marean |
| Transición de hover de 200ms | Puede quedarse o volverse instantánea | 6px de viaje no disparan el vestibular; el estado final comunica igual |
| Spinner de carga | Conservar (o versión estática digna) | Comunica "trabajando"; quitarlo sin reemplazo miente |
| Flip card, acordeón | El CAMBIO se conserva, el viaje se elimina | La función nunca se amputa — módulo 10 |
| Fundidos de opacidad puros | Generalmente aceptables | No hay desplazamiento; muchos equipos los conservan cortos |
La pregunta guía frente a cada animación: ¿esto COMUNICA algo (estado, ubicación, causa-efecto) o solo DECORA? Lo que comunica se traduce a una versión quieta; lo que decora se retira sin duelo.
La estructura pro: movimiento opt-in
Hasta ahora escribiste la animación y al final el parche que la apaga.
Funciona, pero depende de que NUNCA se te olvide (y con animation: none
tiene el riesgo que viste en el quiz de stagger: estados iniciales que
dejan contenido invisible). Los equipos serios invierten la carga — el
movimiento se declara DENTRO de la zona segura:
La diferencia es de arquitectura, no de sintaxis: con opt-in, olvidarte
del media query produce una página quieta pero perfecta — el error
seguro. Con opt-out (animar primero, apagar después), olvidarte produce
una página que marea a quien pidió que no. Los dos bloques pueden
convivir: no-preference para declarar el movimiento, reduce para los
pocos ajustes finos.
¿Y los dos módulos de ejemplos con opt-out que ya escribiste en este curso? Válidos — opt-out con disciplina es correcto y es lo que verás en la mayoría del código ajeno. Pero en TUS proyectos nuevos, de la landing del reto final en adelante: opt-in. El estándar sube contigo.
En tu app, con 'reducir movimiento' activado, el spinner de carga desaparece por completo (animation: none) y los usuarios reportan que 'la app se congela al guardar'. ¿Cuál era el diseño correcto?
El checklist del que anima con empatía
- Página quieta = página completa: sin ninguna animación, todo el contenido es visible y todo funciona (la vacuna contra el peor bug de accesibilidad del módulo: contenido invisible para siempre).
- Movimiento declarado en zona
no-preferenceen proyectos nuevos. - Lo que comunica, se traduce; lo que decora, se quita.
- Pruébalo de verdad: en Windows es Configuración → Accesibilidad → Efectos visuales → Efectos de animación (desactivar); en DevTools, Rendering → Emulate CSS media feature prefers-reduced-motion. Media hora navegando TU sitio con la preferencia activa te enseña más que esta lección.
Mini-reto
Audita "El Observador" con la emulación de DevTools activada: recorre cada animación que le has puesto en dos módulos (transiciones, pulso, cascada, barra de progreso, skeleton) y clasifícala — ¿comunica o decora? ¿su versión reducida es digna o quedó rota/mentirosa? Elige la peor y migra su bloque a la estructura opt-in. Una auditoría así, en un sitio real, es trabajo de consultoría que se cobra.
Qué sigue
Teoría del módulo completa: keyframes, panel de control, 60fps, cascadas, loading, scroll, view transitions y empatía. Quedan los dos exámenes prácticos, y el primero es el más ambicioso del curso hasta ahora: una escena animada en loop infinito — tipo GIF, pero en CSS puro — donde diriges a varios actores a la vez.