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 ⁨Januar 2020⁩.

Warnung: Ein eingebettetes Beispiel am Ende dieser Seite enthält eine Skalierungsbewegung, die für einige Leser problematisch sein kann. Leser mit vestibulären Bewegungsstörungen sollten möglicherweise die Funktion zur Bewegungsreduzierung auf ihrem Gerät aktivieren, bevor sie die Animation ansehen.

Das prefers-reduced-motion CSS Medienmerkmal wird verwendet, um zu erkennen, ob ein Benutzer auf seinem Gerät eine Einstellung aktiviert hat, um die Menge nicht wesentlicher Bewegungen zu minimieren. Die Einstellung wird verwendet, um dem Browser auf dem Gerät mitzuteilen, dass der Benutzer eine Benutzeroberfläche bevorzugt, die bewegungsbasierte Animationen entfernt, reduziert oder ersetzt.

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

Syntax

no-preference: Gibt an, dass ein Benutzer auf dem Gerät keine Präferenz 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) gleichbedeutend mit @media (prefers-reduced-motion: reduce).

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-Registerkarte (oder Erscheinungsbild 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 > Arbeitsbereichsverhalten -> Allgemeines Verhalten > "Animationsgeschwindigkeit" ist vollständig nach rechts auf "Sofort" gesetzt.
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 > Barrierefreiheit > Animationen entfernen.
In Firefox about:config: Fügen Sie eine numerische 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 anzugeben. Änderungen an dieser Präferenz werden sofort wirksam.

Beispiele

Dieses Beispiel verwendet eine Skalierungsanimation zum Zweck der Demonstration von prefers-reduced-motion. Wenn Sie die Einstellung zur Bewegungsreduzierung in den Barrierefreiheitseinstellungen auf Ihrem Gerät aktivieren, erkennt die prefers-reduced-motion-Medienabfrage Ihre Präferenz, und das CSS innerhalb der Regeln für reduzierte Bewegung, mit derselben Spezifität, jedoch später in der CSS-Quellreihenfolge, wird Vorrang haben. Dadurch wird die Animation auf dem Kasten auf die dissolve-Animation abgeschwächt, was eine gedämpftere Animation ist, die kein Auslöser für vestibuläre Bewegungsstörungen ist.

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: 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 der Skalierungsanimation 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 umschaltet.

Spezifikationen

Specification
Media Queries Level 5 # prefers-reduced-motion

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden