CSS-Eigenschaft: transition-delay, Kategorien: Animierte Inhalte (allgemein), Transitions (CSS 3)
Verzögerung einer Transition
Steuert, nach welcher Verzögerung eine Transition beginnt.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Verzögerung 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
- Aktuelle Seite: transition-delay
- transition-duration
- transition-property
- transition-timing-function
Folgendes ist beim Einsatz von transition-delay zu beachten:
- transition-delay steuert die Verzögerung einer Transition. Neben einer Konfiguration über transition-delay kann dies auch über die Kurzschreibweise transition geschehen.
- Zulässige Werte sind Sekunden oder Millisekunden, die Schreibweise ist s bzw. ms, zum Beispiel transition-delay: 2s oder transition-delay: 1500ms. Weitere Informationen im Bereich Values and Units des W3C zu Zeitwerten: http://www.w3.org/TR/css3-values/#time.
- Der Standardwert ist 0. Falls kein transition-delay gesetzt ist oder der Wert aktiv mit 0s definiert ist, startet die Transition sofort.
- Negative Werte führen zu einem "offset", die Transition startet in dem Zustand, den sie bei diesem Sekundenwert bereits erreicht hätte. Das bedeutet, wie im Beispiel Nr. 4 zu sehen, bei einer Transition von 2 Sekunden und einem transition-delay von -1s startet die Transition auf der Hälfte der Übergangsdarstellung.
- Die Verzögerung gilt für die Transition hin zum Endzustand als auch zurück zum Originalzustand.
- Sind mehrere Eigenschaften über transition-property definiert, kann die Verzögerung für jede einzelne Eigenschaft individuell bestimmt werden. Die Zeitwerte werden ebenfalls über Kommas () voneinander getrennt und bestimmen die Verzögerung 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-delay 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:
- -moz-transition-delay: Firefox
- -o-transition-delay: Opera
- -webkit-transition-delay: Safari und Google Chrome
- 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-delay:
- W3C Spezifikation:
http://www.w3.org/TR/css3-transitions/#transition-delay
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
transition - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
transition-duration
Beispiele
HTML:
<div class="example-01">transition-delay</div>CSS:
div.example-01 {
border: 1px solid #666;
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">transition-delay</div>CSS:
div.example-02 {
border: 1px solid #666;
text-align: center;
padding: 30px 0;
font-weight: 700;
font-size: 30px;
color: yellow;
background-color: #c00;
/* Firefox */
-moz-transition-property: background-color;
-moz-transition-duration: 1s;
-moz-transition-delay: 2s;
/* Opera */
-o-transition-property: background-color;
-o-transition-duration: 1s;
-o-transition-delay: 2s;
/* Safari / Chrome */
-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
-webkit-transition-delay: 2s;
/* Standard */
transition-property: background-color;
transition-duration: 1s;
transition-delay: 2s;
}
/* Jeder einzelne Browser benötigt eine Anweisung mit dem eigenen Vendor-Präfix. */
div:hover.example-02 {
background-color: #000000;
}
Beispiel Nr. 2 So sieht's aus:
HTML:
<div class="example-03">transition-delay</div>CSS:
div.example-03 {
border: 1px solid #666;
text-align: center;
padding: 30px 0;
font-weight: 700;
font-size: 30px;
color: #00f000;
background-color: #FFFFC9;
/* Firefox */
-moz-transition-property: color, padding;
-moz-transition-duration: 1s, 2s;
-moz-transition-delay: 1s, 2s;
/* Opera */
-o-transition-property: color, padding-top, padding-bottom;
-o-transition-duration: 1s, 2s, 2s;
-o-transition-delay: 1s, 2s, 2s;
/* Safari / Chrome */
-webkit-transition-property: color, padding;
-webkit-transition-duration: 1s, 2s;
-webkit-transition-delay: 1s, 2s;
/* Standard */
transition-property: color, padding;
transition-duration: 1s, 2s;
transition-delay: 1s, 2s;
/* Mehrere Angaben werden durch Kommas von einander getrennt und steuern die entsprechend angegebene Eigenschaft in transition-property.
Opera unterstützt den shortcut padding nicht, hier müssen die einzelnen Properties angegeben werden. */
}
div:hover.example-03 {
padding: 100px 0;
color: #00007D;
}Beispiel Nr. 3 So sieht's aus:
HTML:
<div class="example-04">transition-delay</div>CSS:
div.example-04 {
border: 1px solid #666;
text-align: center;
padding: 30px 0;
height: 50px;
font-weight: 700;
font-size: 30px;
color: #00f000;
background-color: #FFFFC9;
/* Firefox */
-moz-transition-property: height;
-moz-transition-duration: 2s;
-moz-transition-timing-function: linear;
-moz-transition-delay: -1s;
/* Opera */
-o-transition-property: height;
-o-transition-duration: 2s;
-o-transition-timing-function: linear;
-o-transition-delay: -1s;
/* Safari / Chrome */
-webkit-transition-property: height;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: -1s;
/* Standard */
transition-property: height;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: -1s;
/* Ein negativer Wert führt dazu, dass zum Transitionbeginn bereits ein Status der Transition erreicht ist. */
}
div:hover.example-04 {
height: 400px;
}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!