Schöne neue CSS-Welt. Basierten Animationen auf Webseiten in der Vergangenheit mehrheitlich auf JavaScript, Flash und animierten Grafiken, bietet CSS3 die Möglichkeit Animationen direkt zu implementieren.

Zu beachten ist hier allerdings, daß erst die aktuelle Browsergeneration CSS3 transitionts ordentlich unterstützt. Bei älteren Browsern waren – je nach Browser – Präfixe nötig, um die Transition darzustellen, eine Übersicht dazu findet ihr z.B. hier .

Das grundlegende Prinzip für eine Transition ist einfach. Erstmal definiert ihr wie gewohnt euer Element, auf das ihr später eine Animation anwenden wollt. Das kann prinzipiell jedes Element sein, z.B.

a.test{
display:block;
background:#eee;
text-transform:uppercase;
padding:3px;
color:#444;
}

Damit haben einen simplen Button erstellt:

Testknopf

Bisher beschränken wir uns auf ein paar einfache Änderungen, um bei Berührung mit der Maus einen Effekt darzustellen, z.B. eine Änderung der Hintergrundfarbe. Dazu nutzen wir die Pseudoklasse :hover :

a.test:hover{
background:green;
color:#fff;
}

Testknopf

Das ganze lässt sich jetzt noch mit einer kleinen Transformation würzen um den Farbübergang zu anmieren:

a.test:hover{
background:green;
color:#fff;
transition:background 1s;
}

Testknopf

Wie man sieht, ist einzig die Zeile

transition:background 1s;

dazugekommen. Die Änderung der Darstellung selbst hatten wir ja bereits gesetzt. Wir sind nun nur einen Schritt weitergegangen und haben definiert, welche CSS-Eigenschaft animiert werden soll. Hier ist es background und geben an, in welchem Zeitraum die Änderung vollzogen werden soll (1s), den Rest macht der Browser für uns.

Es lassen sich mehrere Transitions kombinieren und so sehr umfangreiche Animationen erzeugen. In Kombination mit CSS-Sprite lassen sich auch sehr komplexe Animationen erzeugen.

Wenn man dann noch zu JavaScript greifen möchte und zus. HTML5 Elemente nutzt, lassen sich ohne großen Aufwand animierte Filme oder auch kleine Browserspiele erzeugen.