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 (entwedernormal
(vorwärts) ist Standard und braucht daher nicht eingetragen werden oderalternate
(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:
[…] JavaScript basierende Effekte auch alleine mit CSS umsetzbar, zum Beispiel mittels Transitionen und Animationen. Eine Übersicht der 16 besten Effekte mit CSS3 samt Tutorials gibt es auf dieser Webseite. Eine […]
hallo Olli!
ich habe ihre Seite beim Suchen per Suchmaschine entdeckt–>>>tolle seite erst mal und vorallen Dingen die Tutorials…da sage ich mal Hammer . Ich habe auch bei ihnen das entdeckt http://www.olivergast.de/wp-content/demos/spinning/index.html. Bei dem vertikalen Text brauchte ich Hilfe wie ich es in eine Tabelle einbinde.