Betrachten wir jetzt einmal den Code genauer. Zuallererst wird die CSS-Eigenschaft definiert, die wir animieren wollen. Der W3C bietet eine Liste<\/a> mit allen f\u00fcr Transitions m\u00f6glichen CSS-Eigenschaften. In unserem Fall m\u00f6chten wir nur die Farbe der Links animieren und nutzen daher color<\/span>. Alternativ k\u00f6nnten wir in unserem Beispiel auch all<\/span> nutzen, um alle Eigenschaften mit einer Transition zu versehen.<\/p>\n Der zweite Wert gibt die L\u00e4nge der Animation an. In unserem Fall soll der Link also innerhalb von 25ms seine Farbe \u00e4ndern.<\/p>\n Milthilfe des dritten Wertes kann die Zeitfunktion definiert werden. M\u00f6chten wir zum Beispiel, dass die Animation gleichm\u00e4\u00dfig\/linear abl\u00e4uft w\u00fcrden wir linear<\/span> nutzen. M\u00f6gliche Werte f\u00fcr die Zeitfunktion sind linear<\/span> (gleichm\u00e4\u00dfig), ease<\/span> (langsamer Start, dann schneller und wieder langsam am Ende; der Start ist etwas schneller als das Ende), ease-in<\/span> (langsamer Start, danach gleichm\u00e4\u00dfig schnell), ease-out<\/span> (gleichm\u00e4\u00dfig schnell, danach langsames Ende), ease-in-out<\/span> (langsamer Start, dann schneller und langsames Ende).<\/p>\n Alternativ zu den vorgegebenen Zeitfunktionen k\u00f6nnen wir auch eigene Funktionen definieren. Dazu legen wir mit cubic-bezier(x1,y1,x2,y2)<\/span> die Form einer B\u00e9zierkurve fest, wobei x1 und x2 jeweils einen Wert von 0 bis 1 darstellen. y1 und y2 k\u00f6nnen auch gr\u00f6\u00dfer als 1 oder kleiner als 0 sein und bewirken dann eine Art Bounce-Effekt. Wer mathematisch begabt ist und n\u00e4here Informationen zu B\u00e9zierkurven haben m\u00f6chte, der kann hier<\/a> mehr dar\u00fcber erfahren. Allen Anderen empfehle ich, das n\u00fctzliche Ceaser-Tool<\/a> zu Hilfe zu nehmen.<\/p>\n Es gibt noch einen weiteren Parameter, den wir aber in unserem Beispiel nicht genutzt haben. Mithilfe von transition-delay<\/span> k\u00f6nnen wir eine Verz\u00f6gerung 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.<\/p>\n <\/p>\n Beim Mouseover kommt nun die Regel #transition:hover<\/span> ins Spiel. Wir definieren, dass sich die Hintergrundfarbe und die Breite \u00e4ndern soll und geben diese beiden Eigenschaften auch in der transition<\/span>-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\u00e4ndert werden.<\/p>\n Als weitere Eigenschaft legen wir aber auch noch die H\u00f6he auf 50px fest. Warum wir das tun, l\u00e4sst sich einfach erkl\u00e4ren. Zus\u00e4tzlich zu der Eigenschaft #transition:hover<\/span> soll auch noch eine weitere CSS-Regel beim Mouseover in Kraft treten und zwar die Regel .transition_class<\/span>. Diese wird mittels jQuery beim Mouseover zu der Ebene hinzugef\u00fcgt und bei Mouseout nach zwei Sekunden wieder entfernt.<\/p>\n In der Regel wird die H\u00f6he auf 350px festgelegt und innerhalb der transition<\/span>-Eigenschaft auf eine Sekunde L\u00e4nge und eine Verz\u00f6gerung von einer Sekunde festgelegt. H\u00e4tten wir die H\u00f6he nicht schon in der #transition:hover<\/span>-Regel festgelegt, w\u00fcrde beim Mouseover direkt die H\u00f6he auf 350px gesetzt werden. Dadurch, dass wir dies aber gemacht haben, wird die vorher festgesetzte H\u00f6he von 350px \u00fcberschrieben. Es ist hier also wichtig, auf die Reihenfolge der CSS-Regeln zu achten!<\/p>\n Die Animation l\u00e4uft nun folgenderma\u00dfen ab: beim Mouseover treten sowohl die Regel #transition:hover<\/span> als auch .transition_class<\/span> in Kraft. Da die #transition:hover<\/span>-Regel aber in der CSS-Datei hinter der .transition_class<\/span>-Regel steht und beide Regeln die gleiche Spezifit\u00e4t haben, werden alle sich \u00fcberschneidenden Regeln \u00fcberschrieben. In unserem Fall hei\u00dft das, dass beim Mouseover keine der .transition_class<\/span>-Parameter Verwendung findet.<\/p>\n Die Ebene verbreitert sich auf 600px und ver\u00e4ndert ihre Hintergrundfarbe. Sobald die Maus aus der Ebene heraus wandert, wird die #transition:hover<\/span>-Regel nicht mehr angewendet und es tritt die .transition_class<\/span>-Regel an ihre Stelle. In dieser Regel wird definiert, dass die Hintergrundfarbe innerhalb von einer Sekunde wechseln soll, die H\u00f6he mit einer Sekunde Verz\u00f6gerung auf 350px vergr\u00f6\u00dfert werden soll und die Breite nach zwei Sekunden animiert werden soll.<\/p>\n Nachdem die Ebene ihre urspr\u00fcngliche Breite von 100px erreicht hat, wird die Klasse .transition_class<\/span> entfernt (per jQuery nach 3000 Milisekunden). Es tritt nun als letztes die transition<\/span>-Eigenschaft der #transition<\/span>-Regel in Kraft. Die H\u00f6he wird also innerhalb von einer Sekunde auf 50 px verkleinert.<\/p>\n Hinweis:<\/strong> Das obige Beispiel solltest Du nicht so wie es ist f\u00fcr Deine Webprojekte nutzen. Der jQuery-Code wurde vereinfacht und bietet keine \u00dcberpr\u00fcfung, ob der Timeout noch l\u00e4uft 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\u00e4uft.<\/p>\na
\n{color: #FF4E50;
\n-webkit-transition: color .25s ease-in-out;
\n -moz-transition: color .25s ease-in-out;
\n -o-transition: color .25s ease-in-out;
\n transition: color .25s ease-in-out;<\/span>}
\na:hover
\n{color: #2F9999;<\/span>}<\/code>Solltest Du an mehreren Stellen in Deinen CSS-Dateien CSS3-Features nutzen, so kann ich Dir das Skript Prefix free<\/a> empfehlen, das f\u00fcr Dich alle n\u00f6tigen Prefix-Regeln f\u00fcr die unterschiedlichen Browser automatisch einf\u00fcgt.<\/p>\n
\nUm den Delay-Parameter zu nutzen, f\u00fcgen wir ihn einfach als viertes Argument in die transition<\/span>-Eigenschaft ein oder nutzen direkt die Eigenschaft transition-delay<\/span>.<\/p>\ndiv.transition
\n{width: 100px;
\n\theight: 50px;
\n\tbackground: #FF4E50;
\n\ttransition: all 2s ease .5s;
\n\t-webkit-transition: all 2s ease .5s;
\n\t-moz-transition: all 2s ease .5s;
\n\t-o-transition: all 2s ease .5s;<\/span>}
\ndiv.transition:hover
\n{background: #2F9999;
\n\twidth: 700px;<\/span>}<\/code>
\nSchauen wir uns jetzt ein Beispiel an, bei dem jQuery \/ Javascript und CSS3 Transitions kombiniert werden. Es soll ein div<\/span> erstellt werden, das beim Mouseover seine Farbe und Breite \u00e4ndert. Beim Mouseout soll dann nach einer Sekunde die H\u00f6he der Ebene auf 350px vergr\u00f6\u00dfert werden. Im Anschluss daran soll die Ebene dann auf ihre urspr\u00fcngliche Breite und danach auf ihre urspr\u00fcngliche H\u00f6he verkleinert werden.<\/p>\n#transition
\n{width: 100px;
\n\theight: 50px;
\n\tbackground-color: #FF4E50;
\n\t-webkit-transition: height 1s ease 2s;
\n\t-moz-transition: height 1s ease 2s;
\n\t-o-transition: height 1s ease 2s;
\n\ttransition: height 1s ease 2s;<\/span>}
\n#transition.transition_class
\n{height: 350px;
\n -webkit-transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
\n\t-moz-transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
\n\t-o-transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
\n\ttransition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;<\/span>}
\n#transition:hover
\n{height: 50px;
\n\t-webkit-transition: width 1s ease, background-color 1s ease-in-out;
\n\t-moz-transition: width 1s ease, background-color 1s ease-in-out;
\n\t-o-transition: width 1s ease, background-color 1s ease-in-out;
\n\ttransition: width 1s ease, background-color 1s ease-in-out;
\n\tbackground-color: #2F9999;
\n\twidth: 600px;<\/span>}
\n<\/code>
\nSchauen wir uns den Code einmal genauer an. Wir geben der Ebene #transition<\/span> erst einmal eine feste H\u00f6he und Breite und eine Hintergrundfarbe. Auf die definierte transition<\/span>-Eigenschaft komme ich gleich noch zu sprechen.<\/p>\n$(document).ready(function()
\n{$(\"#transition\").hover(function()
\n{$(\"#transition\").addClass(\"transition_class\");<\/span>}, function()
\n{window.setTimeout(function()
\n{$(\"#transition\").removeClass(\"transition_class\");<\/span>}, 3000);<\/span>});<\/span>});<\/code><\/p>\n
![\"arrow](\"http:\/\/www.lingulo.com\/wp-content\/uploads\/2013\/04\/arrowright.png\")
<\/span>![\"Browsersupport](\"http:\/\/www.photopolis.de\/blog\/wordpress\/wp-content\/uploads\/2013\/04\/browsersupport-transition.png\")