prefers-reduced-motion: patrones de CSS, JavaScript y React | We.Inc
Detecta el ajuste de reducir movimiento en CSS y JavaScript, mira tu propio ajuste en vivo y copia patrones que cambian los movimientos grandes por fundidos en lugar de eliminar la animación.
Cómo respetar prefers-reduced-motion
prefers-reduced-motion es una característica de media query de CSS que indica si un visitante ha pedido a su dispositivo menos movimiento. Tiene dos valores, no-preference y reduce. Envuelve los movimientos grandes, como el parallax, los zooms y los deslizamientos, en una consulta y, cuando el valor sea reduce, cámbialos por un fundido corto o por ninguna animación.
about:config, establece ui.prefersReducedMotion en 1
Las personas activan la reducción de movimiento porque los deslizamientos, los zooms y el parallax pueden provocar mareos, náuseas o dolores de cabeza, sobre todo a quienes tienen trastornos vestibulares. La insignia de abajo lee en vivo el ajuste de tu propio dispositivo, y la demo muestra la misma animación en versión completa y reducida, para que puedas comparar antes de elegir un patrón.
Mira la insignia: muestra lo que tu dispositivo indica ahora mismo y se actualiza si cambias el ajuste.
Usa el interruptor de vista previa para ver la versión reducida de la demo sin cambiar el ajuste de tu sistema.
Copia el patrón de CSS, JavaScript o React que encaje con cómo anima tu sitio.
Reduce, no elimines. Un fundido rápido de opacidad sigue mostrando que algo cambió sin desplazarse por la pantalla.
Escribe el movimiento como una mejora: pon las animaciones dentro de @media (prefers-reduced-motion: no-preference) para que la versión segura sea la predeterminada.
Los vídeos y carruseles con reproducción automática también necesitan un control de pausa, diga lo que diga el ajuste de movimiento.
En Chrome DevTools puedes emular el ajuste desde el panel Rendering para probar sin cambiar tu sistema.
Los efectos activados por el scroll también cuentan. El parallax grande y el scroll-jacking son las quejas más comunes.
Preguntas frecuentes
¿Qué valores tiene prefers-reduced-motion?
Dos: no-preference, cuando el visitante no ha configurado nada, y reduce, cuando ha pedido menos movimiento. Escribir @media (prefers-reduced-motion) sin más equivale a preguntar por reduce.
¿Cómo compruebo prefers-reduced-motion en JavaScript?
Ejecuta window.matchMedia("(prefers-reduced-motion: reduce)") y lee su propiedad matches. Añade un listener del evento change al objeto devuelto para reaccionar cuando el ajuste cambie con la página abierta.
¿Debo desactivar todas las animaciones cuando el valor es reduce?
No. La petición es de menos movimiento, no de una página congelada. Mantén los cambios de color, los fundidos cortos y los indicadores de progreso, y elimina o reduce movimientos como deslizar, escalar, girar y el parallax.
¿Exige WCAG respetar la reducción de movimiento?
WCAG 2.3.3 Animación desde interacciones, nivel AAA, pide que el movimiento provocado por la interacción se pueda desactivar salvo que sea esencial. Respetar el ajuste del sistema es una de las formas indicadas para cumplirlo. Por separado, 2.2.2 Poner en pausa, detener, ocultar, en el nivel A, cubre el movimiento que empieza por sí solo.
¿Cómo gestiono la reducción de movimiento en Tailwind?
Usa la variante motion-safe: para aplicar una animación solo cuando no hay preferencia configurada, o motion-reduce: para anularla cuando el valor es reduce, por ejemplo motion-safe:animate-bounce.
Qué movimiento causa problemas
El problema es el movimiento que ocupa gran parte de la vista o que se mueve en una dirección que el visitante no provocó: fondos con parallax, zooms de página completa, cambios de página deslizantes, elementos que giran y contenido que salta al hacer scroll.
La respuesta pequeña, rápida e iniciada por el usuario, como el cambio de color de un botón o la marca de una casilla, rara vez es un problema y normalmente puede quedarse.
CSS sin movimiento por defecto
Muchos sitios añaden al final una consulta reduce que pone todas las duraciones casi a cero. Funciona, pero es fácil olvidar alguna animación, y algunos scripts escuchan eventos animationend que entonces se disparan al instante.
Escribir el movimiento dentro de una consulta no-preference invierte el comportamiento por defecto. Quien tenga un navegador que no indique preferencia sigue viendo movimiento, y todo lo que olvides cae en la versión tranquila.
Scripts y bibliotecas
Las consultas de CSS no alcanzan las animaciones iniciadas desde JavaScript, canvas o las llamadas de scroll suave. Comprueba la media query antes de llamar a element.animate() o a scrollIntoView con behavior: smooth.
Lee el ajuste una vez al inicio y suscríbete a su evento change, para que se respete a quien lo cambie a mitad de la visita sin recargar.
Patrones de CSS
El movimiento como mejora
La tarjeta entra deslizándose solo cuando no hay preferencia configurada. Todos los demás ven un fundido suave.
Una red de seguridad para sitios existentes
Útil cuando no puedes reescribir todas las animaciones. Las duraciones pasan a ser casi cero en lugar de none, así que los eventos animationend y transitionend siguen disparándose.
JavaScript y React
Leer el ajuste y seguir sus cambios
matchMedia devuelve una lista viva. Su evento change se dispara cuando el visitante cambia el ajuste.
Hook de React: usePrefersReducedMotion
Empieza en true en el servidor para que nada se anime antes de que el navegador responda.
Con qué sustituir cada efecto
Alternativas reducidas
Movimiento completo
Versión reducida
Fondo con parallax
Fondo estático
Cambio de página con deslizamiento o zoom
Fundido cruzado, o un cambio instantáneo
Elemento que entra volando al hacer scroll
Fundido corto en su sitio
Indicador de carga que gira
Opacidad pulsante o una barra de progreso
Scroll suave hasta un ancla
Salto instantáneo
Vídeo de fondo con reproducción automática
Imagen de portada con un botón de reproducir
Tu ajuste de movimiento
La insignia lee el ajuste de tu dispositivo con matchMedia, y el interruptor de vista previa muestra la animación reducida sin cambiar tu sistema.
Modo de vista previa
Seguir mi ajuste
Ver movimiento completo
Ver reducido
Repetir
Reducido: un fundido corto en su sitio.
Movimiento completo: el panel vuela, gira y crece.