CSS-Animationen mit JavaScript steuern
Webdesignerinnen und -designer glauben manchmal, in CSS zu animieren sei schwieriger als in JavaScript. CSS-Animationen haben zwar ihre Grenzen, können aber meist mehr, als man ihnen zutraut — und sind dabei in der Regel schneller.
Zusammen mit etwas JavaScript erreichen CSS-Animationen und -Übergänge hardwarebeschleunigte Bewegungen und Interaktionen effizienter als die meisten JavaScript-Bibliotheken.
Legen wir los!
CSS-Übergänge steuern
In Foren stehen unzählige Fragen dazu, wie man den Übergang eines Elements auslöst oder anhält. Mit JavaScript ist die Lösung eigentlich ganz einfach.
Zum Auslösen genügt es, am Element eine Klasse umzuschalten, die den Übergang startet.
Zum Anhalten liest man an der gewünschten Stelle mit getComputedStyle und getPropertyValue die Werte aus. Danach setzt man dieselben CSS-Eigenschaften des Elements auf genau diese Werte.
„Callback-Funktionen" in CSS nutzen
Zu den nützlichsten und zugleich unbekanntesten Kniffen im Umgang mit CSS-Übergängen und -Animationen gehören die DOM-Ereignisse, die sie auslösen: animationend, animationstart und animationiteration bei Animationen sowie transitionend bei Übergängen. Sie feuern, wenn die Animation eines Elements endet, beginnt oder einen Durchlauf abschliesst.
Derzeit brauchen diese Ereignisse noch Hersteller-Präfixe. In diesem Beispiel nutzen wir deshalb die Funktion PrefixedEvent von Craig Buckler mit den Parametern element, type und callback, damit sie in allen Browsern funktionieren.
Die Eigenschaft animation-play-state
Die CSS-Eigenschaft animation-play-state ist ausgesprochen hilfreich, wenn eine Animation nur kurz angehalten und später fortgesetzt werden soll. Über JavaScript lässt sie sich so setzen (an die Präfixe denken):
element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";Den aktuellen Fortschritt ermitteln
Den genauen Fortschritt einer CSS-Keyframe-Animation kann man derzeit leider nicht auslesen. Am besten nähert man sich ihm mit einer setInterval-Funktion, die während der Animation hundertmal läuft — also Animationsdauer in Millisekunden geteilt durch 100. Dauert die Animation vier Sekunden, läuft setInterval alle 40 Millisekunden (4000/100).
var showPercent = window.setInterval(function () {
if (currentPercent < 100) {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40);Erst denken, dann tippen
Sich vor dem ersten Code zu überlegen, wie ein Übergang oder eine Animation ablaufen soll, erspart die meisten Probleme und führt am schnellsten zum gewünschten Ergebnis — besser, als hinterher nach Lösungen zu suchen. Die hier gezeigten Kniffe sind nicht immer der beste Weg für die Animation, die ein Projekt braucht.
Hier ein kleines Beispiel dafür, wie geschicktes HTML und CSS allein ein Problem lösen, bei dem man zuerst an JavaScript denken würde.
Fazit
- Früher musste man sich zwischen CSS und JavaScript entscheiden.
- Aus JavaScript heraus sind CSS-Übergänge meist einfacher zu handhaben als CSS-Animationen.
- CSS-Matrizen sind mühsam, gerade am Anfang.
- Überlegen, was passieren soll — und planen, wie.