CSS3 Animationen - Ein erster Einstieg

Vielleicht haben Sie schon einmal davon gehört: CSS3-Animationen. Es soll also möglich sein nur mit CSS eine kleine Animation zu erstellen. Doch wie geht das? Am Besten probieren wir es einmal an einem kleinen Beispiel, um die Grundzüge zu verstehen.

Wir nehmen an, wir wollen einen einfachen Text rotieren lassen:

Demo

Zuerst wird die Animation im CSS der Seite definiert:

1@keyframes move
2{
3	50% { margin-left: 500px;}
4	100% { transform: rotate(360deg);}
5}

Zur Erklärung: Man erstellt ein Definition mit dem Namen @keyframes und benennt es ganz nach seinen Vorlieben. Ich habe die Animation hier move genannt. In den Anweisungen für dieses Element wird für die jeweiligen Animationsfortschritt in Prozent der Zustand abspeichern. Hier zum Beispiel eine Rotation um 360° und bei 50% eine Verchiebung zu margin-left: 500px.

Aber: So einfach läuft es auf der Welt einfach nun einmal nicht: Natürlich funktioniert es bei Firefox nur mit @-moz-keyframes und bei Safari und Chrome nur mit @-webkit-keyframes und transform braucht natürlich auch noch ein Prefix. Und ja: Der Internet-Explorer fällt durch, war ja klar.

Also nochmal für alle:

 1@keyframes move
 2{
 3  50% { margin-left: 500px;}
 4  100% { transform: rotate(360deg);}
 5}
 6@-moz-keyframes move
 7{
 8  50% { margin-left: 500px;}
 9  100% { -moz-transform: rotate(360deg);}
10}
11@-webkit-keyframes move
12{
13	50% { margin-left: 500px;}
14	100% { -webkit-transform: rotate(360deg);}
15}

Jetzt wird der CSS-Definition die gewünschte Animation zugewiesen:

1.demo_object{
2	animation: move 2s infinite;
3}

Es läuft also nach dem Muster:

animation: <Länge der Animation> [unendlichkeit (optional)]

Man gibt den Namen der Animation, die vorher definiert wurde und danach die gewünschte Länge der Animation an. Zusätzlich kann man noch defninieren, ob die Animation unendlich wiederholt werden soll, und zwar mit infinite.

Und, Sie ahnen es schon, das Spiel wiederholt sich. Also:

1.demo_object{
2	animation: move 2s infinite;
3	-moz-animation: move 2s infinite;
4	-webkit-animation: move 2s infinite;
5}

CSS-Animationen stellen schon heute eine gute Möglichkeit dar HTML-Elemente zu animieren. Zu wüschen wäre jedoch eine bessere Unterstützung der Browser und kein Zwang zur Nutzung der browserspezifischen Prefixe. Da der Internet-Explorer jedoch immer noch eine große Verbreitung aufweist, muss mit der Verwendung noch ein wenig gespart werden, bzw. ein Fallback angeboten werden.