Activar y desactivar animaciones.

Un tutorial muy detallado de Kirupa que explica cómo proporcionar una interfaz de usuario con opciones persistentes que controlen si las animaciones se ejecutan o no.

El truco son las propiedades personalizadas que controlan el movimiento:

body {  --toggle: 0;  --playState: "paused";}

Los cuales se utilizan dentro de animaciones y transiciones:

.animation {  animation: bobble 2s infinite;  animation-play-state: var(--playState);}.transition {  transition: transform calc(var(--toggle) * .15s) ease-in-out;}

Y se puede alternar mediante JavaScript:

// stop animationdocument.body.style.setProperty("--toggle", "0");document.body.style.setProperty("--playState", "paused");// play animationdocument.body.style.setProperty("--toggle", "1");document.body.style.setProperty("--playState", "running");

Luego comience a utilizar la consulta de medios para probar el movimiento reducido desde el principio y almacenar el valor preferido en formato localStorage.