Animationen für alle: CSS3 Transitions

In diesem Blogpost möchte ich mal ein wenig auf CSS3 eingehen. Das meiste, dass durch CSS3 ermöglicht wird, ging auch schon vorher – allerdings nicht selten mit hunderten Zeilen zusätzlichen Javascript-Code.
Wenn CSS3 erstmal in allen Browsern hinreichend unterstützt wird, ist vieles von diesem Code hinfällig.
Ein nettes Beispiel dafür bieten CSS Transisitons (die von den meisten WebKit Browsern wie Safari, Chrome, etc. bereits unterstützt werden):
Mit ihnen kann man CSS3 Transformationen auf ein HTML Element animieren.
Einfaches Beispiel: Eine Box soll sich um 30° drehen und dabei die Farbe und Größe ändern wenn man mit der Maus darüber geht.
Klingt aufwändig, ist aber ganz einfach, man definiert einfach ein Element mit der CSS Eigenschaft ‘transition-duration’, z.B.

#Element {
transition-duration: 1s linear;
-webkit-transition-duration: 1s linear;
-moz-transition-duration: 1s linear;
width: 200px;
height: 200px;
...
}

Will man das Objekt jetzt beim Mouseover animieren, benötigt man nur noch eine ‘transform’ Eigenschaft im CSS File:

#Element:hover {
transform: rotate(350deg) rotate(-30deg);
-webkit-transform: rotate(350deg) rotate(-30deg);
-moz-transform: rotate(350deg) rotate(-30deg);
}

Dieses Beispiel habe ich an einem Blogpost von Mozilla angelehnt (deren Firefox das auch bald unterstützt) und etwas abgespeckt, live im Browser kann man sich das hier anschauen (Safari, Chrome oder Opera vorrausgesetzt).
Das ganze sollte mit allen HTML Tags, die im Browser gezeichnet werden funktionieren – also kann man damit auch z.B. Videoflächen animieren.
Dezent eingesetzt lassen sich damit Schaltflächen schnell, einfach und ohne Programmierkenntnisse betonen.