Animationen, die niemandem den Tag verderben

Jemand öffnet deine Startseite, scrollt zwei Zentimeter, und das Hintergrundbild schiebt sich langsamer nach oben als der Text davor. Auf den meisten Bildschirmen sieht dieser Effekt teuer aus. Bei einem Teil deiner Besucher meldet sich in genau diesem Moment das Gleichgewichtsorgan.

Die Grundabsicherung dagegen passt in einen einzigen CSS-Block. Er fragt ab, ob jemand im Betriebssystem reduzierte Bewegung eingestellt hat, und nimmt für diese Besucher die Animationen deiner Seite zurück. Hier ist er vollständig und einbaufertig, er gehört ans Ende deines Stylesheets.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Was in den Klammern steht, gilt nur für die Menschen, die diesen Schalter gesetzt haben. Alle anderen sehen deine Seite unverändert, mit jedem Effekt, den du gebaut hast. Du baust also nichts ab, du legst eine zweite, ruhigere Fassung daneben.

Zeile für Zeile

@media (prefers-reduced-motion: reduce) ist die Abfrage selbst. Der Browser beantwortet sie aus der Systemeinstellung des Geräts.
*, *::before, *::after fasst jedes Element an, dazu die beiden erzeugten Pseudo-Elemente. Gerade in denen stecken oft dekorative Animationen, Ladepunkte und Pfeile.
animation-duration: 0.01ms kürzt Keyframe-Animationen auf praktisch null. Der Wert ist absichtlich nicht null, damit Skripte, die auf das Ereignis animationend warten, verlässlich weiterlaufen.
animation-iteration-count: 1 beendet Endlosschleifen nach einem Durchlauf. Das trifft rotierende Symbole, pulsierende Punkte und Lauftexte.
transition-duration: 0.01ms macht aus weichen Zustandswechseln harte. Der Hover-Effekt passiert weiterhin, nur eben sofort.
scroll-behavior: auto nimmt das sanfte Scrollen zurück, das viele Sprungmarken auslösen. Eine Seite, die über den halben Bildschirm fliegt, ist einer der stärksten Auslöser überhaupt.
!important steht hier zu Recht, weil der Block auch Regeln aus Themes und Frameworks überstimmen muss, an die du sonst nicht herankommst.

Was Bewegung im Körper auslöst

Das Innenohr meldet dem Gehirn, ob der Körper sich bewegt. Die Augen melden dasselbe. Widersprechen sich die beiden Meldungen, weil auf dem Bildschirm etwas fährt, während der Körper still auf dem Stuhl sitzt, reagieren manche Menschen mit Schwindel, Übelkeit oder Kopfschmerz. Betroffen sind unter anderem Menschen mit Migräne, mit einer Erkrankung des Gleichgewichtsorgans oder mit einer frischen Gehirnerschütterung. Der Seitenbesuch dauert zwei Minuten, das flaue Gefühl danach oft deutlich länger.

Wie stark die Reaktion ausfällt, hängt an der bewegten Fläche und an der Geschwindigkeit. Ein Parallax über das ganze Fenster, ein Zoom auf die komplette Seite oder ein automatisch startendes Video mit Kameraschwenk sind die harten Fälle. Ein Button, der beim Überfahren in 150 Millisekunden die Farbe wechselt, ist keiner. Deine Seite muss also nicht still stehen, du entschärfst nur die drei oder vier großen Bewegungen, die du ohnehin kennst.

Die Einstellung, die deine Besucher längst gesetzt haben

Wer empfindlich auf Bewegung reagiert, hat das meistens schon im Betriebssystem hinterlegt, lange bevor er bei dir landet. Der Schalter heißt überall ähnlich.

macOS: Systemeinstellungen, Bedienungshilfen, Anzeige, "Bewegung reduzieren"
iPhone und iPad: Einstellungen, Bedienungshilfen, Bewegung, "Bewegung reduzieren"
Windows 11: Einstellungen, Barrierefreiheit, Visuelle Effekte, "Animationseffekte"
Android: Einstellungen, Bedienungshilfen, "Animationen entfernen", je nach Hersteller etwas anders benannt

Chrome, Firefox, Safari und Edge reichen diesen Wunsch seit Jahren an jede aufgerufene Seite weiter. Deine Seite muss ihn nur noch beantworten.

Warum "alles aus" die schlechtere Antwort ist

Der Block von oben ist ein Sicherheitsnetz, kein Feinschliff. Er entfernt Bewegung vollständig, und das kostet dich etwas. Animationen erklären nämlich Zusammenhänge: Ein Menü, das aufklappt, zeigt, woher es kommt, ein Dialog, der einblendet, zeigt, dass er über der Seite liegt. Springt beides ohne jeden Übergang ins Bild, verlieren manche Menschen den Faden, darunter Menschen mit Aufmerksamkeits- oder Wahrnehmungsstörungen.

Für deine wichtigsten drei bis fünf Animationen lohnt sich deshalb Handarbeit. Mach sie kürzer, mach die zurückgelegte Strecke kleiner, und blende lieber ein, statt zu schieben. Eine Überblendung von durchsichtig nach sichtbar reizt das Gleichgewichtsorgan kaum, weil sich nichts über die Fläche bewegt. Verschieben, Drehen und Skalieren tun das sehr wohl. Die Rückmeldung bleibt also erhalten, der Weg fällt weg.

