CSS-Eigenschaft: transition-property, Kategorien: Animierte Inhalte (allgemein), Transitions (CSS 3)
CSS-Eigenschaft der "transition"
Name der CSS-Eigenschaft, auf welche die "transition" wirken werden soll.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| CSS-Eigenschaft der "transition" |
| alle |
| 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
- transition
- transition-delay
- transition-duration
- Aktuelle Seite: transition-property
- transition-timing-function
Folgendes ist beim Einsatz von transition-property zu beachten:
- transition-property erwartet mindestens eine CSS-Eigenschaft, auf welche der Zustandsveränderung wirken soll. Es können auch mehrere Eigenschaften für die Transition angegeben werden, diese werden durch Kommas () voneinander getrennt. Wichtig ist, dass die definierten Eigenschaften im Ausgang- und Endzustand unterschiedlich definiert sind.
- Transitions können für verschiedene CSS-Eigenschaften definiert werden, eine Liste der veränderbaren Eigenschaften ist beim W3C zu finden: http://www.w3.org/TR/css3-transitions/#properties-from-css-. Da alle Browser noch an der Implementierung von Transitions arbeiten, variieret es, welche Eigenschaften tatsächlich über eine Transition verändert werden können. Im Einzelfall ist dies nur durch eigenes Testen zu ermitteln.
- In den Beispielen ist der Endzustand über das Pseudo-Attribut :hover definiert. Es ist aber auch möglich, über JavaScript HTML-Elementen neue Klassen zuzuweisen, über die der Endzustand definiert ist.
- Verlässt die Maus das HTML-Element (Ende des :hover), bzw. wird eine Klasse für den Endzustand wieder zurückgenommen, verändert sich das Element wieder zum Ausgangzustand und das mit der gleichen Dauer, welche für die Transition angegeben ist. War das Ende der Transition noch nicht erreicht, verändert sich die Darstellung vom zuletzt erreichten Zustand zurück.
- transition-property ist eine CSS3 Eigenschaft und wird bislang von noch keinem Browser ohne Vendor-Präfix unterstützt.
Internet Explorer bis zur Version 9 unterstützen Transitions gar nicht, die anderen Browser benötigen das jeweilige Präfix:
- Firefox: -moz-transition-property
- Opera: -o-transition-property
- Safari und Google Chrome: -webkit-transition-property
- Weitere Informationen sind beim W3C zu finden: css3 transitions module.
 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.
Eine Transition benötigt mindestens zwei Parameter. Der wichtigste ist die CSS-Eigenschaft, deren Zustand verändert werden soll. Diese wird über transition-property definiert.
Der zweite Parameter steuert die Dauer der Transition: transition-duration. Ist dieser Wert nicht gesetzt, wird der Standardwert 0 verwendet, was einer Transition-Dauer von 0 Sekunden entspricht. Eine eigentliche Transition kommt dann nicht zu Vorscheinen, der Zustand schaltet sofort auf den Endzustand.
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-property:
- W3C Spezifikation:
http://www.w3.org/TR/css3-transitions/#transition-property
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
transition-duration - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
transition-timing-function
Beispiele
HTML:
<div class="example-01">Box</div>CSS:
div.example-01 {
border: 1px solid #666;
width: 200px;
text-align: center;
padding: 90px 0;
font-weight: 700;
background-color: #FFFFE3;
transition-property: background-color;
transition-duration: 1s;
}
/* Hier die Angaben für die Transition laut Standard. Wird aktuell vom Firefox ab Version 16 und Opera ab Version 12 unterstützt. */
div:hover.example-01 {
background-color: #FD7F00;
}
Beispiel Nr. 1 So sieht's aus:
HTML:
<div class="example-02">Box</div>CSS:
div.example-02 {
border: 1px solid #666;
width: 200px;
text-align: center;
padding: 90px 0;
font-weight: 700;
background-color: #FFFFE3;
/* Standard */
transition-property: background-color;
transition-duration: 1s;
/* Firefox */
-moz-transition-property: background-color;
-moz-transition-duration: 1s;
/* Opera */
-o-transition-property: background-color;
-o-transition-duration: 1s;
/* Safari / Chrome */
-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
}
/* Jeder einzelne Browser benötigt eine Anweisung mit dem eigenen Vendor-Präfix. */
div:hover.example-02 {
background-color: #FD7F00;
}
Beispiel Nr. 2 So sieht's aus:
HTML:
<div class="example-03">Box</div>CSS:
div.example-03 {
border: 1px solid #666;
width: 100px;
text-align: center;
padding: 30px 0;
font-weight: 700;
background-color: #FFFFE3;
/* Standard */
transition-property: background-color, padding, width;
transition-duration: 1s;
/* Firefox */
-moz-transition-property: background-color, padding, width;
-moz-transition-duration: 1s;
/* Opera */
-o-transition-property: background-color, padding, width;
-o-transition-duration: 1s;
/* Safari / Chrome */
-webkit-transition-property: background-color, padding, width;
-webkit-transition-duration: 1s;
}
/* Fall mehrere CSS-Eigenschaft sich über eine Transition verändern sollen, werden die per Komma voneinander getrennt. */
div:hover.example-03 {
background-color: #FD7F00;
width: 200px;
padding: 90px 0;
}Beispiel Nr. 3 So sieht's aus:
HTML:
<div class="example-04">Box</div>CSS:
div.example-04 {
border-top: 20px solid red;
border-bottom: 2px solid black;
width: 100px;
text-align: center;
padding: 30px 0;
font-weight: 700;
background-color: #00deff;
/* Standard */
transition-property: border-top, border-bottom, width;
transition-duration: 1s;
/* Firefox */
-moz-transition-property: border-top, border-bottom, width;
-moz-transition-duration: 1s;
/* Opera */
-o-transition-property: border-top, border-bottom, width;
-o-transition-duration: 1s;
/* Safari / Chrome */
-webkit-transition-property: border-top, border-bottom, width;
-webkit-transition-duration: 1s;
}
/* Die Möglichkeiten der Transitions sind vielfältig. Allerdings unterstützt nicht jeder Browser alle Eigenschaften. */
div:hover.example-04 {
border-top: 2px solid yellow;
border-bottom: 20px solid blue;
width: 300px;
}Beispiel Nr. 4 So sieht's aus:
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!