Lange Zeit ist es her, als der erste Teil der Miniserie über Animationen mittels CSS3 hier veröffentlicht wurde – zugegebenermaßen geriet die Serie im Laufe der Zeit ein wenig in Vergessenheit. Dennoch möchten wir heute noch einen zweiten Teil nachtragen. Nachdem wir bereits Transitionen vorgestellt haben und einen kleinen Exkurs hin zu den 2D- und 3D-Transformationen, die im Übrigen genauso gut mit Transitionen genauso wie mit dem folgenden Modul wunderbar kombiniert werden können, möchten wir heute ein weiteres neues CSS3-Modul vorstellen: Das Animation-Modul.
Hinter diesem eher unkreativ klingenden Namen stecken im Gegensatz zu den Transitionen, das sich ja nur durch fließende Übergänge zwischen zwei Zuständen von Objekten auszeichnet, echte Animationen, die sich in nahezu jedem noch so kleinen Detail einstellen lassen und auch mehrfach hintereinander ausgeführt werden können. Dazu kann, wer unbedingt will, den aktuellen Working Draft der W3C durchlesen. Wer dieses Geschwurbel dagegen nicht so mag, kann natürlich auch gerne hier weiterlesen… ;-)
Welche Browser unterstützen dieses Modul?
Bis auf den Internet Explorer unterstützen alle großen Browser das Animation-Modul – der Firefox seit Version 5.0, Chromium/Chrome und Safari seit Version 4.0 und Opera seit Version 12.0. Fans des Browsers aus dem amerikanischen Redmond müssen sich dagegen noch etwas gedulden. Erst die kommende Version 10.0 des Internet Explorers wird auch dieses Modul unterstützen.
Wie bei den meisten CSS3-Moduls verwenden die Browser auch hier momentan noch ihre eigenen Präfixe vor den jeweiligen Eigenschaften. Der Übersichtlichkeit wegen lassen wir diese aber im kommenden Eintrag weg.
Und wie wird das nun realisiert?
Zunächst gibt es einmal eine ganz Menge an neuen Eigenschaften, die dem Entwickler zur Verfügung stehen und für die Erstellung von Animationen verwendet werden können. Diese wollen wir im Folgenden kurz vorstellen:
- animation-name: Diese Eigenschaft ist wohl die wichtigste der hier genannten. Erwartet wird hier ein Name des verwendeten Keyframes. Es können auch mehrere Kexframes angegeben werden. Diese werden dann mittels Komma voneinander getrennt. Was ein Keyframe ist, wird weiter unten noch erläutert.
- animation-duration: Diese Eigenschaft gibt an, wie lange ein Zyklus einer Animation dauern soll. Erwartet wird hier wie auch bei transition-duration ein positiver Zeitwert, beispielsweise 2s oder 300ms.
- animation-timing-function: Hiermit kann angegeben, wie schnell die Animation im Zeitverlauf von statten gehen soll. Dies funktioniert genauso wie transition-timing-function. Die erwarteten möglichen Werte können deshalb im 1. Teil dieser Serie nochmal nachgelesen werden. Diese Eigenschaft ist im Übrigen die einzige, die auch innerhalb der Keyframes selber definiert werden darf.
- animation-iteration-count: Diese Eigenschaft legt fest, wie oft eine Animation nacheinander ausgeführt werden soll. Für mehrere Keyframes kann hier natürlich auch eine kommagetrennte Liste von Werten angegeben werden. Mögliche Werte sind “infinite“, wo die Animation dann bis in alle Ewigkeit ausgeführt wird, oder ein (postiver) Zahlenwert, wobei bei Kommazahlen der letzte Durchlauf nur zum Teil ausgeführt wird. Standardwert ist hier im Übrigen ein Durchlauf.
- animation-direction: Beim mehrmaligen Durchlauf einer Animation kann hier angegeben werden, ob die Animation vorwärts (normal, Standard) oder rückwärts (reverse) oder alternierend vorwärts und rückwärts (alternate [beginnt vorwärts] bzw. alternate-reverse [beginnt rückwärts]). Bei mehreren Keyframes können hier natürlich wieder mehrere Werte angegeben werden. Achtung! Die Werte reverse und alternate-reverse wurden erst im April 2012 in den Working Draft des Moduls übernommen. Unterstützt werden die Werte momentan auch nur in Chromium/Chrome ab Version 19.0 und Firefox ab Version 16.0.
- animation-play-state: Mit dieser Eigenschaft, lässt sich festlegen, ob eine Animation abgespielt (running, Standard) oder pausiert (paused) werden soll. In letzterem Fall wird die Animation somit nicht ausgeführt. Dies macht vor allem Sinn in Verbindung mit mehreren Keyframes, für die hier natürlich wieder verschiedene Werte angegeben werden können, und verschiedenen Ereignissen (z.B. mit der Maus überfahren, anklicken, …).
- animation-delay: Um eine Start-Verzögerung für Animationen festzulegen, kann diese Eigenschaft verwendet werden. Als Werte sind wieder die gleichen erlaubt wie bei animation-duration.
- animation-fill-mode: Hiermit kann angegeben werden, ob die in den Keyframes angegebenen Style-Eigenschaften des Elements vor und nach dem Ausführen der Animation beibehalten werden sollen. Mögliche Werte sind: forwards (die Styles vom Beginn der Animation werden vorher schon verwendet, nach der Animation werden wieder die ursprünglichen Werte verwendet), backwards (die Styles vom Ende der Animation werden danach beibehalten), both (sowohl forwards wie auch backwards) oder none (Standard, vor und nach der Animation werden die ursprünglichen Werte des Elements verwendet. Wie immer können auch mehrere Werte für unterschiedliche Keyframes verwendet werden.
- animation: Wie immer gibt es auch noch eine Eigenschaft, die all die anderen vielen Eigenschaften zu einer zusammenfasst. Angegeben werden die entsprechenden Werte der einzelnen Eigenschaften in derselben Reihenfolge, wie wir sie eben vorgestellt haben. Getrennt werden die einzelnen Eigenschaften nur durch Leerzeichen, mehrere Keyframes dagegen wieder mit Komma (natürlich dann erst alle Eigenschaften des ersten Keyframes, dann alle des zweiten, …).
Und was sind nun diese komischen Keyframes?
Mit Keyframes lässt sich letztendlich die Animation selber gestalten. Genauer gesagt, können einzelne Schritte festgelegt werden. Dazu wurde eigens ein neues Konstrukt eingeführt, welches wie folgt aufgebaut ist:
@keyframes <name> {
<stelle> [, <stelle>[, ...]] { <regeln> }
[<stelle> [, <stelle>[, ...]] { <regeln> }
[...]]
}
Zur Erklärung:
- <name>: Dies ist der Name des Keyframes, welcher auch in animation-name angegeben wird. Es kann hierbei eine beliebige Zeichenkette verwendet werden, die jedoch möglichst auch einzigartig ist.
- <stelle>: Hierunter ist eine Angabe in Prozent zu verstehen, d.h., Werte von 0% bis 100%. Anstatt 0% kann auch alternativ from verwendet werden, genauso wie to anstatt 100%. Zu verstehen ist hierunter letztendlich der Zeitpunkt innerhalb eines Durchlaufs der Animation, wobei 0% der Anfang der Animation ist und 100% das Ende (bzw. andersherum, wenn animation-direction den Wert reverse hat).
- <regeln>: Hier werden schließlich die gewünschten CSS-Regeln angegeben, die das animierte Element zum angegebenen Zeitpunkt haben soll. Wie oben schon erwähnt kann hier auch animation-timing-function verwendet werden, um die Übergänge von einem Zeitpunkt zum nächsten zu variieren.
Natürlich können beliebig viele Zeitpunkte für einen Regelblock angegeben werden, genauso wie beliebig viele verschiedene Regelblöcke verwendet werden können.
Anzumerken sei noch, dass @keyframes zwar der Standard ist, aber momentan auch noch die entsprechenden Browser-Präfixe benötigt, also bspw. @-moz-keyframes.
Gibt’s vielleicht noch ein paar Beispiele?
Als erstes haben wir ein kleines Beispiel, dass die einzelnen Werte der Eigenschaft animation-direction veranschaulicht. Die Boxen bewegen sich von einer Seite zur anderen. Wie aber oben schon angemerkt, unterstützen momentan nur Chromium ab 19.0 und Firefox ab 16.0 die Bewegungen der Boxen 2 und 4. In älteren Browsern dagegen sieht die Bewegung genauso aus, wie Box 1.
Hier geht’s zum Beispiel 1!
Ein zweites Beispiel ist eine Box, die sich erst nach unten, dann nach rechts, nach oben und wieder nach links an die ursprüngliche Position wandert und dabei seine Farbe andauernd wechselt.
Hier geht’s zum Beispiel 2!
Und als drittes und letztes Beispiel hätten wir eine Menge Boxen, die ihre Animationen beim Überfahren mit der Maus starten, wobei diese genau zwei Mal ausgeführt werden – einmal vorwärts und einmal rückwärts. Dabei führt jede Box eine andere Animation aus – eine wackelt, eine blinkt, eine wächst und eine wird invertiert.
Hier geht’s zum Beispiel 3!
Dies soll es dann vorerst gewesen sein. Wir hoffen, dass die Erklärungen und Beispiele verständlich waren. Sollte jedoch noch etwas unklar sein, dann scheut euch nicht davor, noch einmal nachzufragen… ;-)