Nicht ins Stocken geraten

Animationen mit CSS und JavaScript

Nicht ins Stocken geraten

Animationen können ein nützliches Werkzeug sein, um Interaktionen zu fördern und Informationen leichter verständlich zu machen. Doch wo viel Licht ist, ist auch viel Schatten. Ruckelnde Animationen mit geringer Framerate beeinträchtigen die Usability und wirken sich oft negativ auf das Nutzerverhalten aus. Mit ein, zwei Tricks könnt ihr die Performance der Animationen verbessern.

Animationen mit CSS

CSS3 bietet zwei Möglichkeiten, Inhalte zu animieren: Transitions und Keyframe Animationen.

Transitions sind Übergänge von einem Start- in einen Endzustand, Zwischenzustände sind hier nicht möglich. Sie haben zwei praktische Anwendungsbereiche: Zum einen sind Transitions sehr nützlich, um interaktive Zustandswechsel, zum Beispiel durch das Fokussieren eines Elements, zu animieren. Zum anderen eignen sie sich auch sehr gut im Zusammenspiel mit JavaScript, da Transitions auf jede Art von Styleänderungen (also durch inline Styles, Klassenzuweisungen oder Pseudoklassen) reagieren. → Beispiel ansehen

Sehr hilfreich ist außerdem, dass Transitions einen »eingebauten Fallback« besitzen: Browser, die keine Transitions kennen, führen denselben Zustandswechsel einfach abrupt durch. Das bedeutet, dass diese User dadurch keine bedeutenden Nachteile bei der Nutzung der Website haben.

Um jedoch eine optimale Performance bei Transitions zu erreichen, empfiehlt es sich, das Verhalten des Browsers etwas genauer unter die Lupe zu nehmen. Werden Eigenschaften, die sich auf das Layout einer Website beziehen (z.B. width/height, top/right/bottom/left, margin,…) geändert, so muss der Browser bei jeder Änderung das Layout der Seite neu berechnen. Schließlich ist es möglich, dass gefloatete Elemente durch die Änderungen umbrechen oder sich nachfolgende Elemente verschieben. Das Berechnen des Layouts ist ein vergleichsweise aufwändiger Prozess, der je nach Komplexität der Seite einige Millisekunden in Anspruch nehmen kann. Bei einmaligen Änderungen ist dies in der Regel kein Problem, aber bei Animationen können diese Millisekunden entscheiden, ob die Animation mit 60, 30 oder weniger Frames pro Sekunde abläuft und somit ruckelt. Dieses Problem könnt ihr jedoch umgehen, indem ihr statt Layout-Eigenschaften sogenannte CSS-Transformationen verwendet. Diese beziehen sich nur auf das jeweilige Element selbst und dessen Unterelemente, der Rest der Seite wird davon nicht beeinflusst und somit muss das Layout nicht neu berechnet werden. Ein weiterer Vorteil von CSS-Transformationen ist, dass diese auf Subpixel-Ebene arbeiten. Das heißt Elemente können auch um Bruchteile von Pixeln verschoben werden, wodurch die Pixel-Stufen umgangen werden können. → Beispiel ansehen

Weiterhin könnt ihr an der Performance-Schraube drehen, indem ihr einige Animationen vom Hauptprozessor (CPU) auf den Grafikprozessor (GPU) auslagert, der für grafische Berechnungen deutlich besser geeignet ist. Dies erreicht ihr im Moment durch den einfachen Trick, auch in der 2D-Ebene 3D-Transformationen zu verwenden. Dass sich die Animation trotzdem nur in zwei der drei Dimensionen bewegt, stört schließlich niemanden. Die meisten Browser lagern diese »komplexeren« Berechnungen dann auf die schnellere GPU aus. Leider können 3D-Transformationen allerdings Seiteneffekte hervorrufen und zu einem Flackern der Seite oder ähnlichen Problemen führen. Glücklicherweise werden zukünftig aber auch 2D-Transformationen auf die GPU ausgelagert, sodass der Umweg über die dritte Dimension nicht mehr gegangen werden muss. Einen umfassenden Artikel zur Hardwarebeschleunigung in CSS hat Martin Kool bei Smashing Magazine veröffentlicht.

Keyframe Animationen sind die zweite Möglichkeit, Animationen mittels CSS zu realisieren. Sie eigen sich besonders, wenn sich Animationen selbstständig, ohne Eingreifen des Users, ablaufen sollen. Gegenüber Transitions haben sie außerdem den Vorteil, dass komplexere Abläufe mit Zwischenzuständen definiert werden können. → Beispiel ansehen

Natürlich spielt aber auch hier das Rendering-Verhalten des Browsers eine Rolle, sodass ihr die bei den Transitions erwähnten Tricks hier ebenso anwenden könnt.

Doch diese beiden Techniken alleine werden zur Umsetzung komplexerer Animationen, bei denen zum Beispiel mehrere Elemente in Abhängigkeit voneinander animiert werden müssen, nicht ausreichen. Zum Glück gibt es da aber noch JavaScript, mit dessen Hilfe ihr auch diese Animationen in den Griff bekommt.

Animationen mit JavaScript

Für komplexe Animationen solltet ihr weiterhin auf JavaScript zurückgreifen, da Animationen mit vielen Abhängikeiten mit den oben genanten Methoden zwar möglich, aber unnötig kompliziert sein können. Auch hier hat sich in letzter Zeit einiges getan, um eine bessere Performance zu erreichen. Die bisherige Strategie, Eigenschaften mit einem festgelegten Intervall alle paar Millisekunden zu ändern, hat ausgedient und dient heutzutage nur noch als Fallback für ältere Browser. Fast alle aktuellen Browser können mit der Methode requestAnimationFrame umgehen, die unnötige Berechnungen verhindert und somit die CPU und den Akku schont, was vor allem auf mobilen Geräten sehr wichtig ist. Der Trick dabei ist, dass der Browser angibt, wann er die Seite neu rendern kann und Eigenschaften somit nur dann neu berechnet werden müssen, wenn diese auch verwendet werden. Die praktische Anwendung von requestAnimationFrame wird in einem Artikel von Paul Irish thematisiert.

Fazit

CSS3 und JavaScript bieten gute Möglichkeiten, Animationen performant umzusetzen. Dennoch sollten sich Entwickler immer klar darüber sein, dass Animationen denselben Effekt wie eine Latenz haben: Der User muss warten. Deshalb gilt auch hier oft der allgemeine Satz »weniger ist mehr«. Animationen sind gut geeignet, um Übergänge leichter verträglich zu machen und können auch optisch ein Pluspunkt sein, wenn man sie richtig einsetzt. Wer allerdings alles wild durcheinander bewegt, der wird dem User schnell den Überblick nehmen und diesen verärgern. Deshalb: Keep it simple!