Animaciones CSS accesibles: cómo respetar prefers-reduced-motion

Las animaciones pueden mejorar mucho una interfaz cuando se usan con intención. Un botón que responde de forma suave, una tarjeta que aparece progresivamente o un menú que se despliega con una transición bien medida pueden hacer que una web resulte más clara, más fluida y más agradable de usar.

Pero hay una parte importante que no siempre se tiene en cuenta: no todas las personas viven el movimiento en pantalla de la misma manera.

Para algunas personas, ciertas animaciones pueden provocar mareo, fatiga visual, incomodidad, distracción o dificultad para concentrarse. Por eso, cuando hablamos de animaciones CSS accesibles, no estamos hablando de quitar personalidad al diseño, sino de crear experiencias más cuidadas, inclusivas y respetuosas.

En CSS existe una herramienta especialmente útil para esto: prefers-reduced-motion.

Esta media query permite detectar si una persona ha indicado en su sistema que prefiere reducir el movimiento. A partir de ahí, podemos adaptar animaciones, transiciones, efectos de scroll y cambios visuales para que la navegación sea más cómoda.

En este artículo vamos a ver qué es prefers-reduced-motion, cómo aplicarlo correctamente y qué buenas prácticas conviene seguir para crear animaciones CSS accesibles sin renunciar a una interfaz atractiva.

Qué son las animaciones CSS accesibles

Las animaciones CSS accesibles son aquellas que aportan valor a la experiencia de usuario sin convertirse en una barrera.

Una animación puede ayudar a entender mejor una interfaz. Por ejemplo, puede indicar que un elemento ha cambiado de estado, que una acción se ha completado o que un contenido acaba de aparecer. También puede suavizar una transición visual y hacer que el diseño resulte más natural.

Si estás empezando a trabajar este tema desde una base más general, puede ayudarte leer también esta guía básica sobre animaciones CSS, donde explico los conceptos fundamentales para entender cómo se comporta el movimiento en una interfaz web.

El problema aparece cuando las animaciones se usan sin criterio. Un efecto puede parecer bonito en una maqueta, pero resultar incómodo en un contexto real de navegación. Esto ocurre especialmente con movimientos bruscos, desplazamientos grandes, efectos de parallax, zooms intensos, rebotes exagerados o animaciones infinitas.

Por eso, una buena pregunta antes de añadir cualquier animación sería:

¿Este movimiento ayuda a entender mejor la interfaz o solo está decorando?

Si la animación refuerza una acción, guía la atención o mejora la comprensión, tiene sentido mantenerla. Si solo añade ruido visual, quizá conviene reducirla o eliminarla.

La accesibilidad en animaciones CSS no consiste en dejar una web completamente estática. Consiste en que el movimiento sea opcional, proporcionado y respetuoso con las preferencias de quien navega.

Qué es prefers-reduced-motion

prefers-reduced-motion es una característica de CSS que permite saber si el usuario ha solicitado reducir el movimiento en su dispositivo.

Se utiliza mediante una media query:

@media (prefers-reduced-motion: reduce) { /* Estilos para usuarios que prefieren menos movimiento */
}

Cuando esta condición se cumple, significa que la persona ha activado una preferencia de accesibilidad relacionada con la reducción de movimiento. Esta configuración puede venir del sistema operativo, del navegador o del entorno desde el que está navegando.

También existe el valor contrario:

@media (prefers-reduced-motion: no-preference) { /* Estilos para usuarios que no han indicado preferencia por reducir movimiento */
}

Esto permite trabajar de dos formas. Podemos crear una animación por defecto y reducirla cuando el usuario lo solicite, o podemos partir de una experiencia sin movimiento y añadir animaciones solo cuando no exista esa preferencia.

En proyectos nuevos, este segundo enfoque suele ser más accesible, porque parte de una base estable y añade el movimiento como mejora progresiva.

Por qué deberías respetar la reducción de movimiento

Respetar prefers-reduced-motion no es solo una mejora técnica. Es una decisión de diseño responsable.

