CSS-Eigenschaft: transition-duration, Kategorien: Animierte Inhalte (allgemein), Transitions (CSS 3)
Dauer / Länge einer "transition"
Steuert die Dauer bzw. Länge einer Transition.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Dauer / Länge einer "transition" |
| 0 |
| 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
- Aktuelle Seite: transition-duration
- transition-property
- transition-timing-function
Folgendes ist beim Einsatz von transition-duration zu beachten:
- transition-duration steuert die Länge einer Transition. Diese Eigenschaft ist neben der eigentlichen CSS-Eigenschaft, die über transition-property oder die Kurzschreibweise transition definiert wird, der zweite Parameter, der grundlegend für die Darstellung einer Transition angegeben werden muss. Neben einer Konfiguration über transition-duration kann dies auch über die Kurzschreibweise transition geschehen.
- Zulässige Werte sind Sekunden oder Millisekunden, die Schreibweise ist s bzw. ms, zum Beispiel transition-duration: 2s oder transition-duration: 1500ms. Weitere Informationen im Bereich Values and Units des W3C zu Zeitwerten: http://www.w3.org/TR/css3-values/#time.
- Der Standardwert ist 0 und führt dazu, dass der Endzustand der Transition sofort dargestellt wird, in dem Fall ist die Transition nicht wahrzunehmen. Negative Werte sind nicht erlaubt und werden als 0 ausgewertet.
- Die Länge der Transition gilt sowohl für Zeit für die Veränderung bis zum Endzustand als auch zurück zum Originalzustand. Ist das Ende der Transition noch nicht erreicht, wenn das rückläufige Ereignis eintritt, wird die Transition rückwärts ab dem Zeitpunkt dargestellt, der zu diesem Moment erreicht wurde.
- Sind mehrere Eigenschaften über transition-property für die Transition definiert, kann die Dauer für jede einzelne Eigenschaft individuell bestimmt werden. Die Zeitwerte werden ebenfalls über Kommas () voneinander getrennt und bestimmen die Dauer in der Reihenfolge der Eigenschaften, wie sie über transition-property angegeben sind.
- In den Beispielen ist der Endzustand über das Pseudo-Attribut :hover definiert. Es ist auch möglich, über JavaScript HTML-Elementen neue Klassen zuzuweisen, über die der Endzustand definiert ist.
- transition-duration 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-duration
- Opera: -o-transition-duration
- Safari und Google Chrome: -webkit-transition-duration
- 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-duration:
- W3C Spezifikation:
http://www.w3.org/TR/css3-transitions/#transition-duration
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
transition-delay - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
transition-property
Beispiele
HTML:
<div class="example-01">Kasten</div>CSS:
div.example-01 {
border: 1px solid #666;
width: 250px;
text-align: center;
padding: 30px 0;
font-weight: 700;
color: yellow;
font-size: 30px;
background-color: #000000;
transition-property: background-color, 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: #FFFF00;
color: #c00;
}
Beispiel Nr. 1 So sieht's aus:
HTML:
<div class="example-02">Kasten</div>CSS:
div.example-02 {
border: 1px solid #666;
width: 250px;
text-align: center;
padding: 30px 0;
font-weight: 700;
font-size: 30px;
color: yellow;
background-color: #c00;
/* Standard */
transition-property: background-color, color;
transition-duration: 1s;
/* Firefox */
-moz-transition-property: background-color, color;
-moz-transition-duration: 1s;
/* Opera */
-o-transition-property: background-color, color;
-o-transition-duration: 1s;
/* Safari / Chrome */
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
}
/* Jeder einzelne Browser benötigt eine Anweisung mit dem eigenen Vendor-Präfix. */
div:hover.example-02 {
background-color: #FFFF00;
color: #c00;
}
Beispiel Nr. 2 So sieht's aus:
HTML:
<div class="example-03">Kasten</div>CSS:
div.example-03 {
border: 1px solid #666;
width: 250px;
text-align: center;
padding: 30px 0;
font-weight: 700;
font-size: 30px;
color: yellow;
background-color: #c00;
/* Standard */
transition-property: background-color, color;
transition-duration: 3000ms;
/* Firefox */
-moz-transition-property: background-color, color;
-moz-transition-duration: 3000ms;
/* Opera */
-o-transition-property: background-color, color;
-o-transition-duration: 3000ms;
/* Safari / Chrome */
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 3000ms;
/* Werte können in s für Sekunde und ms für Millesekunde (1s = 1000ms) angegeben werden. */
}
div:hover.example-03 {
background-color: #00deff;
color: #00007D;
}Beispiel Nr. 3 So sieht's aus:
HTML:
<div class="example-04">Kasten</div>CSS:
div.example-04 {
border: 1px solid #666;
width: 150px;
text-align: center;
padding: 30px 0;
font-weight: 700;
font-size: 30px;
color: yellow;
background-color: #000099;
height: 40px;
/* Standard */
transition-property:
background-color, color, width, height;
transition-duration:
1.5s, 0.2s, 5000ms;
/* Firefox */
-moz-transition-property:
background-color, color, width, height;
-moz-transition-duration:
1.5s, 0.2s, 5000ms;
/* Opera */
-o-transition-property:
background-color, color, width, height;
-o-transition-duration:
1.5s, 0.2s, 5000ms;
/* Safari / Chrome */
-webkit-transition-property:
background-color, color, width, height;
-webkit-transition-duration:
1.5s, 0.2s, 5000ms;
}
/* Entsprechend der Reihenfolge der Tranitions-Eigenschaften kann für jede einzelne eine eigene Dauer angegeben werden. Diese werden durch Kommas getrennt.
Im Beispiel sind Schrift- und Hintergrundfarbe schnell verändert, die Veränderung der Breite dauert länger.
Ein Zeitparameter für die 4. Eigenschaft ist nicht vergeben, es wird der erste Wert angewendet.
Opera, Safari und Chrome haben Probleme, die Breite von einem px-Wert in einen %-Wert umzuwandeln und stellen keinen Übergang in der Breite dar. */
div:hover.example-04 {
background-color: #00deff;
color: #00007D;
width: 100%;
height: 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!