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 manche Leser problematisch sein kann. 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.

Das 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. Diese Einstellung teilt dem Browser auf dem Gerät mit, dass der Benutzer eine Benutzeroberfläche bevorzugt, die animationsbasierte Bewegungen entfernt, reduziert oder ersetzt.

Solche Animationen können bei Personen mit vestibulären Bewegungsstörungen Unbehagen auslösen. Animationen wie das Skalieren oder Schwenken großer Objekte können vestibuläre Bewegungs-Auslö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 bewertet.
reduce: Gibt an, dass ein Benutzer die Einstellung zur Bewegungsreduktion auf seinem Gerät aktiviert hat. Dieser Schlüsselwortwert wird als true bewertet.

Benutzerpräferenzen

Im 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 (oder Darstellung, je nach Version) > Animationen sind 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 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 Nummern-Prä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 wirken sich sofort aus.

Beispiele

Dieses Beispiel verwendet eine skalierende Animation, um prefers-reduced-motion zu demonstrieren. Wenn Sie die Einstellung zur Reduzierung von Bewegungen in den Barrierefreiheitspräferenzen auf Ihrem Gerät aktivieren, wird die prefers-reduced-motion-Media-Query Ihre Präferenz erkennen und die CSS-Regeln der reduzierten Bewegung mit derselben Spezifität aber spätere Reihenfolge in der CSS-Quellreihenfolge, wird Vorrang haben. Als Ergebnis wird die Animation auf dem Kasten zur dissolve-Animation abgeschwächt, einer gedämpfteren Animation, die kein vestibulärer Bewegungs-Auslöser ist.

Abschwächung der Animationenskalierung

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;
  }
}

.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 Änderungen in der Animationenskalierung zu betrachten. Dieses Beispiel verwendet die Hintergrundfarbe und die Linie über dem Text, um visuell hervorzuheben, wenn die Keyframe-Animation als Reaktion auf die aktivierte oder deaktivierte Einstellung wechselt.

Spezifikationen

Specification
Media Queries Level 5 # prefers-reduced-motion

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Sec-CH-Prefers-Reduced-Motion HTTP-Header User Agent Client Hint
Eine Einführung in die Reduced Motion Media Query auf CSS-Tricks (2019)
Responsives Design für Bewegung im WebKit Blog (2017)