Algunas personas pueden experimentar molestias con ciertos movimientos en pantalla, especialmente cuando hay desplazamientos amplios, efectos de zoom, animaciones automáticas o cambios visuales inesperados. También puede afectar a quienes tienen migrañas, sensibilidad vestibular, fatiga visual o dificultades de concentración.

Pero reducir movimiento no beneficia únicamente a un grupo concreto. También mejora la experiencia en muchos otros escenarios:

• cuando alguien navega desde un dispositivo menos potente;
• cuando la persona está leyendo contenido largo;
• cuando se consulta una web desde el transporte público;
• cuando se necesita concentración para rellenar un formulario;
• cuando una interfaz ya tiene demasiados estímulos visuales.

Una web accesible no es solo la que se puede usar con teclado o lector de pantalla. También es la que permite navegar sin sobrecarga visual.

En el desarrollo frontend actual, el movimiento debería entenderse como una capa más de la experiencia, no como un adorno obligatorio. Igual que cuidamos el contraste, la jerarquía visual o la legibilidad, también deberíamos cuidar cómo se mueve una interfaz.

Cómo aplicar prefers-reduced-motion en CSS

La forma más sencilla de utilizar prefers-reduced-motion es detectar la preferencia del usuario y ajustar las animaciones que puedan resultar problemáticas.

Imaginemos una tarjeta que aparece con un pequeño desplazamiento vertical:

.card { opacity: 0; transform: translateY(24px); animation: fade-up 0.6s ease forwards;
} @keyframes fade-up { to { opacity: 1; transform: translateY(0); }
}

Esta animación combina dos efectos: un cambio de opacidad y un desplazamiento. Puede quedar muy bien visualmente, pero el movimiento vertical no siempre es necesario.

Podemos adaptarla así:

@media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; transform: none; }
}

Con esta solución, las personas que prefieren menos movimiento verán la tarjeta directamente en pantalla, sin desplazamiento. La información sigue estando disponible y la interfaz mantiene su funcionalidad.

Reducir movimiento no significa eliminar todo feedback

Un error habitual es pensar que, si alguien prefiere menos movimiento, debemos eliminar todas las transiciones. No siempre es necesario.

Por ejemplo, este botón tiene un cambio de color y un pequeño escalado al pasar el cursor:

.button { background-color: #753a88; transform: scale(1); transition: background-color 0.2s ease, transform 0.2s ease;
} .button:hover { background-color: #cc2b5e; transform: scale(1.05);
}

El cambio de escala puede ser prescindible, pero el cambio de color sigue siendo útil como respuesta visual. Podríamos ajustar el código así:

@media (prefers-reduced-motion: reduce) { .button { transition: background-color 0.2s ease; } .button:hover { transform: none; }
}

De esta forma, el botón sigue comunicando interacción, pero sin mover físicamente el elemento.

Este matiz es importante: la accesibilidad no busca eliminar la experiencia visual, sino hacerla más cómoda.

Cuándo usar transition y cuándo usar animation

Para crear animaciones CSS accesibles también conviene diferenciar bien entre transition y animation.

Una transition es útil cuando quieres suavizar el cambio entre dos estados: normal y hover, abierto y cerrado, visible e invisible. En cambio, animation suele utilizarse cuando necesitas una secuencia más compleja, varios pasos o una repetición.

Si quieres profundizar en esta diferencia, puedes leer el artículo sobre cómo crear animaciones suaves con transition, donde explico cómo aplicar transiciones de forma clara y controlada.

La clave está en elegir la herramienta adecuada. Muchas veces se utiliza animation para efectos que podrían resolverse con una simple transición. Y cuanto más compleja es una animación, más importante es revisar si necesita una versión reducida.

Por ejemplo, una transición de color en un enlace suele ser poco problemática. En cambio, una animación con desplazamiento, rotación o escala puede necesitar una alternativa.

Cómo reducir animaciones creadas con @keyframes

Las animaciones con @keyframes ofrecen mucho control, pero también pueden generar efectos más intensos. Por eso es importante revisarlas con especial atención.

Si estás trabajando este tema desde cero, también puedes consultar el artículo sobre cómo funciona @keyframes en CSS explicado fácil, donde se explica cómo crear secuencias de animación paso a paso.

