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

Die prefers-reduced-motion CSS Medienfunktion 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 soll dem Browser auf dem Gerät anzeigen, dass der Benutzer eine Oberfläche bevorzugt, die bewegungsbasierte Animationen entfernt, reduziert oder ersetzt.

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

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 eine reduzierte Bewegung aktiviert hat. Der Schlüsselwortwert reduce wird als true ausgewertet; daher ist @media (prefers-reduced-motion) gleichbedeutend mit @media (prefers-reduced-motion: reduce).

Benutzereinstellungen

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

In GTK/GNOME: Einstellungen > Barrierefreiheit > Sehen > Reduzierte Animationen ist aktiviert.
- In älteren Versionen von GNOME, GNOME Tweaks > Allgemein-Tab (oder Darstellung, je nach Version) > Animationen ist deaktiviert.
- Alternativ fügen Sie gtk-enable-animations = false im [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 > Barrierefreiheit > Anzeige > Bewegung reduzieren.
In iOS: Einstellungen > Barrierefreiheit > Bewegung.
In Android 9+: Einstellungen > Barrierefreiheit > Animationen entfernen.
In Firefox about:config: Fügen Sie eine numerische Einstellung mit dem Namen ui.prefersReducedMotion hinzu und setzen Sie ihren Wert entweder auf 0 für volle Animation oder auf 1, um eine Präferenz für reduzierte Bewegung zu kennzeichnen. Änderungen an dieser Einstellung werden sofort wirksam.

Beispiele

Dieses Beispiel verwendet eine skalierende Animation, um prefers-reduced-motion zu demonstrieren. Wenn Sie die Einstellung zur Reduzierung von Bewegungen in den Barrierefreiheitseinstellungen auf Ihrem Gerät aktivieren, wird die prefers-reduced-motion-Media-Query Ihre Präferenz erkennen, 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 dem Kasten zur dissolve-Animation abgemildert, die eine gedämpftere Animation ist, die kein Auslöser für vestibuläre Bewegungen ist.

Die skalierende Animation abmildern

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 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 das Aktivieren oder Deaktivieren der Einstellung wechselt.

Spezifikationen

Specification
Media Queries Level 5 # prefers-reduced-motion

Browser-Kompatibilität

Siehe auch

Sec-CH-Prefers-Reduced-Motion HTTP-Header User-Agent-Client-Hinweis
Eine Einführung in die Medienabfrage zur Reduzierung von Bewegungen 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