prefers-reduced-motion

Syntax

no-preference

Gibt an, dass ein Benutzer keine Präferenz auf dem Gerät angegeben hat. Dieser Schlüsselwortwert wird als falsch bewertet.

reduce

Gibt an, dass ein Benutzer die Einstellung für reduzierte Bewegung auf seinem Gerät aktiviert hat. Der Schlüsselwortwert reduce wird als wahr bewertet; daher ist @media (prefers-reduced-motion) äquivalent zu @media (prefers-reduced-motion: reduce).

Benutzereinstellungen

Für Firefox wird die Anforderung reduce berücksichtigt, wenn:

• Unter GTK/GNOME: Einstellungen > Barrierefreiheit > Sehen > Reduzierte Bewegung ist eingeschaltet.

  • In älteren Versionen von GNOME ist GNOME Tweaks > Allgemein (oder Aussehen, je nach Version) > Animationen ausgeschaltet.
  • Alternativ fügen Sie gtk-enable-animations = false zum [Settings] Block der GTK 3 Konfigurationsdatei hinzu.

• Unter Plasma/KDE: Systemeinstellungen > Arbeitsbereich Verhalten -> Allgemeines Verhalten > "Animationsgeschwindigkeit" ist ganz rechts auf "Sofort" gesetzt.

• In Windows 10: Einstellungen > Erleichterte Bedienung > Anzeige > Animationen in Windows anzeigen.

• In Windows 11: Einstellungen > Barrierefreiheit > Visuelle Effekte > Animationseffekte

• Unter macOS: Systemeinstellungen > Bedienungshilfen > Display > Bewegung reduzieren.

• In iOS: Einstellungen > Bedienungshilfen > Bewegung.

• In Android 9+: Einstellungen > Bedienungshilfen > Animationen entfernen.

• In Firefox about:config: Fügen Sie eine Nummernpräferenz namens ui.prefersReducedMotion hinzu und setzen Sie deren Wert entweder auf 0 für vollständige Animation oder auf 1, um eine Präferenz für reduzierte Bewegung anzuzeigen. Änderungen an dieser Einstellung treten sofort in Kraft.

Beispiele

Dieses Beispiel verwendet eine Skalierungsanimation, um prefers-reduced-motion zu demonstrieren. Wenn Sie die Einstellung zur Bewegungsreduzierung in den Barrierefreiheitseinstellungen auf Ihrem Gerät aktivieren, erkennt die Medienabfrage prefers-reduced-motion Ihre Präferenz und das CSS innerhalb der Regeln zur reduzierten Bewegung, mit derselben Spezifität, aber später in der CSS-Quellreihenfolge, wird Vorrang haben. Infolgedessen wird die Animation auf der Box zur dissolve Animation, einer gedämpfteren Animation, die keinen vestibulären Bewegungsauslöser darstellt.

Die Animation skalierung reduzieren

HTML

<div class="animation">animated box</div>

CSS

.animation {
  animation: pulse 1s linear infinite both;
  background-color: purple;
}

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

.animation {
  color: white;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dissolve {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

Ergebnis

Sie können die Einstellung zur Bewegungsreduzierung auf Ihrem Gerät aktivieren, um die Änderung in der Animationsskalierung zu sehen. In diesem Beispiel wird die Hintergrundfarbe und die Linie über dem Text verwendet, um visuell hervorzuheben, wann die Keyframe-Animation in Reaktion auf die aktivierte oder deaktivierte Einstellung umschaltet.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Sec-CH-Prefers-Reduced-Motion HTTP-Header User-Agent-Client-Hint
• Eine Einführung zum "reduce motion" Medien-Feature auf CSS-Tricks (2019)
• Responsive Design für Bewegung im WebKit-Blog (2017)