CSS3 Transitions werden von allen aktuellen Browsern unterstützt und bietet uns viele neue Möglichkeiten. Die meisten HTML- und CSS Anfänger trauen sich jedoch nicht, diese Möglichkeiten heute schon anzuwenden.
vierpunkt hilft, diese Techniken zu verstehen und einzusetzen.

CSS3 Transitions

Das neue CSS3 bietet uns die Möglichkeiten, Bereiche auf unserer Webseite zu „animieren“. Die CSS3 Transitions helfen uns dabei, für den Anfang kleinere Animationen bzw. Übergänge zu realisieren.

Man kennt das: Sie fahren mit dem Mauszeiger über einen Link und der Text wechselt schlagartig die Farbe.

Diese Funktion (das Hovern) können wir auch für andere Elemente auf der Webseite verwenden und den Effekt mit einem Übergang – der Transition – weicher bzw. sanfter gestalten.

CSS3 Transitions

Hier zu sehen: Ein sanfter Übergang von rot zu blau – die Vorgehensweise von CSS3 Transitions

Please :hover

CSS3 Transition mit Hover

Um einen solchen Übergang zu realisieren, nutzen wir den Hover-Effekt von Links.

a {
color: black;
text-decoration: none;
}
a:hover {
color:green;
text-decoration: underline;
}

Der Hover-Effekt in diesem Code-Beispiel bewirkt, dass ein schwarzer Link ohne Text-Dekoration beim Hover mit der Maus grün gefärbt und unterstrichen wird. Dieser Effekt passiert jedoch plötzlich und unsanft. Wollen wir den Effekt sanfter gestalten, nutzen wir nun die CSS3 Transition.

transition: .3s all ease

Dieser Befehl beschreibt nun den Übergang. Die Dauer der CSS3 Transition beträgt 0,3 Sekunden bzw .3s, der Übergang betrifft „color“ und „text-decoration„, also „all„. Ease beschreibt den Verlauf des Übergangs – von langsam über schnell zu einem langsamen Ende. Hier gibt es mehrere Verläufe, ease ist jedoch in den meisten Fällen schon angebracht.
Die Dauer der CSS3 Transition kann in Zehntel-Sekunden (.1s) oder ganzen Sekunden (2s) angegeben werden. Sollte der Übergang nur ein einziges Attribut des Elements betreffen, reicht es aus, anstatt „all“ dieses Attribut anzugeben.

Damit der Übergang dann auch in beide Richtungen wirkt (Hover und auch zurück zu Normalzustand), muss er in beiden Zuständen angegeben werden. Die fertige CSS3 Transition sieht also so aus:

a {
color: black;
text-decoration: none;
transition: .3s all ease;
}
a:hover {
color:green;
text-decoration: underline;
transition: .3s all ease;
}

CSS3 Transitions auf anderen Elementen

Wir können den Hover-Effekt und die CSS3 Transitions nun auch auf anderen Elementen nutzen, auf denen es Sinn macht, sie hervorzuheben, wenn man sie mit der Maus überfährt.

Wir nutzen die CSS3 Transitions auf vierpunkt.de oft – auch hier bei den Profilbildern der Autoren. Im Normalzustand sind unsere Profilbilder rund, beim Hover ändert sich die Form über eine CSS3 Transition zu einem abgerundeten Rechteck.
Wie funktioniert das?

Auch diese CSS3 Transition ist eigentlich sehr einfach:
Unsere Profilbilder liegen in einem eigenen Div-Container (.autor_ava). Nun können wir also per CSS auf den Container und das darin befindliche Bild zugreifen

.autor_ava img {
border-radius: 50%;
}

In HTML gibt man Bilder immer mit einem img-Tag an. So können wir über den umliegenden Container direkt auf dieses img-Tag zugreifen. Per border-radius können wir einen Ecken-Radius angeben. Setzen wir diesen auf 50%, wird das Bild logischerweise rund.

Um dem Bild jetzt den Hover-Effekt zu verleihen, nutzen wir folgenden Code:

.autor_ava img:hover {
border-radius: 25%;
}

Mit einem Eckenradius von 25% ist unser Profilbild beim Hover nicht mehr rund, sondern nur noch ein Rechteck mit abgerundeten Ecken.

Nun können wir die CSS3 Transition ansetzen, um den Hover-Effekt mit einem sanften Übergang zu versehen. Damit der Effekt besser sichtbar wird, haben wir uns hier für eine längere Dauer der CSS3 Transition entschieden.

transition: 1s border-radius ease;

Sinn und Zweck von CSS3 Transitions

Der Sinn und Zweck von CSS3 Transitions ist der Gleiche wie beim Hover-Effekt. Erstmal keiner. Es ist eine schöne Spielerei, die aber natürlich immer den Blick auf sich lenkt. Während der normale Hover-Effekt abrupt und unsanft ist, kann man diesen mit den CSS3 Transitions aufhübschen und weicher gestalten.

Die CSS3 Transitions begeistern den Lesern zwar nicht direkt, er wird es Ihnen dennoch danken, wenn Ihre Webseite schön gestaltet und sanft in der Bedienung ist. Niemand will von plötzlichen Effekten erschlagen werden und freut sich deshalb über die weichen Übergänge der CSS3 Transitions.