CSS-Eigenschaft: transition, Kategorien: Animierte Inhalte (allgemein), Transitions (CSS 3)
Transition (allgemein)
Kurzschreibweise von transition-property, transition-duration, transition-timing-function und transition-delay. Steuert eine Transition (Übergang) eines HTML-Elements.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Transition (allgemein) | see individual properties |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Animierte Inhalte (allgemein), Transitions (CSS 3):
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- Aktuelle Seite: transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Folgendes ist beim Einsatz von transition zu beachten:
- transition ist die Kurzschreibweise für transition-property,
transition-duration, transition-timing-function
und transition-delay.
- transition-property definiert die CSS-Eigenschaft, die mit der transition versehen werden soll.
- transition-duration bestimmt die Dauer der transition. Zulässige Werte sind Sekunden oder Millisekunden, die Schreibweise ist s bzw. ms.
- transition-timing-function steuert das GeschwindigkeitsÂverhalten der transition.
- transition-delay definiert eine Verzögerung einer transition. Werte werden ebenfalls Sekunden oder Millisekunden angegeben. Negative Werte sind zulässig, das genaue Verhalten unter transition-delay.
- Pflichtangaben sind transition-property und transition-duration, ohne diese kommt es zu keiner Darstellung der transition. Die beiden anderen Parameter sind optional und werden durch die Standardwerte ergänzt, falls diese nicht angegeben ist. Default sind ease für das GeschwindigkeitsÂverhalten und 0s für die Verzögerung.
- Die einzelnen Parameter können fast in beliebiger Ordnung notiert werden. Lediglich die Reihenfolge der Zeitangaben ist nicht beliebig und für die Darstellung relevant: Der erste Zeitwert in der Kurzschreibweise wird als Dauer, der zweite wird als Verzögerung umgesetzt.
- Die einzelnen Parameter werden durch Leerzeichen voneinander getrennt. Es können in einem Ausdruck mehrere transition definiert werden. Die einzelnen Transition-Blöcke werden mit einem Komma voneinander getrennt.
- Eine Übersicht von transitionierbaren Eigenschaften ist unter all-transition-properties.html zu finden. Dort ist jede Box mit einer anderen CSS-Eigenschaft zu sehen. Beim Überfahren mit der Maus oder auch beim Durchtabben wird die jeweilige transition dargestellt.
- Nicht alle CSS-Eigenschaften sind in allen Browsern mit einer transition zu versehen. Safari 5, Firefox 8 unterstützen die meisten Eigenschaften. Opera 11 steigt bei einzelnen Eigenschaften aus, Internet Explorer 9 unterstützt keine Transition. Im Einzelfall muss die jeweilige Eigenschaft getestet werden. Beispielsweise treten Probleme auf, wenn die transition die eine Breite von 200px auf 100% (Wechsel der Maßeinheit) verändern soll. Ebenfalls können Probleme auftauchen, wenn eine transition für padding definiert wird (Einsatz von Kurzschreibweisen). Hier kann die Angabe der einzelnen Parameter padding-top usw. hilfreich sein.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Hinweis
Eine umfassende Einführung in Transitions ist bei den Webkrauts zu finden: CSS3 im Praxistest: Transition
Eine Transition ist mit dem Übergang von Zuständen zu beschreiben. Bei einem herkömmlichen Mouseover wird über das :hover das Aussehen eines Elements verändert. Der Zustand des Elements schaltet jedoch einfach nur um, von jetzt auf gleich.
Über eine Transition können Übergänge zwischen den beiden Zuständen definiert werden, sodass sich das Aussehen des HTML-Elements über eine bestimmte Dauer aus dem Anfangszustand in den Endzustand verwandelt.
Effekte einer Transition waren bislang nur über JavaScript oder Flash möglich. Langfristig bedeutet das, dass solche Umwege über Plugins oder Skripte der Vergangenheit angehören werden.
Transition verursachen immer eine Rechenleistung im Browser und ist damit auch abhängig von der Leistung des Betriebssystems. Ein schwacher Computer oder zu viel gleichzeitig laufende Transitions können Ursache dafür sein, dass die Übergange "ruckelig" und nicht flüssig darstellt werden.
Weiterführende Informationen zu transition:
- W3C Spezifikation:
http://www.w3.org/TR/css3-transitions/#transition - Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
transform-style - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
transition-delay
Beispiele
HTML:
<div id="example-1">transition</div>CSS:
#example-1 {
border: 20px solid #999;
padding: 20px;
/* Firefox */
-moz-transition: border-color 3s;
/* Safari und Chrome */
-webkit-transition: border-color 3s;
/* Opera */
-o-transition: border-top-color 3s,border-right-color 3s,border-bottom-color 3s,border-left-color 3s;
/* benötgt unterstützt die Kurzschreibweise nicht, hier muss die Rahmenfarbe für jeden einzelne Seite angegeben werden. */
/* Internet Explorer */
-ms-transition: border-color 3s;
/* Standard */
transition: border-color 3s;
}
#example-1:hover {
border-color: red;
}
/* Minimalangabe für Transition ist die transition-property sowie eine transition-duration. */Beispiel nur für: 
-moz-: 5W3C: 16
-o-: 11W3C: 12.1
-webkit-: 5
-webkit-: 10
Beispiel Nr. 1 So sieht's aus:
transition
HTML:
<div id="example-2">transition</div>CSS:
#example-2 {
border: 1px solid #333;
padding: 20px;
height: 20px;
background-color: lime;
/* Firefox */
-moz-transition: height 2s linear 0.5s;
/* Safari und Chrome */
-webkit-transition: height 2s linear 0.5s;
/* Opera */
-o-transition: height 2s linear 0.5s;
/* Internet Explorer */
-ms-transition: height 2s linear 0.5s;
/* Standard */
transition: height 2s linear 0.5s;
}
#example-2:hover {
height: 150px;
}
/* Transition der Höhe mit einer Anfangsverzögerung. */Beispiel nur für:
-moz-: 5W3C: 16
-o-: 11W3C: 12.1
-webkit-: 5
-webkit-: 10
Beispiel Nr. 2 So sieht's aus:
transition
HTML:
<div id="example-3">transition</div>CSS:
#example-3 {
border: 1px solid #333;
padding: 20px;
background-color: green;
font-size: 20px;
color: white;
/* Firefox */
-moz-transition: font-size 3s, background-color 1s, color 1s;
/* Safari und Chrome */
-webkit-transition: font-size 3s, background-color 1s, color 1s;
/* Opera */
-o-transition: font-size 3s, background-color 1s ,color 1s;
/* Internet Explorer */
-ms-transition: font-size 3s, background-color 1s, color 1s;
/* Standard */
transition: font-size 3s, background-color 1s, color 1s;
}
#example-3:hover {
font-size: 50px;
background-color: yellow;
color: black;
}
/* Gleichzeitige Transition von Hintergrundfarbe und Schriftgröße */Beispiel nur für:
-moz-: 5W3C: 16
-o-: 11W3C: 12.1
-webkit-: 5
-webkit-: 10
Beispiel Nr. 3 So sieht's aus:
transition
HTML:
<div id="example-4">transition</div>CSS:
#example-4 {
border: 1px solid #333;
padding: 20px;
width: 280px;
background-color: lime;
color: black;
/* Firefox */
-moz-transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
/* Safari und Chrome */
-webkit-transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
/* Opera */
-o-transition: background-color 2s 2s, color 2s 1s, width 4s;
/* Internet Explorer */
-ms-transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
/* Standard */
transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
}
#example-4:hover {
background-color: blue;
color: #fff;
width: 140px;
}
/* In diesem Beispiel wird Hintergrundfarbe und Breite mit mehreren Transitions versehen. Pro Eigenschaft sind mehrere Transitionsblöcke angegeben.
Opera unterstützt steps() nicht. Gibt man steps() für Opera an, wird diese Regel als fehlerhaft erkannt und nichts mit einem Übergang dargestellt, auch wenn Teile vom Ausdruck richtig sind. In diesem Beispiel wurde die timing-function für den Opera weggelassen. */Beispiel nur für:
-moz-: 5W3C: 16
-o-: 11W3C: 12.1
-webkit-: 5
-webkit-: 10
Beispiel Nr. 4 So sieht's aus:
transition
HTML:
<div id="testcase-vendor">transition</div>CSS:
#testcase-vendor {
border: 1px solid #333;
padding: 50px;
background-color: blue;
font-size: 20px;
color: white;
-moz-transition: background-color 1s;
-webkit-transition: background-color 1s;
-o-transition: background-color 1s;
-ms-transition: background-color 1s;
}
#testcase-vendor:hover {
background-color: red;
}Beispiel nur für:
-moz-: 5
-o-: 11
-webkit-: 5
-webkit-: 10
Testbeispiel: Schreibweise mit
Vendor-Präfix
transition
HTML:
<div id="testcase-standard">transition</div>CSS:
#testcase-standard {
border: 1px solid #333;
padding: 50px;
background-color: blue;
font-size: 20px;
color: white;
transition: background-color 1s;
}
#testcase-standard:hover {
background-color: red;
}Beispiel nur für:
W3C: 16
W3C: 12.1
W3C: 26
Testbeispiel: Standardschreibweise
transition
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!