Veamos un ejemplo sencillo:

.badge { animation: pulse 1.5s infinite ease-in-out;
} @keyframes pulse { 50% { transform: scale(1.12); }
}

Esta animación hace que una insignia aumente y reduzca su tamaño constantemente. Puede llamar la atención, pero también puede resultar molesta si se repite de forma indefinida.

Una versión accesible sería:

@media (prefers-reduced-motion: reduce) { .badge { animation: none; }
}

También podrías sustituir el movimiento por una señal estática:

@media (prefers-reduced-motion: reduce) { .badge { animation: none; border: 2px solid currentColor; }
}

Así, el elemento sigue destacando, pero ya no depende de un movimiento continuo.

Cuidado con el scroll suave y los efectos de desplazamiento

Uno de los detalles que más se olvidan al trabajar con accesibilidad de animaciones CSS es el scroll.

La propiedad scroll-behavior: smooth se utiliza mucho para crear desplazamientos suaves al navegar hacia enlaces internos de una página. Puede ser agradable, pero también puede resultar incómoda para personas que prefieren reducir movimiento.

Un patrón recomendable sería este:

html { scroll-behavior: smooth;
} @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }
}

De esta forma, quienes no han indicado ninguna preferencia tendrán desplazamiento suave, mientras que quienes prefieren menos movimiento tendrán un salto directo.

Este punto es especialmente importante en páginas con enlaces ancla, documentación, landings largas o artículos extensos. Si trabajas con React y navegación interna, puede interesarte este artículo sobre React Router Hash Link y enlaces ancla en React, porque este tipo de comportamiento también debería respetar las preferencias de movimiento del usuario.

Efectos de scroll que conviene revisar

Además del scroll suave, hay otros efectos que deberías comprobar:

• apariciones animadas al hacer scroll;
• fondos con parallax;
• textos que se desplazan lateralmente;
• imágenes que hacen zoom mientras bajas por la página;
• secciones que entran desde fuera de la pantalla;
• indicadores animados permanentes.

No todos estos efectos son incorrectos, pero sí deberían tener una versión reducida.

Patrón recomendado: animar solo con no-preference

Una forma muy limpia de trabajar con animaciones CSS accesibles es partir de una interfaz estable y añadir movimiento solo cuando el usuario no ha indicado preferencia por reducirlo.

Por ejemplo:

.post-card { opacity: 1; transform: none;
} @media (prefers-reduced-motion: no-preference) { .post-card { opacity: 0; transform: translateY(20px); animation: post-card-enter 0.45s ease forwards; }
} @keyframes post-card-enter { to { opacity: 1; transform: translateY(0); }
}

Este patrón tiene una ventaja clara: el contenido no depende de la animación para mostrarse correctamente. La experiencia base es estable, accesible y funcional. El movimiento se añade después como una mejora visual.

Este enfoque encaja muy bien con la idea de mejora progresiva. Primero aseguras que la interfaz funciona. Después añades capas de estilo, interacción y movimiento para quienes pueden disfrutarlas sin problema.

Ejemplo completo de componente accesible

Veamos un ejemplo más completo: una tarjeta de artículo con sombra, enlace y efecto hover.

<article class="post-card"> <h2>Animaciones CSS accesibles</h2> <p> Aprende a crear interfaces con movimiento respetando las preferencias del usuario. </p> <a href="#">Leer artículo</a>
</article>

Primero definimos la versión base:

.post-card { padding: 1.5rem; border: 1px solid #e6e6e6; border-radius: 1rem; background: #ffffff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
} .post-card a { display: inline-block; margin-top: 1rem; color: #cc2b5e; font-weight: 600;
}

Ahora añadimos movimiento solo cuando no hay preferencia de reducción:

@media (prefers-reduced-motion: no-preference) { .post-card { opacity: 0; transform: translateY(20px); animation: post-card-enter 0.45s ease forwards; transition: transform 0.25s ease, box-shadow 0.25s ease; } .post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgb(0 0 0 / 0.12); }
} @keyframes post-card-enter { to { opacity: 1; transform: translateY(0); }
}

