CSS Animationen und Transitions mit JavaScript
Kommentare

Web Developer Zach Saucier hat auf css-tricks.com ein Tutorial zum Thema „Controlling CSS Animations and Transitions with JavaScript“ zusammengestellt. Animieren mit CSS ist zwar in mancherlei Hinsicht limitiert, aber unter Strich viel einfacher als sein Ruf.

In Kombination mit ein bisschen JavaScript kann man hardware-beschleunigte Animationen und Interaktionen erzielen, die das, was man mit JavaScript-Bibliotheken zustande bringt, durchaus in den Schatten stellen können.

CSS Transitions manipulieren

Das Triggern und Pausieren einer Transition funktioniert mit JavaScript z.B. relativ einfach: zum Triggern den Klassennamen des Elements auswechseln. Dieselbe Technik kann auch noch etwas ausgefeilter angewendet werden, indem noch eine Variable hinzugefügt wird, die die Zoom Rate verfolgt.

Zum Pausieren getComputedStyle und getPropertyValue an der Stelle in der Transition verwenden, an der sie pausiert werden soll. Dann die CSS-Eigenschaften dieses Elements den erhaltenen Values anpassen.

Es gibt verschiedene CSS-Eigenschaften, die verändert oder animiert werden können – in der Regel alle, die numerische oder Farbwerte haben.

Transitions statt Animationen

Da gerade das Manipulieren von Transitions mit JavaScript stark vereinfacht werden kann, bietet es sich an, CSS-Animationen, die nicht das gewünschte Resultat ergeben, in Transitions umzuwandeln. Transitions sind zwar gleichsam schwerer zu programmieren, aber leichter zu bearbeiten.

Einen kleinen Fallstrick gibt es allerdings bei der Umwandlung: Wir müssen animation-iteration in das transition-Command umwandeln. Da Transitions kein direktes Äquivalent haben, muss man sich eines kleinen Tricks behelfen: man multipliziert transition-duration und rotation mal x. Hinzu kommt die bereits erwähnte Klasse zum Triggern. Um die Transition bzw. die falsche Animation nun zu starten, fügt man die Klasse dem Element hinzu.

Schuster bleib bei deinen Leisten

Schließlich gibt es aber auch Fälle, in denen man mit HTML und CSS allein besser bedient ist. Saucier führt dazu beispielhaft eine Grafik an, die konstant in eine Richtung rotiert, aber die Rotationsrichtung bei einem Hover ändert. Zunächst liegt es nahe, ein animationIteration-Event zu benutzen. Viel besser geht es aber mit CSS und einem Container-Element. Man lässt die Grafik nun bei einer Geschwindigkeit von x rotieren, bei einem Hover rotiert das Parent-Element bei einer Geschwindigkeit von 2x in die entgegengesetzte Richtung – da beide Rotationen nun gegeneinander laufen, erwirkt das den Effekt einer Richtungsänderung.

Dieses und noch mehr Beispiele hat Saucier auch auf Codepen.io bereitgestellt. Viel Spaß beim Animieren.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -