Eine Karte, die beim Scrollen sanft von unten einschwebt, ein Bildwechsler im Kopf der Startseite, ein Laufband mit Kundenlogos, ein Zähler, der bis zum Ende einer Aktion herunterläuft: Bewegung ist auf den Websites kleiner Betriebe beliebt, weil sie eine Seite lebendig wirken lässt. Sie kann aber auch das Gegenteil bewirken. Wer langsam liest, verliert im wechselnden Bild den Faden, wer sich schwer konzentrieren kann, wird abgelenkt, und manche Menschen bekommen von großflächiger Bewegung Schwindel oder Kopfschmerzen. Die Web Content Accessibility Guidelines (WCAG) des W3C ziehen dafür klare Grenzen, am deutlichsten mit einer Frist von fünf Sekunden für Bewegung, die von selbst startet (W3C, WCAG 2.2). Dieser Beitrag zeigt, wofür Bewegung auf einer Website taugt, welche Regeln für Einblendungen, Slider, Laufbänder und Zähler gelten, wie die Systemeinstellung „Bewegung reduzieren“ greift und wie Sie Animationen so bauen, dass sie weder Besucher noch Ladezeit belasten.
Wozu Bewegung auf einer Website taugt
Bewegung ist ein Signal. Das Auge reagiert auf Veränderung schneller als auf Farbe oder Schriftgröße, und deshalb wirkt sie stark, im Guten wie im Schlechten.
Gut eingesetzt beantwortet eine Bewegung eine Frage, die der Besucher gerade hat: Hat mein Tippen etwas ausgelöst? Woher kommt das Menü? Was ist neu auf der Seite? Schlecht eingesetzt beantwortet sie eine Frage, die niemand gestellt hat, und zieht den Blick von dem Text weg, den der Besucher eigentlich lesen wollte. Vier Aufgaben erfüllt Bewegung auf der Website eines Betriebs gut:
- Rückmeldung geben: Ein Knopf, der beim Antippen kurz nachgibt, oder ein Formular, das nach dem Absenden sichtbar in eine Bestätigung übergeht, zeigt, dass etwas passiert ist.
- Herkunft zeigen: Ein Menü, das von der Seite hereinkommt, oder eine aufklappende Antwort bei den häufigen Fragen macht klar, woher der neue Inhalt kommt und wie er wieder verschwindet.
- Reihenfolge ordnen: Leistungskarten, die beim Hereinscrollen kurz nacheinander erscheinen, lesen sich als Folge statt als Block.
- Ankommen markieren: Eine einzelne, ruhige Einblendung am Beginn eines Abschnitts setzt beim Scrollen einen Takt, ohne den Inhalt zu verzögern.
Allen vier Aufgaben ist gemeinsam, dass die Bewegung kurz ist, einmal abläuft und danach Ruhe herrscht. Sie begleitet den Inhalt, sie ersetzt ihn nicht. Schwierig wird es dort, wo Bewegung zum Dauerzustand wird: der Bildwechsler, der alle paar Sekunden eine neue Botschaft zeigt, das Laufband, das ohne Ende über den Bildschirm zieht, der Hintergrund, der sich beim Scrollen gegen den Vordergrund verschiebt. Solche Elemente konkurrieren mit dem eigentlichen Inhalt um Aufmerksamkeit, und weil das Auge auf Bewegung anspringt, gewinnen sie diesen Wettbewerb oft. Als Faustregel gilt: Bewegung, die eine Frage des Besuchers beantwortet, darf bleiben; Bewegung, die nur Aufmerksamkeit erzeugen soll, braucht einen guten Grund, eine kurze Dauer und einen Weg, sie anzuhalten. Was in den ersten Bildschirm einer Startseite gehört und was ihn verstopft, beschreibt der Beitrag zum ersten Bildschirm der Startseite.
Was WCAG 2.2 zu Bewegung sagt
Die WCAG sind kein Gesetz, sondern ein technischer Maßstab des W3C, an dem sich Barrierefreiheit prüfen lässt.
Gesetze und Normen verweisen darauf; ob und wie das Barrierefreiheitsstärkungsgesetz Ihren Betrieb erfasst, erklärt der Beitrag zur barrierefreien Website nach BFSG. Die Erfolgskriterien der WCAG sind in Stufen geordnet: A ist die Grundstufe, AA baut darauf auf und schließt A ein, AAA geht darüber hinaus (W3C, WCAG 2.2). Für Bewegung sind vor allem drei Kriterien maßgeblich, und sie liegen auf unterschiedlichen Stufen.
Tabelle waagerecht wischen
| Kriterium | Stufe | Worum es geht | Was es für Ihre Seite heißt |
|---|---|---|---|
| 2.2.2 Pause, Stop, Hide | A | Bewegung, Blinken, Laufschrift und selbst aktualisierende Inhalte, die von allein starten und neben anderem Inhalt stehen | Läuft Bewegung länger als fünf Sekunden, braucht der Besucher eine Möglichkeit, sie anzuhalten, zu stoppen oder auszublenden; bei selbst aktualisierenden Inhalten gilt das unabhängig von der Dauer |
| 2.3.1 Three Flashes or Below Threshold | A | Blitze und starkes Flackern | Nichts auf der Seite blitzt öfter als dreimal pro Sekunde, es sei denn, die Blitze bleiben unter den festgelegten Schwellen |
| 2.3.3 Animation from Interactions | AAA | Bewegung, die durch eine Handlung ausgelöst wird, etwa durch Scrollen oder Klicken | Solche Bewegung lässt sich abschalten, sofern sie für Funktion oder Aussage nicht wesentlich ist |
Das Kriterium 2.2.2 steht auf der Grundstufe A und gehört damit zu jeder Konformität nach AA. Sein Wortlaut nennt für Bewegung, Blinken und Laufschrift drei Bedingungen: Sie startet automatisch, sie dauert länger als fünf Sekunden, und sie steht parallel zu anderem Inhalt (W3C, WCAG 2.2). Treffen alle drei zu, braucht der Besucher einen Mechanismus, um sie anzuhalten, zu stoppen oder auszublenden, es sei denn, die Bewegung ist Teil einer Tätigkeit, für die sie wesentlich ist. Für Inhalte, die sich selbst aktualisieren, etwa eine Nachrichtenzeile, die in festen Abständen wechselt, gilt dieselbe Pflicht ohne die Ausnahme für kurze Dauer; hier darf der Besucher alternativ die Häufigkeit der Aktualisierung einstellen (W3C, Understanding WCAG 2.2). Warum gerade fünf Sekunden? Das W3C begründet die Grenze damit, dass diese Zeit lang genug ist, um Aufmerksamkeit zu wecken, aber kurz genug, dass man die Ablenkung abwarten kann (W3C, Understanding WCAG 2.2). Nach den Erläuterungen des W3C startet eine Bewegung auch dann von selbst, wenn sie durch eine indirekte Handlung ausgelöst wird, etwa durch das Hereinscrollen eines Elements oder das Überfahren mit der Maus (W3C, Understanding WCAG 2.2). Eine Einblendung beim Scrollen fällt also grundsätzlich unter das Kriterium, ist aber nicht betroffen, solange sie nach weniger als fünf Sekunden zur Ruhe kommt. Für Einblendungen wird damit das Kriterium 2.3.3 wichtiger, das sich ausdrücklich mit Bewegung durch Handlungen befasst.
„Bewegung reduzieren“ ist Stufe AAA
Wer auf „Bewegung reduzieren“ hört
Smartphones, Tablets und Computer haben in ihren Bedienungshilfen eine Einstellung, mit der Menschen weniger Bewegung anfordern können. Eine Website liest sie über die CSS-Abfrage prefers-reduced-motion aus.
Der Wert reduce bedeutet nach der Spezifikation, dass der Nutzer eine Oberfläche bevorzugt, die Bewegungsanimationen entfernt oder ersetzt, welche bei vestibulärer Bewegungsempfindlichkeit Unbehagen oder bei Aufmerksamkeitsstörungen Ablenkung auslösen (W3C, Media Queries Level 5). Vestibulär meint das Gleichgewichtsorgan im Innenohr; Reaktionen reichen nach dem W3C von Schwindel über Übelkeit bis zu Kopfschmerzen (W3C, Understanding WCAG 2.2). Browser unterstützen die Abfrage breit, im CSS genutzt wird sie trotzdem nur auf etwa der Hälfte der Seiten. Der Web Almanac des HTTP Archive hat für 2025 ausgewertet, welche Abfragen auf Nutzereinstellungen im CSS von Websites vorkommen: prefers-reduced-motion ist die am häufigsten genutzte, sie erscheint auf 49,99 Prozent der Desktop- und 50,55 Prozent der Mobilseiten (HTTP Archive Web Almanac 2025). Umgekehrt heißt das: Im CSS rund jeder zweiten Seite kommt die Abfrage nicht vor. Hat eine solche Seite Animationen und prüft die Einstellung auch nicht per Skript, laufen diese bei allen Besuchern gleich, auch bei denen, die ihr Gerät ausdrücklich um weniger Bewegung gebeten haben. Ein Muster, das von Anfang an beide Fälle bedient, sieht so aus:
/* Ausgangslage: Inhalt ist sichtbar, auch ohne Skript */
.reveal {
opacity: 1;
transform: none;
}
/* Nur bei laufendem Skript und ohne Wunsch nach weniger Bewegung */
@media (prefers-reduced-motion: no-preference) {
.js .reveal {
transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.js .reveal:not(.in-view) {
opacity: 0;
transform: translateY(24px);
}
}Zwei Dinge machen dieses Muster robust. Erstens ist der Ausgangszustand sichtbar: Erst wenn ein Skript der Seite die Klasse js gesetzt hat und der Besucher keine reduzierte Bewegung wünscht, werden die Elemente vor dem Einblenden versteckt. Fällt das Skript aus oder ist die Einstellung aktiv, steht der Inhalt sofort da. Zweitens verändert die Einblendung nur Deckkraft und Lage. Ein häufiger Fehler ist das Gegenteil: Inhalte stehen im Stylesheet auf unsichtbar und warten auf ein Skript, das sie hervorholt. Lädt das Skript langsam oder gar nicht, bleibt der Abschnitt leer, und der Besucher sieht eine Lücke.
Reduzieren heißt nicht verbieten
Einblendungen beim Scrollen: Dauer, Verzögerung, Kurve
Eine verbreitete Bewegung auf Betriebs-Websites ist die Einblendung beim Scrollen: Ein Abschnitt kommt ins Bild, und seine Elemente erscheinen mit einer kurzen Bewegung. Ob das ruhig oder unruhig wirkt, entscheiden drei Stellgrößen und eine Handvoll Regeln.
Dauer
Wie lange die Bewegung läuft. Kurze Bewegungen wirken entschieden, lange wirken träge und halten den Leser auf. Die Vorgabewerte in XICflow liegen je nach Bewegung zwischen 550 und 800 Millisekunden (XICflow-Dokumentation).
Verzögerung
Die Wartezeit vor dem Start. Sie staffelt Elemente, sodass Karten nacheinander statt gleichzeitig erscheinen. Knapp gewählt ordnet sie, großzügig gewählt lässt sie den Besucher auf leere Flächen schauen.
Kurve
Der Verlauf der Geschwindigkeit, im Englischen Easing. Eine Kurve, die zügig startet und weich ausläuft, wirkt natürlich, weil Dinge in der Wirklichkeit abbremsen, bevor sie zur Ruhe kommen. Gleichförmige Bewegung wirkt dagegen mechanisch.
- Eine einheitliche Bewegungsart je Seite statt wechselnder Effekte von Abschnitt zu Abschnitt, die wie ein Musterkatalog wirken.
- Nur Elemente bewegen, die einen Abschnitt eröffnen oder eine Folge bilden: Überschrift, Karten, Bild. Fließtext erscheint ohne eigene Bewegung, damit er sofort lesbar ist.
- Jede Einblendung läuft genau einmal. Wer zurückscrollt, sieht den fertigen Abschnitt und nicht dieselbe Bewegung noch einmal.
- Kurze Strecken statt großer Wege: Die Bewegung „Von unten einblenden“ in XICflow verschiebt ein Element um 24 Pixel (XICflow-Dokumentation) und wirkt damit wie ein Atemzug; ein Flug quer über den Bildschirm wirkt dagegen wie ein Ereignis und setzt Menschen mit Bewegungsempfindlichkeit zu.
- Formulare, Preise und Kontaktdaten stehen ohne Verzögerung da. Was ein Besucher für seine Anfrage braucht, wartet nicht auf eine Animation.
Slider, Laufbänder und Zähler: die Fünf-Sekunden-Grenze
Anders als eine Einblendung laufen Bildwechsler, Laufbänder und Zähler weiter, während der Besucher liest. Genau für diese Fälle ist das Kriterium 2.2.2 gedacht.
Ein Bildwechsler, der von selbst alle paar Sekunden die nächste Folie zeigt, startet automatisch, steht neben anderem Inhalt und hört nicht nach fünf Sekunden auf; er braucht deshalb eine Möglichkeit, ihn anzuhalten (W3C, WCAG 2.2). Dasselbe gilt für ein Laufband mit Leistungen oder Kundenlogos, das endlos durchzieht, und für ein Hintergrundvideo in Schleife. Wie Videos mit Untertiteln und ohne Ladeballast auf die Seite kommen, zeigt der Beitrag zu Videos auf der Website. Entscheidend ist, wie die Pause aussieht. Das W3C stellt klar, dass eine Animation, die nur so lange anhält, wie der Fokus auf ihr liegt, und danach wieder anläuft, nicht als Mechanismus zum Pausieren gilt, weil sie die Seite während der Pause unbenutzbar macht (W3C, Understanding WCAG 2.2). Für ein Laufband, das nur unter dem Mauszeiger stillsteht, gilt dieselbe Überlegung, und wer mit dem Finger oder der Tastatur bedient, hat ohnehin keinen Mauszeiger. Tragfähig ist eine sichtbare Schaltfläche „Anhalten“, die per Tastatur erreichbar ist und ihren Zustand ansagt, oder eine Bewegung, die nach spätestens fünf Sekunden von selbst endet. Hat eine Seite mehrere bewegte Elemente, empfiehlt das W3C eine einzige Steuerung, die alle zugleich anhält (W3C, Understanding WCAG 2.2).
Tabelle waagerecht wischen
| Element | Startet von selbst? | Was 2.2.2 verlangt |
|---|---|---|
| Einblendung beim Hereinscrollen | Ja, durch das Scrollen | Nichts, solange sie nach höchstens fünf Sekunden zur Ruhe kommt |
| Bildwechsler mit automatischem Wechsel | enthalten | Anhalten, Stoppen oder Ausblenden |
| Bildwechsler, der nur auf Klick weiterblättert | nicht enthalten | Keine Pause nötig; dass die Pfeile per Tastatur bedienbar sind, verlangt das Kriterium 2.1.1 |
| Laufband mit Logos oder Leistungen | enthalten | Anhalten, Stoppen oder Ausblenden |
| Countdown bis zum Aktionsende | Ja, er aktualisiert sich selbst | Anhalten, Ausblenden oder einstellbare Häufigkeit, ohne Ausnahme für kurze Dauer |
| Ladeanzeige, während nichts bedienbar ist | enthalten | Kann als wesentlich gelten, wenn sie Fortschritt anzeigt |
| Hintergrundvideo in Schleife | enthalten | Anhalten, Stoppen oder Ausblenden |
Bei Bildwechslern lohnt außerdem die Frage, ob sie ihren Platz wert sind. Was erst auf einer späteren Folie steht, sieht nur, wer wartet oder weiterklickt; für die Kernaussage einer Seite ist das ein unsicherer Ort. Wer Kundenstimmen oder Projektbilder zeigen will, fährt mit einem Wechsler zum Durchblättern gut: Der Besucher entscheidet, wann die nächste Folie kommt, und 2.2.2 greift gar nicht erst. Dann zählen andere Punkte, etwa dass die Pfeile per Tastatur erreichbar sind und einen gut sichtbaren Fokus haben. Welche Kontraste Knöpfe und Fokusrahmen brauchen, erklärt der Beitrag zu Markenfarben mit ausreichendem Kontrast.
Ein Zähler ist auch Bewegung
Blitze, Parallaxe und große Bewegungen
Eine Grenze ist härter als alle anderen: Nichts auf einer Seite darf öfter als dreimal pro Sekunde blitzen, es sei denn, die Blitze liegen unter den festgelegten Schwellen für allgemeine und rote Blitze (W3C, WCAG 2.2).
Hier geht es nicht um Ablenkung, sondern um Gesundheit; bei Menschen mit fotosensibler Epilepsie können Inhalte, die in bestimmten Frequenzen blitzen, einen Anfall auslösen (W3C, Understanding WCAG 2.2). Eine Schaltfläche zum Abschalten hilft hier nicht, weil ein Anfall schneller eintreten kann, als die meisten Menschen sie bedienen könnten. Auf Betriebs-Websites betrifft das vor allem eingebundene Videos mit Stroboskop-Effekten, blinkende Hinweise im Kopfbereich und animierte Grafiken, die zwischen hellen und dunklen Bildern hin- und herspringen. Weniger dramatisch, aber für Betroffene ebenso spürbar sind große Bewegungen: Parallaxe, bei der Hintergrund und Vordergrund beim Scrollen unterschiedlich schnell laufen, Zoom-Effekte über die ganze Bildschirmbreite, Abschnitte, die sich beim Scrollen drehen oder kippen. Das W3C nennt Parallaxe ausdrücklich als Beispiel für Bewegung, die oft nicht nötig ist, und beschreibt die möglichen Folgen bei Störungen des Gleichgewichtssinns deutlich: Übelkeit, Migräne und unter Umständen die Notwendigkeit, sich zur Erholung hinzulegen (W3C, Understanding WCAG 2.2). Für solche Effekte gilt deshalb: sparsam, klein und bei aktiver Einstellung „Bewegung reduzieren“ vollständig aus.
Was bleiben darf
Bewegung, die die Ladezeit nicht kostet
Animationen wirken auch auf die Technik. Bewegungen über die CSS-Eigenschaften transform und opacity ändern nur das Aussehen eines Elements, nicht das Layout der Seite.
Wer dagegen Breite, Höhe, Abstände oder die Lage über top und left animiert, zwingt den Browser, das Layout neu zu berechnen, und schiebt dabei umliegende Inhalte herum. Der Web Almanac nennt solche Animationen nicht zusammengesetzt (non-composited) und beschreibt, dass sie zu Layoutverschiebungen beitragen. Sie sind verbreitet: Auf 40 Prozent der Mobilseiten und 44 Prozent der Desktopseiten kommen sie vor (HTTP Archive Web Almanac 2025). Dazu kommt das Gewicht. Für eine Einblendung braucht es keine Bibliothek: Ein paar Zeilen CSS und ein kleiner Beobachter, der meldet, wann ein Element ins Bild kommt, reichen aus. Slider- und Animationsbibliotheken, die für wenige Effekte eingebunden werden, gehören zu dem Ballast, den der Beitrag zu PageSpeed 100 mit statischer Auslieferung beschreibt. Ebenso wichtig: Eine Animation darf das größte Element des ersten Bildschirms nicht verzögern. Eine Überschrift oder ein Titelbild, das erst nach einer Einblendung erscheint, lässt die Seite langsamer wirken und kann den gemessenen Ladewert verschlechtern. Dasselbe Prinzip gilt für Schriften, die beim Nachladen den Text springen lassen; wie sich das vermeiden lässt, zeigt der Beitrag zu Schriften für die Website.
So prüfen Sie die Bewegung auf Ihrer Seite
- Gehen Sie die Startseite und zwei wichtige Unterseiten durch und notieren Sie jedes Element, das sich ohne Ihr Zutun bewegt: Bildwechsler, Laufbänder, Zähler, Videos, animierte Hintergründe.
- Stoppen Sie bei jedem dieser Elemente die Zeit. Läuft es länger als fünf Sekunden und steht neben Text oder Bedienelementen, suchen Sie die Schaltfläche zum Anhalten (W3C, WCAG 2.2).
- Erreichen und bedienen Sie diese Schaltfläche nur mit der Tastatur. Ein Stillstand, der nur unter dem Mauszeiger eintritt, reicht nicht.
- Schalten Sie in den Bedienungshilfen Ihres Telefons oder Computers „Bewegung reduzieren“ ein und laden Sie die Seite neu. Einblendungen sollten entfallen oder zu einem schlichten Überblenden werden, und alle Inhalte sollten sofort sichtbar sein. Die Entwicklerwerkzeuge gängiger Browser können die Einstellung auch nachstellen.
- Schalten Sie im Browser JavaScript ab und laden Sie die Seite erneut. Fehlt ein Abschnitt, hängt seine Sichtbarkeit an einem Skript.
- Prüfen Sie eingebundene Videos und animierte Grafiken auf schnelles Flackern. Was öfter als dreimal pro Sekunde blitzt, gehört nicht auf die Seite (W3C, WCAG 2.2).
Einblend-Animationen in XICflow
In XICflow gehört Bewegung zum Gestaltungssystem Flow Design. Jeder Baustein kann eine von neun Einblend-Bewegungen bekommen, mit fünf Beschleunigungskurven von „Flow (weich aus)“ bis „Linear“ (XICflow-Dokumentation).
Die Dauer lässt sich von 100 bis 2000 Millisekunden einstellen, die Verzögerung von 0 bis 1500 Millisekunden, jeweils in Schritten von 50 (XICflow-Dokumentation). Jede Einblendung kommt damit deutlich vor der Fünf-Sekunden-Grenze von 2.2.2 zur Ruhe. Die Vorschau im Editor spielt die gewählte Bewegung sofort ab, sodass Sie Dauer und Kurve am eigenen Inhalt beurteilen statt an Zahlen. Alle Bewegungen mit ihren Vorgabewerten listet das Kapitel Animationen in der Dokumentation. Hat jemand im Betriebssystem „Bewegung reduzieren“ eingestellt, schaltet die veröffentlichte Website alle Einblend-Animationen ab, und die Inhalte sind sofort vollständig sichtbar; dasselbe gilt, wenn im Browser kein JavaScript läuft (XICflow-Dokumentation). In die ausgelieferte Seite wandern nur die Bewegungen, die tatsächlich verwendet werden. Wer keine Animation setzt, bekommt auch keinen zusätzlichen Code. Die Effekte des Gestaltungssystems wie Schatten, Glow und Glas sind reine CSS-Angaben und werden laut Leistungsbeschreibung GPU-schonend eingesetzt, damit die Optik die Ladezeit nicht bricht. Einen Überblick gibt Flow Design in den Leistungen, Vorlagen mit fertig gestalteten Abschnitten zeigen die Demos.
Für bewegte Elemente jenseits der Einblendungen gilt, was oben steht. Der Baustein Stimmen-Slider zeigt Kundenstimmen einzeln nacheinander zum Durchblättern (XICflow-Dokumentation); er wechselt nicht von selbst, die Frage nach einer Pause stellt sich bei ihm nicht. Der Countdown-Baustein dagegen ist ein Zähler, der live auf ein Datum herunterläuft (XICflow-Dokumentation). Eine eigene Schaltfläche zum Anhalten nennt die Dokumentation für ihn nicht. Prüfen Sie deshalb vor dem Einsatz, ob ein Zähler auf Ihrer Seite nötig ist oder ob ein geschriebenes Datum genügt. Wie eine Seite aus Bausteinen entsteht, zeigt So funktioniert XICflow.