Eine Produktkarte, vorher und nachher

Das verbreitete Muster ist eine Karte, die beim Überfahren nach oben springt und größer wird.

.karte {
  transition: transform 320ms ease, box-shadow 320ms ease;
}

.karte:hover,
.karte:focus-within {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

Weiter unten im selben Stylesheet kommt die ruhige Fassung. Die Karte behält ihre Rückmeldung, fährt aber nicht mehr durch die Gegend.

@media (prefers-reduced-motion: reduce) {
  .karte {
    transition-property: box-shadow;
    transition-duration: 200ms !important;
  }

  .karte:hover,
  .karte:focus-within {
    transform: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    outline: 2px solid #118378;
  }
}

Das !important hinter der Dauer ist kein Schludern, sondern Pflicht. Das Sicherheitsnetz weiter oben kürzt mit dem Sternchen-Selektor jede Transition auf 0,01 Millisekunden, und zwar ebenfalls mit !important. Eine handgemachte Regel für eine einzelne Karte verliert dagegen, obwohl sie später im Stylesheet steht, solange sie nicht selbst !important trägt. Wer das übersieht, feilt eine Abstufung zurecht, die im Browser nie läuft.

Beachte außerdem :focus-within in beiden Fassungen. Ohne ihn bekommt nur die Maus eine Rückmeldung, die Tastatur geht leer aus.

Karussells und Videos, die von allein loslaufen

Bewegung, die niemand ausgelöst hat, ist der unangenehmere Fall. Die gängige Prüfregel dafür lautet, dass alles, was automatisch läuft und länger als fünf Sekunden dauert, eine Möglichkeit zum Anhalten, Ausblenden oder Beenden braucht. Ein Karussell, das alle vier Sekunden weiterschaltet, fällt darunter, ein Ticker im Kopfbereich ebenfalls. Der Pause-Knopf gehört sichtbar ins Karussell und nicht hinter einen Hover-Effekt, sonst findet ihn mit der Tastatur niemand.

Bei einem Video im Kopfbereich hilft ein anderer Handgriff. Nimm autoplay aus dem Markup, gib dem Element ein Standbild mit und starte es per Skript nur dann, wenn keine reduzierte Bewegung gewünscht ist.

<video id="hero" src="/hero.mp4" poster="/hero.jpg" muted loop playsinline controls></video>

const video = document.querySelector('#hero');
const reduziert = window.matchMedia('(prefers-reduced-motion: reduce)');

if (video && !reduziert.matches) {
  video.play().catch(() => {});
}

Das Skript gehört hinter das Video-Element oder in eine Datei mit defer, sonst findet es das Element noch nicht. Ohne muted lassen die Browser den Start ohnehin nicht zu, und das catch fängt ab, wenn sie ihn trotzdem verweigern. Wer den Schalter gesetzt hat, sieht ein ruhiges Standbild mit Abspielknopf.

Blinken hat eine harte Grenze

Bei blinkenden Inhalten hört die Abwägung auf. Schnelles Flackern kann bei Menschen mit fotosensitiver Epilepsie einen Anfall auslösen. Die anerkannte Grenze liegt bei drei Blitzen pro Sekunde, und was darüber liegt, gehört nicht auf eine Website. In der Praxis heißt das, kein blinkendes Rabatt-Abzeichen und kein altes animiertes GIF mit Stroboskop-Effekt. Bist du unsicher, ob dein Element darunter bleibt, lass es nicht blinken. Ein Rabatt wird nicht dadurch besser, dass er zuckt.

Der Zwei-Minuten-Test

Schalte in deinem System die reduzierte Bewegung ein, mit dem Weg aus der Liste weiter oben.
Öffne deine Startseite und lade sie hart neu, unter Windows mit Strg und F5, am Mac mit Cmd, Shift und R.
Scrolle einmal ruhig von oben nach unten und wieder zurück. Alles, was sich dabei anders schnell bewegt als der Text, hast du gefunden.
Nimm die Hände von Maus und Tastatur und zähle bis zehn. Was sich in dieser Zeit von allein bewegt, braucht einen sichtbaren Knopf zum Anhalten.
Klick einen Menüpunkt an, der zu einem Abschnitt derselben Seite springt. Fliegt die Seite dorthin, greift deine Zeile mit scroll-behavior noch nicht.
Schalte die Einstellung wieder aus und lade erneut hart neu. Kommen deine Animationen nicht zurück, steht der Block außerhalb der Abfrage.

Wer den Schalter gar nicht kennt

Die Systemeinstellung hilft nur denen, die von ihr wissen. Viele Menschen merken zwar, dass ihnen bei bestimmten Seiten schlecht wird, bringen das aber nie mit einer Option in den Bedienungshilfen zusammen. Deshalb legt das Accessify-Widget einen eigenen Schalter für Bewegung direkt auf die Seite, den man ohne Umweg über das Betriebssystem umlegt. Der CSS-Block bleibt trotzdem die Grundlage, weil er greift, bevor jemand irgendetwas anklickt. Gehst du beide Wege, läuft dein teurer Parallax für die einen weiter und steht für die anderen einfach still.