Animationen können Zustandswechsel erklären oder eine Rückmeldung sichtbar machen. Sie können aber auch ablenken, die Bedienung verzögern oder unnötig Rechenleistung beanspruchen. Vor der technischen Umsetzung sollte deshalb feststehen, welche Information eine Bewegung vermittelt und wie die Oberfläche ohne diesen Effekt funktioniert.
CSS und JavaScript nach der Aufgabe auswählen
Eine CSS-Transition eignet sich als Ausgangspunkt für einen einfachen Wechsel zwischen Zuständen. CSS-Animationen beschreiben Abläufe mit Zwischenständen. Müssen mehrere Abläufe durch Programmlogik gesteuert werden, kommt unter anderem die Web Animations API infrage. Sie stellt ein Modell zur zeitlichen Steuerung animierter Elemente bereit.
Die frühere Aussage dieses Beitrags, CSS-Animationen ließen sich nicht pausieren, war falsch. Mit animation-play-state kann eine CSS-Animation angehalten und fortgesetzt werden. Ob CSS, die Web Animations API oder eine weitere Lösung passt, hängt vom Ablauf und der nötigen Steuerung ab.
Leistung am tatsächlichen Effekt messen
„CSS ist immer schneller“ ist keine belastbare Entscheidungsregel. Wichtig ist auch, welche Eigenschaften verändert werden und welche Arbeit der Browser dafür ausführt. Der Animationsleitfaden auf web.dev empfiehlt, nach Möglichkeit transform und opacity zu verwenden und unnötige Layout- und Zeichenarbeit zu vermeiden. Eine Messung auf den vorgesehenen Geräten bleibt trotzdem nötig.
Prüfen Sie einen repräsentativen Ablauf gemeinsam mit dem restlichen Seiteninhalt. Eine isolierte Demonstration kann anders reagieren als dieselbe Bewegung neben großen Bildern, Menüs und weiteren Skripten. Halten Sie fest, ob Eingaben verzögert werden, Bewegungen stocken oder Inhalte erst verspätet bedienbar sind.
Reduzierte Bewegung bewusst gestalten
Die Medienabfrage prefers-reduced-motion ermöglicht es, eine vom Gerät gemeldete Vorliebe für weniger Bewegung zu berücksichtigen. Definieren Sie dafür eine passende Variante. Eine wichtige Bestätigung muss auch dann verständlich bleiben, wenn beispielsweise ein dekoratives Einfliegen entfällt.
Für automatisch gestartete Bewegung erläutert W3C die Bedingungen des Kriteriums Pause, Stop, Hide. Es betrifft unter anderem bestimmte länger als fünf Sekunden laufende Inhalte neben anderen Inhalten und enthält Ausnahmen. Pausen- oder Abschaltmöglichkeiten sind deshalb anhand des konkreten Effekts zu planen; ein kurzer Effekt macht eine Oberfläche nicht insgesamt barrierefrei.
Abnahme anhand einer konkreten Aufgabe
Ein erfundenes Beispiel ist eine aufklappende Erklärung im Anfrageprozess. Die Prüfung sollte nicht nur fragen, ob der Übergang ansprechend aussieht:
- Kann die Erklärung auch per Tastatur geöffnet und geschlossen werden?
- Bleibt der geöffnete Zustand ohne die Bewegung eindeutig erkennbar?
- Bleiben Beschriftungen und Bedienelemente während des Ablaufs nutzbar?
- Was passiert bei wiederholter Betätigung oder einem unterbrochenen Ablauf?
- Ist die Variante mit reduzierter Bewegung inhaltlich gleich verständlich?
Notieren Sie Aufgabe, Gerät, beobachtetes Verhalten und offene Korrektur. Für räumliche Anwendungen behandelt unser Web-3D-Beitrag zusätzliche Fragen zu Darstellung und Geräteunterstützung.
ECONSOR unterstützt Unternehmen bei der Planung und Entwicklung digitaler Anwendungen in Heilbronn. Besprechen Sie mit uns die Anforderungen Ihres Vorhabens.
Fachlich und sprachlich aktualisiert am 19. Oktober 2026.
