Für mich eines der coolsten neuen CSS3-Features: die Eigenschaft “transition”. Damit erstellt ihr auf einfache Weise Animationen und Übergänge für HTML-Elemente, ohne das Javascript oder Flash-Animationen benötigt werden. Ich habe mal ein paar nette Beispiele zusammengestellt, die ihr euch auf der Demo-Seite anschauen könnt. Vielleicht ist ja auch für euch was dabei.

Syntax

.box {
width:200px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;
}

.box:hover {
width:100px;
}

Shorthand

.box {
width:200px;
transition: width 1s ease-in;
}

.box:hover {
width:100px;
}

Browserunterstützung

.box {
-moz-transition: width 1s, height 2s, ease-in;
-webkit-transition: width 1s, height 2s, ease-in;
-o-transition: width 1s, height 2s, ease-in;
transition: width 1s, height 2s, ease-in;
}

• Apple Safari 5+
• Google Chrome 10+
• Mozilla Firefox 4+
• Opera 11.1+

Beschreibung

Fangen wir mit folgendem Beispiel an:

.box {
width:200px;
height:100px;
-moz-transition: width 1s, height 2s, ease-in;
-webkit-transition: width 1s, height 2s, ease-in;
-o-transition: width 1s, height 2s, ease-in;
transition: width 1s, height 2s, ease-in;
}

.box:hover {
width:100px;
height:200px;
}

Wie ihr seht, geht transition Hand in Hand mit Pseudo-Klassen. Im Beispiel wird die Weite und Breite des Elements bei :hover angepasst. Dies erfolgt in einem Zeitfenster von 1 Sekunde für die Weite und 2 Sekunden in der Höhe. Als letzter Parameter wird die Art der Animation angegeben. Hier besteht die Wahl zwischen

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier

Eine Erklärung spare ich mir mal an dieser Stelle, da die Unterschiede aus meiner Sicht eh marginal sind. Wer mehr darüber erfahren möchte, kann hier alles dazu nachlesen.

Ein weiteres Beispiel:

.box {
background:#999;
width:200px;
height:100px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

.box:hover {
background:#ccc;
-moz-border-radius: 40px;
border-radius: 40px;
}

Die Eigenschaft, die animiert werden soll, muss nicht explizit genannt sein. Mit der Angabe all können alle Eigenschaften, die mit der Pseudo-Klasse geändert werden, animiert werden. Im vorigen Beispiel erfolgt eine Anpassung der Hintergrundfarbe sowie der Ecken-Rundung innerhalb von 0,5 Sekunden.

Transition kann aber nicht nur die Pseudo-Klasse :hover bedienen, sondern harmoniert beispielsweise auch mit :active oder :focus. In diesem Artikel habe ich das anhand einer Bildergalerie demonstriert. Einige sehr nette Ideen im Zusammenspiel mit Pseudo-Klassen findet ihr hier.

Genug der Theorie. Lassen wir einfach Bilder sprechen. Seht euch die Demo-Seite mit Beispielen an.

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