prefers-reduced-motion en CSS y JS
Detecte y respete la configuración de movimiento del usuario.
prefers-reduced-motion en CSS y JS es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Una configuración que puede leer
Los sistemas operativos permiten solicitar menos movimiento. La funcionalidad multimedia prefers-reduced-motion expone esa elección directamente a su sitio. 🎚️
Dónde se activa
Las personas activan reducir movimiento en la configuración del sistema operativo en macOS, iOS, Windows y Android. Su tarea es escuchar esa preferencia, no cuestionarla.
Dos valores
La funcionalidad indica uno de dos estados. Puede ser reduce, que significa reducir la intensidad de las animaciones, o no-preference para el resto de las personas.
Consúltelo en CSS
Incluya los estilos que reducen el movimiento en una consulta de medios. Cuando un usuario solicita reduce, puede reducir las transiciones casi por completo.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Reduzca, no elimine siempre
Reducir el movimiento no significa congelar la página. Sustituya un gran desplazamiento por un desvanecimiento sutil para que la interfaz siga transmitiendo dinamismo sin provocar movimientos bruscos.
Diseñe primero con movimiento
Desarrolle sus estilos animados normales y después añada la consulta para reducirlos. Este enfoque progresivo mantiene una experiencia predeterminada completa.
Léalo en JavaScript
Para las animaciones controladas mediante scripts, consulte directamente al navegador. matchMedia indica si el usuario prefiere reducir el movimiento en ese momento.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }Reaccione a los cambios en tiempo real
Las personas pueden cambiar la configuración durante la sesión. Escuche los cambios para que sus animaciones de JavaScript respeten la nueva preferencia sin recargar la página.
mq.addEventListener('change', e => updateMotion(e.matches));Abarque el comportamiento del desplazamiento
El desplazamiento suave también cuenta como movimiento. Dentro de la consulta, establezca scroll-behavior en auto para que los saltos sean instantáneos para quienes lo soliciten.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}Es una necesidad real
No se trata de un ajuste meramente opcional. Para algunas personas, el movimiento intenso provoca náuseas o mareos reales, por lo que es importante respetar la solicitud.
Desactivado de forma predeterminada es más seguro
Cuando tenga dudas, tome la opción más segura como predeterminada. Preferir un movimiento tranquilo no perjudica a nadie y mantiene la página cómoda para todas las personas.
Comprobación rápida
¿Cómo sabe un sitio web que un usuario quiere menos movimiento?
Recapitulación
Lea prefers-reduced-motion en CSS o mediante matchMedia y, después, reduzca la intensidad de las animaciones en lugar de eliminar la página. Respete también los cambios de configuración en tiempo real. ✅
Preguntas frecuentes
¿La lección «prefers-reduced-motion en CSS y JS» es gratis?
Sí — el texto completo de «prefers-reduced-motion en CSS y JS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «prefers-reduced-motion en CSS y JS»?
Detecte y respete la configuración de movimiento del usuario. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «prefers-reduced-motion en CSS y JS»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- prefers-reduced-motion en CSS y JS
- Trastornos vestibulares y riesgos del paralaje
- El umbral de tres destellos para las convulsiones
- Pausar, detener y ocultar contenido en movimiento automático