Respetar el movimiento reducido en CSS

Toda animación necesita un interruptor de apagado para quien lo pide.

.celebrate {
  animation: xp-pop 320ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

Cómo funciona

1. prefers-reduced-motion: reduce es un ajuste real del usuario.
2. Quita el movimiento pero mantén visible el cambio de estado.
3. Poner una duración casi cero es más suave que eliminar la regla.

Palabras clave y builtins usados aquí

• animation
• media
• ms

El intento, en números

Líneas

14

Caracteres a escribir

230

Tokens

49

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 33 segundos.

Escribe este fragmento

Paso 7 de 8 en Movimiento y efectos; paso 17 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →