Animación

Pausar, detener, ocultar

Incluye un mecanismo para pausar, detener u ocultar la animación cuando se cumplan estos tres criterios:

• La animación comienza automáticamente.
• La duración es de más de cinco segundos.
• Se presenta en paralelo con otro contenido.

El objetivo es reducir las distracciones. Esto afecta especialmente a los usuarios con trastornos por déficit de atención.

Fotosensibilidad y destellos

Algunas personas tienen fotosensibilidad y pueden sufrir convulsiones a causa del parpadeo frecuente de las imágenes.

Como regla general, evita que el contenido destelle más de tres veces por segundo.

Utiliza consultas de medios

Los usuarios pueden configurar las preferencias de su sistema operativo para reducir el movimiento en pantalla.

Para que las animaciones de tu sitio web respeten estas preferencias puedes incluirlas dentro de una consulta de medios del tipo @prefers-reduced-motion.

@media (prefers-reduced-motion) {
  /* estilos a aplicar para movimiento reducido */
}

Los estilos que se encuentran dentro de esta consulta de medios solo se aplicarán si el dispositivo del usuario está configurado para movimiento reducido.