Animación

Pausar, detener u ocultar animaciones

Incluye un mecanismo que permita al usuario pausar, detener u ocultar la animación si se cumplen los tres criterios siguientes:

• La animación se reproduce automáticamente.
• Su duración supera los cinco segundos.
• Se presenta al mismo tiempo que otro contenido relevante.

Esto ayuda a reducir distracciones, especialmente en personas con trastornos de atención.

Ejemplo: un carrusel de imágenes que cambia automáticamente cada pocos segundos debería incluir botones visibles para pausar o detener la transición.

Fotosensibilidad y destellos

El parpadeo frecuente de las imágenes puede provocar convulsiones en personas con fotosensibilidad.

Como regla general, evita cualquier contenido que destelle más de tres veces por segundo. Asegúrate de que los efectos visuales, como rayos, explosiones o flashes, no superen este umbral.

Respeta las preferencias del usuario

Muchos sistemas operativos permiten al usuario indicar que desea reducir el movimiento en pantalla. Tu sitio web puede adaptarse a esta preferencia mediante la media query @prefers-reduced-motion.

@media (prefers-reduced-motion) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

Los estilos definidos dentro de esta consulta solo se aplican si el dispositivo está configurado para "reducir movimiento".

Usa esta opción para desactivar efectos como parallax, deslizamientos, zooms, transiciones suaves o cualquier otro movimiento decorativo que no sea esencial para la interacción.

GIFs animados y SVG

Las imágenes animadas, como los GIFs o animaciones SVG, también pueden resultar molestas o problemáticas si no se gestionan correctamente.

GIFs animados

• Evita los GIFs con parpadeos rápidos o movimiento continuo.
• Si se reproducen automáticamente, asegúrate de que tengan una opción para detenerlos o que se detengan tras unos segundos.
• Considera usar video HTML5 con controles, en lugar de GIFs, si el contenido tiene relevancia informativa.

SVG animados

• Aplica prefers-reduced-motion también a las animaciones dentro de SVGs.
• Usa animaciones suaves, lentas y que no sean esenciales para entender el contenido.
• Si usas animaciones CSS sobre SVGs, asegúrate de que puedan desactivarse con una media query.

@media (prefers-reduced-motion) {
  svg * {
    animation: none !important;
  }
}

Si la animación es solo decorativa, considera eliminarla por completo cuando el usuario ha pedido movimiento reducido.