Con esta estructura, la tarjeta es completamente usable sin animación. El contenido se muestra, el enlace funciona y la jerarquía visual se mantiene. La animación simplemente mejora la experiencia para quienes no han indicado preferencia por reducir movimiento.

Errores comunes al trabajar la accesibilidad en animaciones CSS

Aunque prefers-reduced-motion es fácil de utilizar, hay algunos errores bastante habituales.

Aplicar una solución global sin revisar cada caso

Una solución rápida puede ser esta:

@media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; }
}

Puede servir como punto de partida en algunos proyectos, pero no siempre es la mejor opción. Algunas transiciones ayudan a entender cambios de estado. Si las eliminas todas, podrías dejar la interfaz menos clara.

Lo ideal es revisar qué animaciones existen y decidir cuáles deben reducirse, cuáles pueden mantenerse y cuáles conviene sustituir por otro tipo de feedback.

Usar el movimiento como única señal

Una animación nunca debería ser la única forma de comunicar información.

Por ejemplo, si un formulario tiene un error, no basta con hacer que el campo “tiemble”. También debería haber un mensaje de texto claro, un estilo visual reconocible y, cuando corresponda, atributos accesibles.

Lo mismo ocurre con estados activos, confirmaciones, avisos o cambios importantes en la interfaz.

El movimiento puede reforzar una señal, pero no debería ser la única señal.

Olvidarse de las animaciones infinitas

Las animaciones en bucle merecen una revisión especial. Un loader puede tener sentido mientras se carga una acción, pero un icono que se mueve todo el tiempo en una zona de lectura puede distraer mucho.

Antes de usar una animación infinita, pregúntate:

• ¿Es necesaria?
• ¿Aporta información?
• ¿Puede detenerse?
• ¿Tiene alternativa para usuarios con reducción de movimiento?

Si la respuesta no está clara, probablemente conviene simplificar.

No probar la web con reducción de movimiento activada

No basta con escribir la media query. Hay que probarla.

Activa la reducción de movimiento en el sistema o desde las herramientas del navegador y navega por la web como lo haría una persona usuaria. Revisa menús, modales, botones, formularios, carruseles, enlaces ancla y efectos de scroll.

La prueba real es comprobar que la interfaz sigue siendo clara, cómoda y funcional.

Buenas prácticas para crear animaciones CSS accesibles

Crear animaciones accesibles no significa renunciar al diseño visual. Significa tomar mejores decisiones.

Una interfaz puede seguir siendo atractiva sin depender de desplazamientos intensos o efectos constantes. Puedes trabajar con composición, contraste, jerarquía, color, tipografía, espaciado y pequeños cambios visuales.

Estas buenas prácticas pueden ayudarte:

Diseña primero sin movimiento

La interfaz debería entenderse aunque las animaciones no existan. El contenido importante debe estar visible, los estados deben ser claros y las acciones principales deben ser fáciles de identificar.

Después puedes añadir animaciones como mejora, no como dependencia.

Evita movimientos bruscos o demasiado amplios

Los desplazamientos grandes, zooms intensos y giros rápidos suelen ser más problemáticos que los cambios sutiles de opacidad o color.

Siempre que puedas, sustituye movimiento físico por cambios visuales más tranquilos.

Reduce o elimina el parallax

El parallax puede ser visualmente llamativo, pero también es uno de los efectos que más conviene revisar desde el punto de vista de accesibilidad. Si lo utilizas, ofrece una versión reducida.

Controla la duración

Una animación demasiado lenta puede resultar pesada. Una demasiado rápida puede ser brusca. En ambos casos, la experiencia se resiente.

Busca duraciones cortas, suaves y proporcionadas.

No abuses de las animaciones decorativas

Cada animación debería tener un motivo. Si no guía, no informa y no mejora la interacción, quizá no hace falta.

Esta idea conecta mucho con el diseño de experiencia de usuario. De hecho, cuando analizamos patrones de comportamiento y hábitos de navegación, conceptos como el síndrome Baby Duck en UX también nos recuerdan que las personas interpretan una interfaz desde sus expectativas previas. Si llenamos la experiencia de efectos inesperados, podemos generar más fricción que claridad.

