Let’s talk about | CSS-Animationen
Lesezeit: 4 Min
CSS-Animationen, GIFs oder lieber Javascript-Animationen? Wege, Web Animationen zu erstellen, gibt es viele. In seinem Gastbeitrag geht unser Frontend Entwickler Uwe Reiss auf CSS-Animationen ein und zeigt auf, welche CSS-Animationen es gibt, wo sie am meisten Sinn machen und wie sie am besten eingesetzt werden.
CSS-Animationen sind die Grundlage jedes guten Webdesigns
Gutes Webdesign ist nicht nur die Umsetzung der statischen Vorlage des Designers. Auch das Verhalten der Seite bei User Interaktionen gehört dazu. Hierbei können CSS-Animationen helfen, das Gesamtbild abzurunden und Webseiten gezielt aufzuwerten. Im Vergleich zu Javascript Animationen sind CSS-Animationen einfach und schnell einzusetzen, performanter und bieten mittlerweile auch einige Möglichkeiten. Wie bei allem gilt jedoch: Es kommt auf die richtige Dosis an! Doch der Reihe nach.
Welche CSS-Animationen gibt es?
Es gibt drei verschiedene Wege, Ihr Webdesign in CSS zu animieren: Transitions, Animation und Offset.
Transitions werden bereits öfter eingesetzt und sorgen für animierte Übergänge zwischen zwei Werten. Sie werden durch eine Benutzeraktion wie beispielsweise einen Hover über einen Button ausgelöst und sorgen so für einen weichen Übergang zum veränderten Status. Somit würde ein Farbwechsel nicht schlagartig stattfinden, sondern durch eine Überblendung erfolgen.
Etwas weiter geht die CSS-Eigenschaft “Animation”, welche mit mehreren Keyframes arbeitet und womit aufwendigere Animationen dargestellt werden können. Das bedeutet, dass es dadurch nicht nur einen Start- und Endpunkt gibt, sondern nun auch Zwischenschritte eingebaut werden können. Außerdem ist es unter anderem möglich, die Anzahl der Wiederholungen einzustellen und nicht nur die Animationsdauer und Startverzögerung. Animations starten automatisch nach dem Seitenaufruf ohne Benutzerinteraktion und sind beispielsweise für animierte Header einsetzbar. Zudem können auch einzelne Bereiche einer SVG-Grafik animiert werden. Animations sind auch mit Javascript kombinierbar, um Animationen von Seitenelementen, die erst nach dem Scrollen erscheinen, nicht vorzeitig außerhalb des Sichtbereichs zu animieren.
Schließlich gibt es noch die Möglichkeit Offset einzusetzen, womit Objekte entlang eines Pfades bewegt werden können. Das können geometrische Grundformen oder sogar ein eigener Pfad sein. Nehmen wir als Beispiel doch eine Motorsport-Website: Hier könnte eine Rennstrecke mit Autos konstruiert werden, die mit unterschiedlichen Geschwindigkeiten und Beschleunigungen auf der Rennstrecke fahren.
Wo machen CSS Animationen Sinn?
Grundsätzlich lassen sich kleinere Animationen auf jeder Webseite sinnvoll integrieren, da es Bereiche gibt, die immer leicht animiert werden können, um so die User Experience (UX) zu optimieren. Hierzu zählen:
Buttons: Hier gibt es mehrere Möglichkeiten, wie beispielsweise eine leichte Transition des Button-Hintergrundes. Diese Basisanimation geht immer! Man könnte den Button auch etwas vergrößern oder bei seitlichen Sticky-Elementen mit einem Text herausfahren lassen. In jedem Fall sollten sich Buttons bei einem Hover immer verändern und mit dem User interagieren.
Sticky Header: Wenn ein Header “sticky” sein soll, dann sollte man darauf achten, nicht zu viel Platz zu verschwenden und ihn beim Scrollen zu verkleinern. Das kann sehr sanft geschehen, sodass es dem User erst gar nicht auffällt. Beim Zurückscrollen kann der Header dann wieder schneller eingeblendet werden, damit er direkt den richtigen Abstand zum Beginn des Contents hat.
Dropdown Menüs: Bei Dropdown Menüs sollte man eine kleine Einblendanimation verwenden, um die User Experience zu verbessern. Hier ist es wichtig zu beachten, dass die Animationen auf keinen Fall zu komplex oder langsam sein sollten.
Akkordeon Elemente: Akkordeon Elemente verhalten sich ähnlich wie Dropdown Menüs. Diese interaktiven Elemente sollten ebenfalls leicht animiert werden und nicht einfach schlagartig aufklappen. Damit wird die Übersichtlichkeit erhöht, da der Zusammenhang zum Titel und dem erscheinenden Content verdeutlicht wird.
Sonderfälle: Sonderfälle sind beispielsweise Bereiche, die man mit einem Eyecatcher hervorheben möchte. Diese sollten sinnvoll, sparsam und maximal einmal pro Seite eingesetzt werden, da es sonst zu viel ist. Hier gilt das Motto: Weniger ist mehr. Das kann beispielsweise eine animierte Grafik sein wie in diesem Codepen Beispiel:
Im Extremfall bzw. Sonderfall könnte auch eine aufwendigere bzw. verspieltere Animation, wie die Punktejagt eingesetzt werden, die mit entsprechenden Bildern und Grafiken (Hintergrundbild einer Rennstrecke, Autos statt Punkten) zu einer Autorennstrecke ausgebaut werden kann, wie im Beispiel Offset Animtionen weiter oben erwähnt.
Browser Kompatibilität
Transition: volle Browserunterstützung
Animate: volle Browserunterstützung
Offset: keine Unterstützung für Firefox für Android. Bei Edge erst ab Version 79 (2020), Firefox für Desktop ab 72 (2020) und Safari für Mac & iOS ab 16 (Mitte 2022)
Fazit
Wie bereits erwähnt, sollte man es mit CSS Animationen keinesfalls übertreiben, da der professionelle Webauftritt sonst schnell dahin ist und die Seriosität verpufft. Die Kunst eines guten Webdesigns besteht darin, genau die richtige Dosis zu finden – und die ist meist recht klein und unauffällig. Die Animationen sollen nicht ablenken, sondern unterstützend wirken und die Website etwas „weicher“ machen. Sie stellen den letzten kleinen Schliff dar und sind kaum präsent. Natürlich hängt das auch etwas von der Branche ab. Je nachdem kann es natürlich auch mal etwas mehr sein. Soll ein bestimmtes Schaubild beispielsweise verdeutlicht werden, bieten sich hier auch etwas aufwendigere Animationen an. Die Animationsdauer sollte im Regelfall eher kurzgehalten werden, damit die Website schnell und nicht verzögert wirkt und der Effekt nicht zu sehr bzw. lange ablenkt. Denn eines ist klar: Die Zeit der 90er mit verspielten GIFs, 3-D-Effekten und Flash Animationen ist längst vorbei. Jetzt sind wir in der Ära von gezielten, User Experience unterstützten Animationen, fein dosiert für den perfekten Webauftritt.
Sie möchten Ihre Website mit CSS-Animationen den letzten Schliff geben? Unsere Expert:innen freuen sich auf die Zusammenarbeit!
