7 hilfreiche Tutorials zum Thema Transitions in CSS3

Das Thema Transition in CSS3 ist so neu nicht mehr, doch nach wie vor aktuell. Das liegt u.a. daran, dass mit Firefox und Chrome neuerdings zwei weitere Browser neben Safari auf dem Markt sind, die diese Funktion unterstützen.

So entwickeln sich CSS-Transitions von der Spielerei zur ernsten Alternative zu JavaScript, wenn es um Animationen im Webdesign geht. Deshalb habe ich 7 Tutorials rausgesucht, die einen Überblick über die Möglichkeiten von CSS-Transitions geben.

1. CSS: Transition Timing Functions

Der Artikel behandelt die Eigenschaften transition-duration und transition-timing-function, und beschreibt, wie man Dauer und Geschwindigkeit von Animationen beeinflusst.

2. CSS Transforms and Transitions - The OSX Dock example

Chris Walker zeigt, wie man den Mac OSX-Dock nur mithilfe von CSS3 nachbauen kann.

3. Going Nuts with CSS Transitions

Natalie Downe demonstriert, wie man eine Polaroid-Galerie mithilfe von CSS-Transitions baut.

4. Nicer Navigation with CSS Transitions

Schöne Anleitung, wie man Website-Navigationen schöner gestalten kann mit CSS3.

5. Create the accordion effect using CSS3

Der Akkordeon-Effekt nur mit CSS3 und Transitions realisiert.

6. CSS3 Hover Tabs ohne JavaScript

Hover Tabs ohne JavaScript. Über die Praxistauglichkeit dieser Lösung kann man streiten, aber nichtsdestotrotz veranschaulicht sie sehr schön die Möglichkeiten von CSS3.

7. CSS Transitions 101

Zum Abschluss eine schöne Gesamtübersicht zum Thema CSS-Transitions auf Webdesigner Depot.

Ich hoffe, ihr habt ein paar hilfreiche Sachen gefunden. Zwar surfen viele Leute noch immer mit einem veralteten Browser, der keine CSS-Transitions unterstützt, doch trotzdem gibt es Möglichkeiten, diese Technik bereits jetzt einzusetzen. Es sind eben die Details, wenn bspw. ein Link nicht schlagartig beim Hover die Farbe ändert, sondern das langsam tut, die eine moderne Website ausmachen. Hat man keinen modernen Browser, kommt man nicht in den Genuss, kann die Seite aber trotzdem nutzen.

Verwandte Beiträge

• Weichgezeichnete Schrift mit CSS3
• "Social Icon Bar" mit jQuery
• Hover- und Spotlight-Effekt in Bildergalerie mit jQuery