Animation im Webdesign umfasst alle bewegten Elemente einer Website: von der Schaltfläche, die beim Überfahren die Farbe wechselt, bis zur Grafik, die beim Scrollen aufgebaut wird. Bewegung lenkt Aufmerksamkeit und erklärt Zusammenhänge, kostet aber Ladezeit und Aufmerksamkeit, wenn sie beliebig eingesetzt wird.
- Animation im Webdesign
Die Bewegung von Elementen einer Website, ausgelöst durch Bedienung, Scrollen, Ladevorgänge oder Zeitablauf.
Beispiel: „Die Animation beim Aufklappen dauert 200 Millisekunden, damit klar wird, was sich öffnet.“Abgrenzung zum Motion Design: Motion Design ist die gestalterische Disziplin dahinter und legt fest, wie Bewegung eingesetzt wird. Animation bezeichnet die einzelne Umsetzung.
Wofür Bewegung eingesetzt wird
Der wichtigste Zweck ist Rückmeldung. Wenn sich ein Menü öffnet, zeigt die Bewegung, woher es kommt und wohin es gehört. Ein Element, das ohne Übergang erscheint, wirkt wie ein Sprung und muss vom Betrachter neu eingeordnet werden.
Der zweite Zweck ist Aufmerksamkeit. Bewegung zieht den Blick, und das lässt sich nutzen, um auf einen Hinweis oder einen Fehler zu zeigen. Genau deshalb ist sie sparsam einzusetzen: Wenn auf einer Seite an fünf Stellen etwas wackelt, konkurrieren diese Stellen miteinander, und keine gewinnt.
Womit sie umgesetzt wird
Für einfache Übergänge genügt CSS. Eine Farbänderung, ein Aufklappen oder ein Einblenden lässt sich mit transition in einer Zeile beschreiben, und der Browser rechnet das flüssig. Für Abläufe mit mehreren Schritten gibt es animation mit Keyframes.
.karte { transition: transform 200ms ease-out; }
.karte:hover{ transform: translateY(-4px); }Aufwendigere Bewegungen, etwa entlang des Scrollfortschritts oder mit verketteten Abläufen, laufen über JavaScript-Bibliotheken. Der Preis dafür ist zusätzlicher Code, der geladen und ausgeführt werden muss, und das schlägt auf die Ladezeit durch.
Was zu beachten ist
Flüssig wirkt Bewegung, wenn sie über transform und opacity läuft, weil der Browser diese Eigenschaften ohne Neuberechnung des Layouts darstellen kann. Animationen auf Breite, Höhe oder Position erzeugen dagegen bei jedem Bild eine neue Berechnung und ruckeln auf schwächeren Geräten.
Verpflichtend ist die Rücksicht auf Nutzer, denen Bewegung Beschwerden bereitet. Die Systemeinstellung dafür gibt die Medienabfrage prefers-reduced-motion weiter, und wer sie gesetzt hat, sollte eine ruhige Fassung der Seite bekommen. Das ist eine Anforderung der Barrierefreiheit und keine Feinheit.