Mittlerweile unterstützen alle modernen Browser – etwa Chrome, Firefox, Edge und Safari – diese Technik, welche die ressourcenschonende und flexible Generierung von Animationen ermöglicht.

Zunächst erklärte Linus kurz die klassische Methode der Web-Animation mittels CSS-Animation. Hierfür gibt es verschiedene Methoden zur effizienten Umsetzung. Die Bewegung eines Objekts kann zum Beispiel ganz basal mittels Margin erfolgen. Der Nachteil hierbei ist allerdings, dass die benötigten Berechnungen für die Animation immer wieder ausgeführt werden.

CSS-Animation – Schritt für Schritt erklärt

Die Ursache für dieses Verhalten liegt in der Render-Pipeline des Browsers. Basierend auf dem CSS-Code werden mehrere Prozesse nacheinander durchgeführt. Zunächst wird beim Prozess „style“ das Aussehen der Elemente zugeordnet. Danach folgt die Erstellung des „Layouts“, indem Größe und Position jedes Elements berechnet wird. Im vorletzten Schritt „Paint“ werden die Pixel gemalt. Damit ein erneutes „Malen“ möglichst schnell durchlaufen werden kann, wird der Screen in Ebenen, sogenannte Layer, aufgeteilt. Einige Elemente und bestimmte CSS-Eigenschaften erzeugen jeweils einen eigenen Layer. Im letzten Schritt werden alle Layer zusammengeführt und ausgegeben (Composite). Es ist möglich, Schritte zu überspringen, da die Abfolge der Render-Pipeline trotzdem wie gewohnt mit dem nächsten Schritt fortgesetzt wird.

„Wir wollen am liebsten nur Composite ausführen, denn das Durchlaufen der gesamten Render-Pipeline ist oft zu ressourcenhungrig.“

Linus Rösler, Junior Web Developer bei denkwerk

Daher bietet sich bei diesem Bespiel eher die Transform-Eigenschaft an. Von dieser wird ein neuer Layer erzeugt, wodurch nur der tatsächlich bewegte Teil der Animation neu berechnet werden muss. Das spart Rechenleistung und Arbeitsspeicher auf dem Endgerät, was letztlich den Besuchern der Webseite zugutekommt.

Web Animation API verkettet Animationen leichter

Praktisch dabei: Die Margin-Methode in CSS kann auch in bestehenden Projekten sehr einfach durch die CSS-Transformation ersetzt werden – der Code bleibt daher weitestgehend gleich.

Allerdings unterliegen CSS-Animationen grundsätzlich einigen Beschränkungen. Mit der Web Animation API ist es leichter Animationen zu verketten oder komplexe Animationen zu erstellen, da dies ohne JavaScript schwierig wäre.

Es ist möglich, mehrere Animationen zu kombinieren oder sie auf Basis der vorherigen Animation auszulösen. Durch interaktive Elemente können auch Animationen beeinflusst werden, wie zum Beispiel ihre Geschwindigkeit, das Starten oder Beenden der Animation. Mit der Funktion „onfinish“ kann zum Beispiel auf das Ende einer Animation reagiert werden. Mithilfe der Methode „getAnimations“ können Animationen abgerufen und gezielt mit der WAAPI gesteuert werden. Beispielsweise kann die Animation verlangsamt oder beendet werden, um die Barrierefreiheit zu erhöhen. Dabei spielt es keine Rolle, ob eine Animation mit der WAAPI oder mit CSS umgesetzt wurde.

Web Animation API als mächtiges Werkzeug

Kurzum: Die Web Animation API ist ein äußerst mächtiges Werkzeug, um auch komplexe Animationen ressourcensparend und barrierefrei umzusetzen. Als Web-Standard mit breiter Browser-Unterstützung ist sie zudem in jedem Webprojekt einsetzbar. Haben wir euer Interesse an Animationen geweckt? Sprecht uns einfach an oder schreibt einen E-Mail an hello@denkwerk.com. E