Respuesta corta: Una animación en tu web debería ayudar a seguir lo que pasa: una respuesta, un cambio de estado o de dónde viene algo. Que la mayoría dure entre 100 y 400 milisegundos. Lo que se mueve solo durante más de cinco segundos necesita una forma de pausarlo, pararlo u ocultarlo. Quien activa reducir movimiento debería ver una página quieta.
Para qué sirve la animación en una web
NN/g dice que la animación en una interfaz debe ser discreta, breve y sutil. Sirve para dar una respuesta, mostrar un cambio de estado, dar una idea de lugar y sugerir cómo se comporta un elemento.
El movimiento atrae la atención, porque nuestra visión periférica está hecha para notarlo. Por eso molesta el movimiento que no aporta nada: cuesta dejar de mirarlo, como sabe cualquiera que se haya topado con un anuncio que se mueve.
Cuánto debe durar una animación
NN/g sitúa una respuesta simple, como una casilla o un interruptor, en unos 100 milisegundos. Los cambios más grandes, como un modal que entra en pantalla, pueden tardar de 200 a 300 milisegundos.
A partir de 500 milisegundos, las animaciones empiezan a hacerse pesadas. En la mayoría de los casos NN/g recomienda de 100 a 400 milisegundos, con 400 ya muy lento. Lo que entra en pantalla puede ir un poco más despacio que lo que sale.
La curva también cuenta. NN/g recomienda casi siempre una curva que frena al final (ease-out), porque el movimiento lineal suele verse poco natural.
| Movimiento | Regla | Fuente |
|---|---|---|
| Respuesta de un botón o interruptor | Unos 100 milisegundos | NN/g |
| Un panel o un modal que se abre | De 200 a 300 milisegundos | NN/g |
| Lo que se mueve solo junto a otro contenido | Que pare antes de cinco segundos, o que se pueda pausar, parar u ocultar | W3C, nivel A |
| Movimiento que inicia un clic o el scroll | Que se pueda desactivar, salvo que sea imprescindible | W3C, nivel AAA |
| Visitantes con reducir movimiento activado | Léelo con prefers-reduced-motion y quita el movimiento de más | MDN |
Tiempos de NN/g, reglas del W3C y documentación de MDN, en inglés, consultados el 4 de noviembre de 2026.
Movimiento y accesibilidad
La regla de nivel A del W3C cubre todo lo que se mueve, parpadea o se desplaza solo durante más de cinco segundos junto a otro contenido. La gente necesita una forma de pausarlo, pararlo u ocultarlo, salvo que el movimiento sea imprescindible.
Una regla más exigente, de nivel AAA, pide que el movimiento que inicia una interacción, como un efecto al hacer scroll, se pueda desactivar, salvo que sea imprescindible. El W3C advierte que la animación puede causar náuseas y migrañas a personas con trastornos vestibulares.
El navegador le pasa a tu web el ajuste de reducir movimiento con prefers-reduced-motion. MDN explica que detecta un ajuste pensado para minimizar el movimiento innecesario, y que escalar o desplazar objetos grandes puede desencadenar problemas vestibulares.
Cómo mantener rápidas las animaciones
web.dev recomienda mover los elementos con transform y evitar cualquier propiedad que active el diseño o la pintura, salvo que de verdad la necesites. También aconseja usar will-change con moderación y solo si tienes un problema de rendimiento.
Cómo animar tu web
- Dale un trabajo a cada animación: una respuesta, un cambio de estado o una idea de lugar.
- Que la mayoría dure entre 100 y 400 milisegundos, con una curva que frena al final.
- Anima transform y opacity en vez de propiedades de tamaño o posición.
- Detén cualquier bucle antes de cinco segundos o añade un botón de pausa.
- Apaga el movimiento innecesario a quien tenga activado reducir movimiento.
- Asegúrate de que el movimiento nunca mueva la maquetación ni tape texto.
- Prueba con reducir movimiento activado, en pantallas de teléfono y en un teléfono lento.
Nuestra guía de cumulative layout shift explica la parte de la maquetación. La guía del verificador de accesibilidad explica el resto de comprobaciones.
Cómo resuelve el movimiento nuestra web
Revisamos nuestras páginas como visitantes el 4 de noviembre de 2026. En su primer segundo, nuestra página de inicio tiene 19 animaciones en bucle; a los seis segundos solo se mueven la cinta de texto y el muro de fotos.
Un botón «Pausar movimiento» al principio de la cinta detiene las dos con un clic, y la web recuerda la elección. En una guía y en nuestras páginas de precios, de publicidad y de contacto, al principio hay de cinco a nueve bucles y ninguno a los seis segundos.
Con reducir movimiento activado, nada se mueve en esas páginas y el botón de pausa no aparece. Nuestra transición por defecto dura 180 milisegundos.
Al preparar esta guía, el 4 de noviembre de 2026, arreglamos cuatro fallos: un punto que parpadeaba ignoraba reducir movimiento, nada se podía pausar, los bucles decorativos no paraban nunca y un efecto de escritura empujaba unos píxeles el texto de debajo.
Antes de publicar una página con animación
- Cada animación tiene un trabajo.
- La mayoría dura de 100 a 400 milisegundos.
- Nada se repite más de cinco segundos sin pausa.
- Reducir movimiento deja la página quieta.
- El movimiento nunca mueve la maquetación.
- Las animaciones usan transform y opacity.
RecuerdaEl movimiento debe explicar, no decorar. Que sea breve, que se pueda pausar y que quien lo pida vea una página quieta.
Si quieres una web cuyo movimiento ayude en vez de distraer, nuestro servicio de diseño web puede hacerla y probarla contigo.
Respuestas rápidas sobre animaciones web
¿Cuánto debe durar una animación en una web?
Normalmente entre 100 y 400 milisegundos, según NN/g. Una respuesta simple, como un interruptor, necesita unos 100. Un modal que entra puede tardar de 200 a 300. A partir de 500 milisegundos, las animaciones empiezan a hacerse pesadas.
¿Las animaciones hacen más lenta una web?
Pueden hacerlo. web.dev recomienda animar transform y opacity, y evitar cualquier propiedad que active el diseño o la pintura salvo que de verdad la necesites. Usa will-change con moderación y solo si tienes un problema de rendimiento.
¿Qué es prefers-reduced-motion?
Es una característica de CSS que le dice a tu web que el visitante activó reducir movimiento. MDN explica que detecta un ajuste pensado para minimizar el movimiento innecesario. Úsala para quitar o suavizar tus animaciones a esos visitantes.
¿Tengo que dejar que el visitante pause las animaciones?
La regla de nivel A del W3C cubre todo lo que se mueve, parpadea o se desplaza solo durante más de cinco segundos junto a otro contenido. Pide una forma de pausarlo, pararlo u ocultarlo, salvo que el movimiento sea imprescindible. Pararlo antes de cinco segundos también vale.
¿Las animaciones al hacer scroll son malas para la accesibilidad?
No por sí mismas, pero pueden causar náuseas o migrañas a personas con trastornos vestibulares, según el W3C. Su regla de nivel AAA pide que el movimiento que inicia una interacción se pueda desactivar. Respetar reducir movimiento cubre casi todo.
Fuentes
Consultadas el 4 de noviembre de 2026. NN/g, en inglés: The Role of Animation and Motion in UX y Executing UX Animations: Duration and Motion Characteristics. Iniciativa de Accesibilidad Web del W3C, en inglés: Understanding Success Criterion 2.2.2: Pause, Stop, Hide y Understanding Success Criterion 2.3.3: Animation from Interactions. MDN, en inglés: prefers-reduced-motion. web.dev: Cómo crear animaciones CSS de alto rendimiento. Nuestro caso: nuestras páginas leídas en un navegador el 4 de noviembre de 2026.