Javascript Web Animation API

Grenzen der CSS-Keyframes-Animationen

CSS führt Animationen für eine vorgegebene Dauer aus, mit einem Zähler der Iterationen (Durchläufe) und evtl. mit einer Verzögerung vor dem Start. Ohne Weiteres starten CSS-Animationen mit dem Laden der Seite, aber meist triggert Javascript CSS-Animationen durch Hinzufügen oder Entfernen von CSS-Klassen.

CSS-Animationen wirken nur auf individuelle Elemente. CSS erkennt keine Abhängigkeiten zwischen dem Verhalten der einzelnen Elemente. CSS kann nicht feststellen, ob eine Animation noch läuft oder beendet ist, also gibt es auch keine Option, eine Animation anzustoßen, wenn eine andere Animation beendet ist. Dafür wird wieder Javascript benötigt.

Grenzen der klassischen Javascript-Animationen

Die klassische Javascript-Animation mit setInterval und requestAnimationFrame basiert auf Loops – auf Schleifen, in denen komplexe Animationen ausgeführt werden. Dabei kann Javascript neben dem animierten Element auch weitere Elemente beachten und auf ihr Verhalten reagieren.

Wir können z.B. die Werte eines Elements A nutzen, um ab einer bestimmten Position oder Größe die Animation von Element B zu starten oder anzuhalten. Die dafür erforderlichen Berechnungen und Interpolationen können allerdings bei Farbwerten oder dem Fortschritt eines clipPath kompliziert werden. Obendrein müssen auch Verhaltensweisen wie Beschleunigen und Abbremsen für jeden Frame berechnet werden, denn die klassischen Javascript-Animationen hatten keine easing-Funktionen.

Web Animation API: element.animate()

An dieser Stelle springt das Web Animation API (Application Programming Interface) ein. Javascript animate hat zwei Argumente: ein Array von Keyframes und die Optionen für die Steuerung der Animation.

                       +-- Javascript Object mit Eigenschaften 
                       |   wie Dauer, Iterationen, Verzögerung
                       |
animate (keyframes, options)
            |
            |
            +-- Array von Keyframes

let wheel = document.querySelector (".wheel").animate (
	[
		{ transform: "rotate(0deg)" },
		{ transform: "rotate(360deg)" }
	],
	{
		duration: 2000,
		iterations: Infinity
	}
);

Javascript animate() vs CSS-Animationen

An einigen Stellen müssen wir beim Umschalten von CSS-Keyframes-Animationen auf Javascript animate an kleine Unterschiede gewöhnen.

Dauer der Animation

CSS: Sekunden

Javascript: Millisekunden

Eigenschaften

CSS: mit Bindestrichen

Javascript: CamelCase

Easing-Voreinstellung

CSS: ease-in

Javascript: linear

Iteration

CSS: infinite

Javascript: Infinity

Während Zeitangaben in CSS in Bruchteilen von Sekunden geschrieben werden – 0.5s für eine halbe Sekunde – schreibt Javascript die Dauer in Millisekunden. Aus CSS 0.5s wird 500, eine Sekunde in Javascript ist einfach 1000, immer als reine Zahl ohne "s" für Sekunden.
Javascript verweigert bei Bindestrichen. CSS-Eigenschaften wie background-color werden im CamelCase geschrieben, also ohne Bindestrich, der erste Buchstabe nach dem Bindestrich wird zur Versalie (Großbuchstabe). Aus CSS background-color wird backgroundColor, aus border-radius borderRadius. Es gibt keine Javascript-Methode, die eine automatisch Übersetzung leistet.
Und noch ein Unterschied: CSS-Animationen laufen vorgabegemäß schnell an und werden dann langsamer: ease-in. Javascript animate hingegen hat keine Vorgaben, sondern Javascript-Animationen laufen per se linear ab. Wenn ein Easing erwünscht ist, muss es entweder in den / die Keyframe(s) oder für die gesamte Animation in die Optionen.

Javascript Animationen steuern

Die meisten einfachen Animationen lassen sich ebenso gut mit CSS wie mit Javascript steuern. Die Animation von komplexen Objekten und Abläufen wird hingegen besser bei Javascript aufgehoben sein.

Der Vorsprung von Javascript gegenüber CSS-Animationen beruht in der Vielzahl von Events, die eine Animation starten, pausieren und beenden.

HTML

<div class="cardo">
	<wheel-animation></wheel-animation>
</div>

<button onclick="wheel.play()">PLAY</button>
<button onclick="wheel.pause()">PAUSE</button>
<button onclick="wheel.playbackRate += 0.2">schneller</button>
<button onclick="wheel.playbackRate -= 0.2">langsamer</button>

Javascript animate () listet im Keyframes-Array CSS-Eigenschaften auf, mehrere Eigenschaften werden durch Kommas voneinander getrennt.

let wheel = document.querySelector ("wheel-animation").animate (
	[
		{ transform: "translateX(0) rotate(0deg)", easing: "ease-in"},
		{ transform: "translateX("+ width + "px) rotate(" + (umdrehungen * 360) + "deg)" },
		{ transform: "translateX(0) rotate(0deg)", easing: "ease-out"}
	],
	{
		duration: duration,
		iterations: Infinity
	}
);

Die Script berechnet die Laufstrecke und den Kreisumfang, um die Animation an die Laufstrecke anzupassen. Ein kleines Extra, das mit CSS nicht zu bewältigen wäre.

Ein weiterer Vorteil von Javascript animate() gegenüber CSS-Animationen: Die Javascript-Console meldet Typos und Fehler – die Fehlersuche in CSS hingegen ist oft mühselig.