Aaaah *rülps* Weihnachten..

Ich weiß ja nicht, wie ihr es mit Weihnachten haltet, aber ich mag es. Die Familie ist da, jeder kriegt Geschenke und es gibt wahnsinnig viel lecker Essen UND DAS DREI TAGE LANG! (Bis auf die Geschenke versteht sich.. obwohl.. wäre auch mal cool eigentlich ) Kommen wir zum eigentlichen Thema des Tages: CSS Transitions!

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits vollständig:

(Opera unterstützt noch nicht alle Properties, IE erst ab Version 10)

Animationen bei Mouse-Hover

Prinzipiell dient Transition dazu eine Änderung am Styling eines Elements zu verlängern. Natürlich kennen wir alle schon die Peusoklasse :hover und auch, dass wir damit Eigenschaften des Normalzustandes überschreiben können. Transition greift genau an diesem Punkt an. Wir können bestimmen, wie lang diese Änderung dauert, welche Eigenschaften davon betroffen sind, ob es eine Pause gibt, bevor die Änderung beginnt und das Muster, in der sie abläuft (dazu wird eine Bézierkurve benutzt). Es entsteht eine kurze Animation.

Syntax

Die Kurzform lautet transition, danach folgen bis zu vier Werte, die gleichzeitig auch als einzelne Befehle benutzt werden können, ähnlich wie das bei padding oder background auch der Fall ist.

1. transition-property – gibt an, welche Eigenschaft animiert werden soll, Default ist all
2. transition-duration – ein dezimaler Wert in Sekunden, der für die Länge der Transition steht, Default ist 0s (0 Sekunden, also keine Transition sichtbar)
3. transition-timing-function – mehrere Schlüsselwörter möglich, eigenen Kurven-Beschreibungen möglich, Default ist ease
4. transition-delay – Länge der Pause in Sekunden bis Transition beginnt, Default ist 0s

Da der Standard bisher nicht zu 100% fertig ist, unterstützen alle Browser Transition mit dem jeweils bekannten Prefix. An einem Beispiel wollen wir erreichen, dass sich die Textfarbe eines Links bei Mouse-Over innerhalb einer Sekunde von Blau zu Rot ändert.

CSS

1
2
3
4
5
6
7
8
9
10
11

a {
	color:blue;
	-moz-transition:all 1s ease 0s; /*Firefox*/
	-webkit-transition:all 1s ease 0s; /*Safari + Chrome*/
	-o-transition:all 1s ease 0s; /*Opera*/
	-ms-transition:all 1s ease 0s; /*Internet Explorer*/
	transition:all 1s ease 0s; /*W3C Standard*/
}
a:hover {
	color:red;
}

Man könnte auch nur transition:1s schreiben und den Rest den Defaultwerten überlassen aber ein Beispiel sollte ausführlicher sein. Der Effekt bliebe übrigens der gleiche, wenn wir ausschließlich transition-duration (samt allen Prefixes) verwenden würden, weil im Beispiel nur die Rede von einer Sekunde ist.

Was vielleicht noch erwähnenswert ist..

• die Transition-Eigenschaften schreibt man immer in den Selector ohne Pseudoklasse
• und der Wert für transition-duration sollte immer zwischen 0s und 1s liegen

Alles, was länger dauert, bringt dem User nicht das Geringste und die Webseite wirkt dadurch nur unglaublich träge.

Ergebnis

Bewege die Maus über diesen Link

Wie wir leicht sehen, läuft der Wechsel von Blau nach Rot in einer Sekunde ab und nicht wie normal sofort nachdem die Maus über dem Element schwebt.

Dadurch, dass es viele Properties gibt, die durch Transition beeinflusst werden können, gibt es extrem viele Möglichkeiten schöne und sinnvolle Effekte zu erzielen. Auch ich benutze es an einigen Stellen.. dem Weiterlesen-Button, Bilderrahmen, den Social Media Buttons links, das Einblenden des Text-Overlays bei verwandten Artikeln usw.

Fazit

CSS Transitions sind eine prima Sache zum Spielen und ausprobieren. Einige nervige Javascript-Lösungen lassen sich komplett damit ersetzen und User haben das Gefühl es mit einer edlen, unaufdringlichen Website zu tun zu haben.

CSS Transition Demo

Ich habe auch noch eine weitere Demo geschrieben, die zeigt, was man alles so animieren kann. Trotzdem ist auch sie nur die Spitze des Eisberges, ich bin sicher, dass ihr euch noch viel tollere Beispiele ausdenken werdet.

Viel Spaß also beim Experimentieren und da es unwahrscheinlich ist, dass ich dieses Jahr noch einen Artikel schreibe, wünsche ich euch schonmal einen guten Start ins neue Jahr (das wäre dann schon 2012)!