Hier kommt etwas für die Animationsfreunde unter euch. Mit dem CSS3-Befehl ”keyframes” steht euch ein mächtiges Werkzeug zur Seite, mit dem ihr anspruchsvolle und umfangreiche Animationen erstellen könnt. Aber gleich der Tritt auf die Spaßbremse: funktioniert aktuell nur mit Webkit-Browsern ala Google Chrome oder Apple Safari.

In diesem Artikel habe ich die CSS3-Eigenschaft “transition” vorgestellt, mit der HTML-Elemente animiert werden können. Das funktioniert jedoch nur im Zusammenspiel mit Pseudo-Elementen, wie beispielsweise :hover oder :active, und die Möglichkeiten sind doch sehr begrenzt. Mit “keyframes” erstellt ihr selbstablaufende Animationen mit fast unzähligen Möglichkeiten.

Syntax

@-moz-keyframes fade {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
@-webkit-keyframes fade {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}

.box {
-moz-animation-name: fade;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: fade;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
}

Shorthand

@-moz-keyframes fade {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
@-webkit-keyframes fade {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}

.box {
-moz-animation: fade 5s infinite;
-webkit-animation: fade 5s infinite;
}

Browserunterstützung

• Apple Safari 5+
• Google Chrome 10+
• Mozilla Firefox 5+

Beschreibung

Was passiert im obigen Beispiel? Innerhalb einer Zeitspanne von 5 Sekunden (-webkit-animation-duration: 5s) wird hier die von mir fade getaufte Animation in einer Schleife durchlaufen. Die Transparenz des Objekts mit der Klasse box wird beim Start auf 50% festgelegt. Bei der Hälfte der Animation, also nach 2,5 Sekunden, wird die Transparenz auf 0% und zum Ende wieder auf 50% gesetzt. Diese Animation wird unbegrenzt (-webkit-animation-iteration-count: infinite) wiederholt. Soll die Animation nur einmalig ausgeführt werden, wird kein Wert benötigt (Standard) und die Zeile kann entfallen. Bei zweifacher Wiederholung wird der Wert 2 eingetragen. Logisch, oder?

Damit ihr euch das bildlich vorstellen könnt:

Natürlich lassen sich auch verschiedene CSS-Eigenschaften kombinieren. So zum Beispiel Sichtbarkeit (opacity) und Skalierung (-webkit-transform: scale).

@-moz-keyframes fade {
0% { opacity: 0.5; -moz-transform: scale(1.0); }
50% { opacity: 1; -moz-transform: scale(1.5); }
100% { opacity: 0.5; -moz-transform: scale(1.0); }
}
@-webkit-keyframes fade {
0% { opacity: 0.5; -webkit-transform: scale(1.0); }
50% { opacity: 1; -webkit-transform: scale(1.5); }
100% { opacity: 0.5; -webkit-transform: scale(1.0); }
}

.box {
-moz-animation: fade 5s;
-webkit-animation: fade 5s;
}

Im Vergleich zum vorherigen Beispiel wird das Element neben der Transparenz noch auf 150% seiner Größe bei der Hälfte des Durchlaufs skaliert. Des Weiteren wird die Animation nur einmalig durchlaufen. Etwa so:

Im Detail

Der Aufruf ist eigentlich recht simpel. Zunächst wird mit dem Aufruf von @-webkit-keyframes NAME der von euch frei wählbare Name des Animationseffekts gefolgt vom Ablauf festgelegt. Die einzelnen Schritte werden dabei in Prozent angegeben, wobei für die Werte 0% und 100% auch from und to verwendet werden können. Es können beliebig viele Schritte festgelegt werden. Dabei gilt: die Prozent-Angaben sind immer in Relation zur Zeitspanne eines Animationsdurchlaufs zu sehen. Bei einem Durchlauf von 10 Sekunden sind 10% also 1 Sekunde.

Im zweiten Schritt definiert ihr bei dem entsprechenden Element den Namen (-webkit-animation-name), die Dauer eines Durchlaufs (-webkit-animation-duration) und die Anzahl der Wiederholungen (-webkit-animation-iteration-count).

Der Aufruf kann noch mit weitere Parametern erweitert werden, wie beispielsweise:

• -webkit-animation-timing-function: wird hier genauer erklärt
• -webkit-animation-direction: Abspielrichtung festlegen (entweder normal (vorwärts) ist Standard und braucht daher nicht eingetragen werden oder alternate (rückwärts)
• -webkit-animation-delay: Wert in Sekunden oder Millisekunden für die Verzögerung des Starts der Animation

Es gibt noch einige weitere Parameter, die ihr ihr hier nachlesen könnt.

So weit alles gut oder braucht ihr noch ein paar Anregungen, wie ihr dies für euch gewinnbringend nutzen könnt? Dann schaut euch meine Demo-Seite an. Dort gibt es einige Beispiele:

Animation des Hintergrundes

Wie wäre es mit einem animierten Hintergrund für deine Webseite? Ich hab da mal was vorbereitet:

Und hier noch ein Beispiel für den Wechsel der Hintergrundfarbe

Habt ihr auch Animationen erstellt, die ihr mit anderen teilen möchtet, dann immer her mit dem Code in die Kommentare. Wandert dann gleich in die Demo-Seite.

Wie bereits erwähnt bieten aktuell nur Webkit-Browser und der Firefox Unterstützung. Wer für die Zukunft gerüstet sein will, integriert auch gleich den vermeintlichen künftigen Standard-W3C-Aufruf:

@keyframes fade {
0% { opacity: 0.5; transform: scale(1.0); }
50% { opacity: 1; transform: scale(1.5); }
100% { opacity: 0.5; transform: scale(1.0); }
}

.box {
animation-name: fade;
animation-duration: 5s;
animation-iteration-count: 1;
}

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: