Javascript Web Animation API

Javascript animate()

CSS-Keyframes-Animationen waren und sind ein großer Erfolg. Dennoch: Sobald Animationen komplexer werden, das Ende einer Animation zu einer neuen Aktion führt, selbst wenn die Animation nur einfach erneut gestartet werden oder der Benutzer die Animation steuern soll, müssen wir mit Javascript eingreifen. Schon kleine Slideshows stoßen mit reinem CSS schnell an die Grenzen.

CSS gibt uns keine Mittel in die Hand, die Animation zu pausieren, die Richtung zu ändern oder zurückzusetzen.

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.

animate (keyframes, options)

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.

1. 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.
2. 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.
3. 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.

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

<button onclick="wheel.play()">PLAX</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 kleine Fehler – die Fehlersuche in CSS hingegen ist oft mühselig.