Prefers-reduced-motion einfach erklärt

Was ist prefers-reduced-motion?

prefers-reduced-motion ist eine CSS Media Query, die erkennt, ob Nutzer „Bewegung reduzieren“ in ihren Systemeinstellungen aktiviert haben. Diese Funktion gibt es auf allen modernen Geräten – von iPhone über Android bis Mac und Windows.

Menschen aktivieren diese Einstellung aus verschiedenen Gründen: Bei vestibulären Störungen können Animationen Schwindel oder Übelkeit auslösen. Epilepsie-Patienten reagieren empfindlich auf schnelle Bewegungen. Andere wollen einfach Batterie sparen oder bevorzugen ruhigere Interfaces.

Was passiert auf der Apple MacBook Pro Seite?

Wie du im Video siehst, sobald du „Bewegung reduzieren“ aktivierst, wird die Animation im Hero-Bereich von Apple nicht mehr abgespielt.

Welche Menschen brauchen prefers-reduced-motion?

prefers-reduced-motion ist keine Randgruppen-Funktion, sondern hilft vielen Menschen im Alltag. Menschen mit vestibulären Störungen sind am stärksten betroffen – bei ihnen können Animationen Schwindel, Übelkeit oder sogar Panikattacken auslösen. Das Gleichgewichtsorgan im Innenohr reagiert extrem empfindlich auf visuelle Bewegungen.

Epilepsie-Patienten müssen besonders vorsichtig sein, da schnelle oder blitzende Animationen Anfälle auslösen können. Auch Menschen mit Migräne reagieren oft empfindlich auf visuelle Reize und bevorzugen ruhigere Interfaces.

Aber nicht nur Menschen mit gesundheitlichen Einschränkungen nutzen diese Funktion: Viele aktivieren sie, um Batterie zu sparen, mobile Daten zu schonen oder die Performance auf älteren Geräten zu verbessern. Andere bevorzugen einfach ruhigere, ablenkungsfreie Interfaces beim Arbeiten.

Die wichtigste Erkenntnis: Wenn jemand „Bewegung reduzieren“ aktiviert, hat diese Person einen wichtigen Grund dafür – meist geht es um Gesundheit und Wohlbefinden.

So aktivierst du „Bewegung reduzieren“

macOS: Systemeinstellungen → Bedienungshilfen → Anzeige → „Bewegung reduzieren“
Windows: Einstellungen → Barrierefreiheit → Visuelle Effekte → „Animationseffekte“ aus“

Probiere es selbst: Aktiviere die Einstellung und besuche apple.com/macbook-pro – du siehst sofort den Unterschied!

prefers-reduced-motion in CSS verwenden

/* Standard: Sanfte Animation */
.card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Für Nutzer mit "Bewegung reduzieren" - KEINE Animation */
@media (prefers-reduced-motion: reduce) {
  .card {
    opacity: 1; /* Sofort sichtbar */
    transform: none; /* Keine Bewegung */
    animation: none; /* Keine Animation */
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Zweck: Einfacher Vergleich zwischen Animation und reduzierter Version

DevTools-Modus „prefers-reduced-motion“ simulieren

Ihr könnt in den DevTools ganz einfach simulieren, wie eure Website aussieht, wenn Nutzer die Einstellung „prefers-reduced-motion“ aktiviert haben. Geht dazu auf More tools → Rendering und aktiviert dort die Option „Emulate CSS media feature prefers-reduced-motion“.

Der beste Ansatz: Progressive Enhancement

Statt Animationen wegzunehmen, füge sie nur für Nutzer hinzu, die sie möchten. Das ist der moderne, respektvolle Ansatz:

1. Starte ohne Animationen (alle sehen Inhalte sofort)
2. Füge Animationen nur bei no-preference hinzu
3. Teste mit aktivierter „Bewegung reduzieren“ Einstellung