prefers-reduced-motion

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Warnung: Ein eingebettetes Beispiel am Ende dieser Seite zeigt eine Skalierungsbewegung, die für einige Leser problematisch sein könnte. Leser mit vestibulären Bewegungsstörungen sollten die Funktion zur Reduzierung von Bewegung auf ihrem Gerät aktivieren, bevor sie die Animation betrachten.

Das prefers-reduced-motion CSS Media-Feature wird verwendet, um zu erkennen, ob ein Benutzer auf seinem Gerät eine Einstellung aktiviert hat, um die Menge an nicht wesentlicher Bewegung zu minimieren. Die Einstellung wird verwendet, um dem Browser auf dem Gerät mitzuteilen, dass der Benutzer ein Interface bevorzugt, das Bewegungsanimationen entfernt, reduziert oder ersetzt.

Solche Animationen können Unbehagen bei Personen mit vestibulären Bewegungsstörungen auslösen. Animationen wie das Skalieren oder Verschieben großer Objekte können Auslöser für vestibuläre Bewegungen sein.

css

@media (prefers-reduced-motion: reduce) {
  /* styles to apply if a user's device settings are set to reduced motion */
}

Syntax

no-preference: Gibt an, dass ein Benutzer auf dem Gerät keine Präferenz angegeben hat. Dieser Schlüsselwortwert wird als falsch ausgewertet.
reduce: Gibt an, dass ein Benutzer die Einstellung auf seinem Gerät für reduzierte Bewegung aktiviert hat. Der Schlüsselwortwert reduce wird als wahr ausgewertet; daher ist @media (prefers-reduced-motion) gleichbedeutend mit @media (prefers-reduced-motion: reduce).

Benutzerpräferenzen

Für Firefox wird die reduce-Anfrage beachtet, wenn:

In GTK/GNOME: Einstellungen > Barrierefreiheit > Sehen > Reduzierte Animation ist eingeschaltet.
- In älteren Versionen von GNOME: GNOME Tweaks > Allgemein (oder Darstellung, je nach Version) > Animationen ist ausgeschaltet.
- Alternativ fügen Sie gtk-enable-animations = false zum [Settings]-Block der GTK 3 Konfigurationsdatei hinzu.
In Plasma/KDE: Systemeinstellungen > Arbeitsbereich-Verhalten -> Allgemeines Verhalten > "Animationsgeschwindigkeit" ist ganz nach rechts auf "Sofort" eingestellt.
In Windows 10: Einstellungen > Erleichterte Bedienung > Anzeige > Animationen in Windows anzeigen.
In Windows 11: Einstellungen > Barrierefreiheit > Visuelle Effekte > Animationseffekte
In macOS: Systemeinstellungen > Bedienungshilfen > Anzeige > Bewegung reduzieren.
In iOS: Einstellungen > Bedienungshilfen > Bewegung.
In Android 9+: Einstellungen > Bedienungshilfen > Animationen entfernen.
In Firefox about:config: Fügen Sie eine Zahlpräferenz namens ui.prefersReducedMotion hinzu und setzen Sie deren Wert entweder auf 0 für volle Animation oder auf 1, um eine Präferenz für reduzierte Bewegung anzuzeigen. Änderungen an dieser Präferenz werden sofort übernommen.

Beispiele

Dieses Beispiel verwendet eine Skalierungsanimation, um prefers-reduced-motion zu demonstrieren. Wenn Sie die Einstellung zur Reduzierung von Bewegungen in den Barrierefreiheitseinstellungen auf Ihrem Gerät aktivieren, erkennt die Medienabfrage prefers-reduced-motion Ihre Präferenz und das CSS innerhalb der reduzierten Bewegungsregeln, mit derselben Spezifität aber später in der CSS-Quellenreihenfolge, wird Vorrang haben. Dadurch wird die Animation auf der Box zur dissolve-Animation abgeschwächt, die eine gedämpfte Animation ist und keinen vestibulären Bewegungsauslöser darstellt.

Die Skalierungsanimation abschwächen

HTML

html

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

CSS

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: #fff;
  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 Reduzierung von Bewegungen auf Ihrem Gerät aktivieren, um die Änderung der Animationsskalierung zu sehen. Dieses Beispiel verwendet die Hintergrundfarbe und die Linie über dem Text, um visuell hervorzuheben, wann die Keyframe-Animation in Reaktion auf die aktivierte oder deaktivierte Einstellung wechselt.

Spezifikationen

Specification
Media Queries Level 5 # prefers-reduced-motion

Browser-Kompatibilität

Siehe auch

Sec-CH-Prefers-Reduced-Motion HTTP Header Nutzer-Agent Client-Hinweis
Einführung in die Media Query für reduzierte Bewegung auf CSS-Tricks (2019)
Responsive Design für Bewegung im WebKit Blog (2017)