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.
[css]
.box {
width:200px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;
}
[/css]
[css]
.box:hover {
width:100px;
}
[/css]
[css]
.box {
width:200px;
transition: width 1s ease-in;
}
[/css]
[css]
.box:hover {
width:100px;
}
[/css]
[css]
.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;
}
[/css]
Fangen wir mit folgendem Beispiel an:
[css]
.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;
}
[/css]
[css]
.box:hover {
width:100px;
height:200px;
}
[/css]
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:
[css]
.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;
}
[/css]
[css]
.box:hover {
background:#ccc;
-moz-border-radius: 40px;
border-radius: 40px;
}
[/css]
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:
Du musst angemeldet sein, um einen Kommentar abzugeben.
4 Kommentare
Hallo!
In der Demo mit dem Schatten:
.box:hover {
-moz-box-shadow: inset 3px 3px 10px #999;
-webkit-box-shadow: inset 3px 3px 10px #999;
box-shadow: inset 3px 3px 10px #999;
}
Muss da nicht -o-box-shadow für Opera stehen?
Lg…
Hallo Axel,
Opera unterstützt ab Version 10.5
box-shadow
. Genau wie für den IE 9 und die neuesten Versionen der Webkit-Browser sowie Firefox wird kein spezielles Browser-Präfix benötigt.Die Präfixe für Mozialla und Webkit-Browser stellen lediglich die Kompatibilität für ältere Versionen sicher.
Gruß Olli
Hi Oli!
Danke für die Zusammenstellung! 🙂
Sehr gebräuchlich. Dankeschön.