Wie man Transitions nutzt
CSS3 bietet sehr viele nützliche neue Features. Eines dieser Features sind Transitions (dt. Übergang/Blende). Mit Transitions lassen sich auf einfache Weise Effekte beim Übergang von einem Style zu einem anderen animieren.
Sieh Dir einmal die Navigation oben auf dieser Seite an. Es ist zwar nicht sehr auffällig, aber wenn Du genau hinschaust, wirst Du merken, dass der Link beim Mouseover nicht direkt die Farbe wechselt, sondern fließend von der einen in die andere Farbe übergeht. Das gleiche passiert übrigens mit allen Links auf der Webseite.
Um eine CSS-Eigenschaft zu animieren benötigen wir immer einen Anfangs- und einen Endzustand. Der Endzustand kann zum Beispiel über die Pseudo-Klasse :hover oder über eine Klasse definiert werden, die einem Element per Javascript zugewiesen wird. Um die Farbe von Links mittels Transitions zu animieren, reicht schon der folgende Code. Zu beachten ist, dass wir für Safari eine Regel mit dem Prefix -webkit, für Firefox mit dem Prefix -moz und für Opera eine Regel mit dem Prefix -o hinzufügen müssen.
aSolltest Du an mehreren Stellen in Deinen CSS-Dateien CSS3-Features nutzen, so kann ich Dir das Skript Prefix free empfehlen, das für Dich alle nötigen Prefix-Regeln für die unterschiedlichen Browser automatisch einfügt.
{color: #FF4E50;
-webkit-transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
-o-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;}
a:hover
{color: #2F9999;}
Betrachten wir jetzt einmal den Code genauer. Zuallererst wird die CSS-Eigenschaft definiert, die wir animieren wollen. Der W3C bietet eine Liste mit allen für Transitions möglichen CSS-Eigenschaften. In unserem Fall möchten wir nur die Farbe der Links animieren und nutzen daher color. Alternativ könnten wir in unserem Beispiel auch all nutzen, um alle Eigenschaften mit einer Transition zu versehen.
Der zweite Wert gibt die Länge der Animation an. In unserem Fall soll der Link also innerhalb von 25ms seine Farbe ändern.
Milthilfe des dritten Wertes kann die Zeitfunktion definiert werden. Möchten wir zum Beispiel, dass die Animation gleichmäßig/linear abläuft würden wir linear nutzen. Mögliche Werte für die Zeitfunktion sind linear (gleichmäßig), ease (langsamer Start, dann schneller und wieder langsam am Ende; der Start ist etwas schneller als das Ende), ease-in (langsamer Start, danach gleichmäßig schnell), ease-out (gleichmäßig schnell, danach langsames Ende), ease-in-out (langsamer Start, dann schneller und langsames Ende).
Alternativ zu den vorgegebenen Zeitfunktionen können wir auch eigene Funktionen definieren. Dazu legen wir mit cubic-bezier(x1,y1,x2,y2) die Form einer Bézierkurve fest, wobei x1 und x2 jeweils einen Wert von 0 bis 1 darstellen. y1 und y2 können auch größer als 1 oder kleiner als 0 sein und bewirken dann eine Art Bounce-Effekt. Wer mathematisch begabt ist und nähere Informationen zu Bézierkurven haben möchte, der kann hier mehr darüber erfahren. Allen Anderen empfehle ich, das nützliche Ceaser-Tool zu Hilfe zu nehmen.
Es gibt noch einen weiteren Parameter, den wir aber in unserem Beispiel nicht genutzt haben. Mithilfe von transition-delay können wir eine Verzögerung definieren. Das Beispiel unterhalb dieses Paragraphs zeigt, dass sich beim Mouseover die Ebene erst nach 0,5 Sekunden verbreitert und beim Mouseout auch erst nach 0,5 Sekunden wieder kleiner wird.
Um den Delay-Parameter zu nutzen, fügen wir ihn einfach als viertes Argument in die transition-Eigenschaft ein oder nutzen direkt die Eigenschaft transition-delay.
div.transition
{width: 100px;
height: 50px;
background: #FF4E50;
transition: all 2s ease .5s;
-webkit-transition: all 2s ease .5s;
-moz-transition: all 2s ease .5s;
-o-transition: all 2s ease .5s;}
div.transition:hover
{background: #2F9999;
width: 700px;}
Schauen wir uns jetzt ein Beispiel an, bei dem jQuery / Javascript und CSS3 Transitions kombiniert werden. Es soll ein div erstellt werden, das beim Mouseover seine Farbe und Breite ändert. Beim Mouseout soll dann nach einer Sekunde die Höhe der Ebene auf 350px vergrößert werden. Im Anschluss daran soll die Ebene dann auf ihre ursprüngliche Breite und danach auf ihre ursprüngliche Höhe verkleinert werden.
#transition
{width: 100px;
height: 50px;
background-color: #FF4E50;
-webkit-transition: height 1s ease 2s;
-moz-transition: height 1s ease 2s;
-o-transition: height 1s ease 2s;
transition: height 1s ease 2s;}
#transition.transition_class
{height: 350px;
-webkit-transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
-moz-transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
-o-transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;}
#transition:hover
{height: 50px;
-webkit-transition: width 1s ease, background-color 1s ease-in-out;
-moz-transition: width 1s ease, background-color 1s ease-in-out;
-o-transition: width 1s ease, background-color 1s ease-in-out;
transition: width 1s ease, background-color 1s ease-in-out;
background-color: #2F9999;
width: 600px;}
Schauen wir uns den Code einmal genauer an. Wir geben der Ebene #transition erst einmal eine feste Höhe und Breite und eine Hintergrundfarbe. Auf die definierte transition-Eigenschaft komme ich gleich noch zu sprechen.
Beim Mouseover kommt nun die Regel #transition:hover ins Spiel. Wir definieren, dass sich die Hintergrundfarbe und die Breite ändern soll und geben diese beiden Eigenschaften auch in der transition-Eigenschaft an. Dazu schreiben wir einfach die beiden Parameter mit Komma getrennt hintereinander. Die Breite sowie die Hintergrundfarbe sollen laut der Regel innerhalb von einer Sekunde geändert werden.
Als weitere Eigenschaft legen wir aber auch noch die Höhe auf 50px fest. Warum wir das tun, lässt sich einfach erklären. Zusätzlich zu der Eigenschaft #transition:hover soll auch noch eine weitere CSS-Regel beim Mouseover in Kraft treten und zwar die Regel .transition_class. Diese wird mittels jQuery beim Mouseover zu der Ebene hinzugefügt und bei Mouseout nach zwei Sekunden wieder entfernt.
$(document).ready(function()
{$("#transition").hover(function()
{$("#transition").addClass("transition_class");}, function()
{window.setTimeout(function()
{$("#transition").removeClass("transition_class");}, 3000);});});
In der Regel wird die Höhe auf 350px festgelegt und innerhalb der transition-Eigenschaft auf eine Sekunde Länge und eine Verzögerung von einer Sekunde festgelegt. Hätten wir die Höhe nicht schon in der #transition:hover-Regel festgelegt, würde beim Mouseover direkt die Höhe auf 350px gesetzt werden. Dadurch, dass wir dies aber gemacht haben, wird die vorher festgesetzte Höhe von 350px überschrieben. Es ist hier also wichtig, auf die Reihenfolge der CSS-Regeln zu achten!
Die Animation läuft nun folgendermaßen ab: beim Mouseover treten sowohl die Regel #transition:hover als auch .transition_class in Kraft. Da die #transition:hover-Regel aber in der CSS-Datei hinter der .transition_class-Regel steht und beide Regeln die gleiche Spezifität haben, werden alle sich überschneidenden Regeln überschrieben. In unserem Fall heißt das, dass beim Mouseover keine der .transition_class-Parameter Verwendung findet.
Die Ebene verbreitert sich auf 600px und verändert ihre Hintergrundfarbe. Sobald die Maus aus der Ebene heraus wandert, wird die #transition:hover-Regel nicht mehr angewendet und es tritt die .transition_class-Regel an ihre Stelle. In dieser Regel wird definiert, dass die Hintergrundfarbe innerhalb von einer Sekunde wechseln soll, die Höhe mit einer Sekunde Verzögerung auf 350px vergrößert werden soll und die Breite nach zwei Sekunden animiert werden soll.
Nachdem die Ebene ihre ursprüngliche Breite von 100px erreicht hat, wird die Klasse .transition_class entfernt (per jQuery nach 3000 Milisekunden). Es tritt nun als letztes die transition-Eigenschaft der #transition-Regel in Kraft. Die Höhe wird also innerhalb von einer Sekunde auf 50 px verkleinert.
Hinweis: Das obige Beispiel solltest Du nicht so wie es ist für Deine Webprojekte nutzen. Der jQuery-Code wurde vereinfacht und bietet keine Überprüfung, ob der Timeout noch läuft oder nicht oder ob die CSS-Animation bereits bis zum Ende gelaufen ist oder nicht. Die Folge ist, dass bei mehrmaligem Mouseover hintereinander die Animation nicht mehr geregelt abläuft.
Alternativ zu einer JavaScript/jQuery-Lösung lässt sich das obige Beispiel auch nur mit CSS3 realisieren. Hierfür würden wir CSS3 animations verwenden und mithilfe von Keyframes die obige Animation erstellen. Nähere Informationen zu CSS3 Animationen gibt es hier.
Sollte man Transitions nutzen?
Nachdem wir nun einen Überblick über die Funktionsweise von Transitions bekommen haben, stellt sich nun die Frage, ob und in welchen Fällen diese überhaupt genutzt werden sollten.
Es lässt sich pauschal nicht sagen, ob Transitions genutzt werden sollten oder nicht. Geht es Dir darum, den animierten Übergang browserunabhängig korrekt anzuzeigen oder ist die Transition von funktionaler Bedeutung, wirst Du wohl oder übel – zumindest für die Browser, die keine Transitions unterstützen – auf Javascript/Jquery zurückgreifen müssen. Soll die Transition jedoch nur als hübsche Ergänzung genutzt werden (z.B. bei Transitions der Linkfarbe) ist ihr Einsatz sehr sinnvoll. In diesem Fall zeigen ältere Browser zwar die Animation nicht an, dies hat aber keinerlei Nachteile für die Funktion der Seite. Der Hover-Effekt des Links würde dann ganz normal ohne Animation dargestellt werden.
