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 enthält eine skalierende Bewegung, die für einige Leser problematisch sein könnte. Leser mit vestibulären Bewegungsstörungen sollten möglicherweise die Funktion zur Reduzierung von Bewegungen auf ihrem Gerät aktivieren, bevor sie die Animation ansehen.

Die prefers-reduced-motion CSS Media-Feature wird verwendet, um zu erkennen, ob ein Benutzer eine Einstellung auf seinem Gerät aktiviert hat, um die Menge an nicht wesentlichen Bewegungen zu minimieren. Die Einstellung teilt dem Browser auf dem Gerät mit, dass der Benutzer eine Benutzeroberfläche bevorzugt, die 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 vestibuläre Bewegungsauslöser sein.

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

Syntax

no-preference

Gibt an, dass ein Benutzer keine Präferenz auf dem Gerät angegeben hat. Dieser Schlüsselwortwert wird als „false“ ausgewertet.

reduce

Gibt an, dass ein Benutzer die Einstellung auf seinem Gerät für reduzierte Bewegungen aktiviert hat. Dieser Schlüsselwortwert wird als „true“ ausgewertet.

Benutzerpräferenzen

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

  • In GTK/GNOME: Einstellungen > Barrierefreiheit > Sehen > Reduzierte Animation ist eingeschaltet.

    • In älteren Versionen von GNOME: GNOME Tweaks > Allgemein-Tab (oder Erscheinungsbild, je nach Version) > Animationen ist ausgeschaltet.
    • Alternativ gtk-enable-animations = false zum [Settings]-Block der GTK 3-Konfigurationsdatei hinzufügen.
  • In Plasma/KDE: Systemeinstellungen > Arbeitsbereich-Verhalten > Allgemeines Verhalten > "Animationsgeschwindigkeit" ist ganz 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: Eine numerische Einstellung mit dem Namen ui.prefersReducedMotion hinzufügen und ihren Wert auf entweder 0 für volle Animation oder auf 1 für eine Präferenz für reduzierte Bewegungen setzen. Änderungen an dieser Einstellung werden sofort wirksam.

Beispiele

Dieses Beispiel verwendet eine Skalierungsanimation, um prefers-reduced-motion zu demonstrieren. Wenn Sie die Einstellung für das Reduzieren von Bewegungen in den Barrierefreiheitseinstellungen Ihres Geräts aktivieren, erkennt die prefers-reduced-motion Media-Abfrage Ihre Präferenz, und die CSS-Regeln für reduzierte Bewegung, die dieselbe Spezifität haben, aber später in der CSS-Source-Order erscheinen, haben Vorrang. Dadurch wird die Animation der Box auf die dissolve-Animation abgeschwächt, die eine dezentere Animation ist und keine vestibulären Bewegungsauslöser hervorruft.

Abschwächung der Animation durch Skalieren

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) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

Ergebnis

Sie können die Einstellung zum Reduzieren von Bewegungen auf Ihrem Gerät aktivieren, um die Änderung der Animationsskalierung anzuzeigen. 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
prefers-reduced-motion media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch