Respetar prefers-reduced-motion
Detecte la media query prefers-reduced-motion y desactive o reduzca las animaciones para quienes hayan solicitado menos movimiento.
Respetar prefers-reduced-motion es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
La función multimedia prefers-reduced-motion
Algunas personas experimentan náuseas, mareos o convulsiones debido al movimiento en las interfaces. Configuran su sistema operativo para reducir el movimiento. La función multimedia prefers-reduced-motion detecta esta preferencia para que CSS pueda responder.
Detectar el movimiento reducido en CSS
Envuelva las animaciones en una consulta para la preferencia contraria: aplique las animaciones normalmente y, después, sobrescríbalas o desactívelas para quienes prefieran menos movimiento.
/* Apply animation by default */
.spinner {
animation: spin 1s linear infinite;
}
/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}El principio «reducido, no inexistente»
prefers-reduced-motion: reduce no significa que deba eliminarse todo movimiento. Algunos movimientos comunican cambios importantes en el estado de la interfaz. En lugar de eliminar las animaciones por completo, ralentícelas o simplifíquelas mediante fundidos cruzados.
@media (prefers-reduced-motion: reduce) {
.modal {
/* Replace scale + fade with just fade */
animation: fadeOnly 0.1s linear;
}
@keyframes fadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
}La opción drástica: desactivar todas las animaciones
Un patrón habitual consiste en desactivar globalmente todas las transiciones y animaciones para quienes prefieren menos movimiento. Es una base segura, aunque no se haya ajustado cada animación de forma individual.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Detectar el movimiento reducido en JavaScript
Use la API matchMedia para detectar la preferencia en JavaScript; resulta útil para controlar animaciones de canvas, movimientos impulsados por JavaScript o la reproducción automática de vídeos.
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReduced.matches) {
// skip gsap or canvas animations
} else {
startAnimation();
}
// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
if (e.matches) stopAnimations();
else startAnimations();
});Comportamiento del desplazamiento y reproducción automática
Desactive también el desplazamiento suave para quienes prefieren menos movimiento: scroll-behavior: auto. Detenga la reproducción automática de vídeos. No haga que el contenido parpadee ni destelle.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
// In JS:
if (!prefersReduced.matches) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
element.scrollIntoView(); // instant
}WCAG 2.3.3 — Animación causada por interacciones
WCAG 2.3.3 (nivel AAA) exige que el movimiento activado por la interacción del usuario pueda desactivarse. Al respetar prefers-reduced-motion, cumple este criterio y mejora la accesibilidad para las personas con trastornos vestibulares.
Probar el movimiento reducido
En Chrome DevTools, abra el panel de representación (menú de tres puntos → Más herramientas → Representación) y active «Emular la función multimedia CSS prefers-reduced-motion». Pruebe la interfaz en este modo antes de publicarla.
Práctica: patrón de animación segura
Una animación segura para el movimiento se aplica de forma predeterminada y se estructura para poder desactivarla fácilmente de manera global.
@keyframes slideIn {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.alert {
animation: slideIn 0.3s ease;
}
}La animación del foco debe conservarse
Los indicadores de foco (el anillo que muestra qué elemento tiene el foco) NO deben eliminarse, ni siquiera para quienes prefieren menos movimiento. Son esenciales para la navegación con teclado y normalmente no desencadenan problemas vestibulares.
Bibliotecas y prefers-reduced-motion
Las bibliotecas de animación populares (Framer Motion, GSAP, Anime.js) ofrecen compatibilidad integrada con la reducción del movimiento. El hook useReducedMotion() de Framer Motion facilita la desactivación condicional de animaciones complejas en React.
Comprobación rápida
¿Qué función multimedia de CSS detecta la preferencia del usuario de ver menos movimiento en la interfaz?
Repaso: prefers-reduced-motion
Algunas personas necesitan menos movimiento por motivos de salud vestibular y neurológica. Use @media (prefers-reduced-motion: reduce) para desactivar o simplificar las animaciones. Detecte la preferencia en JS con matchMedia. La opción drástica consiste en establecer animation/transition-duration en 0.01ms de forma global. WCAG 2.3.3 lo recomienda. Realice pruebas con el panel de representación de DevTools.
Preguntas frecuentes
¿La lección «Respetar prefers-reduced-motion» es gratis?
Sí — el texto completo de «Respetar prefers-reduced-motion» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Respetar prefers-reduced-motion»?
Detecte la media query prefers-reduced-motion y desactive o reduzca las animaciones para quienes hayan solicitado menos movimiento. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 4 de 4.
¿Cuánto tiempo toma la lección «Respetar prefers-reduced-motion»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- Propiedades personalizadas de CSS: declarar y actualizar
- Transiciones: propiedad duración temporización
- Animaciones con @keyframes
- Respetar prefers-reduced-motion