Accesibilidad, rendimiento y experiencia de usuario

Las animaciones CSS accesibles también tienen relación con el rendimiento y la calidad general de una web.

Una interfaz con demasiados efectos puede sentirse pesada, especialmente en dispositivos menos potentes. Además, si las animaciones no están bien optimizadas, pueden afectar a la fluidez de la navegación.

Por eso, cuando diseñes movimiento en CSS, conviene combinar tres criterios:

• que la animación tenga una función clara;
• que sea técnicamente eficiente;
• que respete las preferencias de accesibilidad.

No se trata solo de “que se vea bonito”. Se trata de que la experiencia sea coherente, usable y cómoda.

En diseño UI/UX, las herramientas pueden ayudarnos a prototipar movimiento, pero la decisión importante sigue siendo conceptual: saber cuándo animar y cuándo no. Si te interesa esa parte más estratégica, puedes complementar esta lectura con el artículo sobre Figma como herramienta de diseño UI/UX, especialmente si trabajas la transición entre prototipo visual y desarrollo frontend.

Checklist rápida para revisar tus animaciones CSS

Antes de dar por buena una animación, puedes revisar esta lista:

• ¿La animación tiene una función clara?
• ¿El contenido se entiende sin movimiento?
• ¿Hay desplazamientos grandes o inesperados?
• ¿Existen animaciones infinitas innecesarias?
• ¿El scroll suave respeta prefers-reduced-motion?
• ¿Los estados importantes se comunican de otra forma además de animarse?
• ¿La interfaz funciona bien con reducción de movimiento activada?
• ¿Puedes sustituir movimiento por opacidad, color, borde o contraste?
• ¿La animación mejora la experiencia o solo añade decoración?

Esta revisión puede parecer pequeña, pero ayuda mucho a crear interfaces más profesionales.

Preguntas frecuentes sobre prefers-reduced-motion

¿Qué es prefers-reduced-motion?

prefers-reduced-motion es una media query de CSS que permite detectar si el usuario ha configurado su dispositivo para reducir el movimiento. Con esta información, podemos adaptar animaciones, transiciones y efectos visuales para que la experiencia sea más cómoda.

¿Tengo que eliminar todas las animaciones si uso prefers-reduced-motion?

No necesariamente. Lo recomendable es reducir, eliminar o sustituir las animaciones que puedan resultar molestas. Algunas transiciones suaves, como cambios de color u opacidad, pueden mantenerse si no generan desplazamientos bruscos ni dificultan la navegación.

¿prefers-reduced-motion solo afecta a CSS?

No. Aunque se utiliza mucho en CSS, también puede consultarse desde JavaScript con window.matchMedia(). Esto permite adaptar animaciones creadas con librerías, efectos de scroll, sliders, componentes interactivos o lógica personalizada.

Cuando el movimiento también debe saber quedarse quieto

Las animaciones pueden aportar ritmo, personalidad y claridad a una interfaz. Pero una buena experiencia digital no se mide por la cantidad de efectos que añadimos, sino por la calidad de las decisiones que tomamos.

prefers-reduced-motion nos recuerda algo muy importante: no todas las personas quieren navegar la web de la misma manera. Algunas disfrutan de interfaces dinámicas. Otras necesitan entornos más estables, tranquilos y predecibles.

Respetar esa preferencia no limita la creatividad. La hace más consciente.

Diseñar animaciones CSS accesibles significa entender que el movimiento debe estar al servicio de la experiencia, no por encima de ella. Una transición bien pensada puede ayudar. Un efecto excesivo puede distraer. Una animación sutil puede guiar. Una animación innecesaria puede convertirse en una barrera.

Por eso, la próxima vez que añadas movimiento a una interfaz, no pienses solo en si queda bonito. Pregúntate también si aporta algo, si puede reducirse y si la web seguirá funcionando bien para quienes prefieren una experiencia más calmada.

A veces, la mejor animación es la que sabe cuándo no moverse.