Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: transition-delay, Kategorien: Animierte Inhalte (allgemein), Transitions (CSS 3)

Verzögerung einer Transition

Steuert, nach welcher Verzögerung eine Transition beginnt.

CSS-Eigenschaft: transition-delay
KurzbeschreibungWerteStandardwertKategorieHinweis
Verzögerung einer Transition
  • <time>
0
Allgemein:
Animierte Inhalte
CSS 3:
Transitions
Neu in CSS 3
 

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
    Es sollte auch immer die eigentliche Eigenschaft transition-delay definiert werden, um sich ein späteres Nacharbeiten zu ersparen, wenn die Browser die Eigenschaft in der Standardschreibweise unterstützen. Diese Angabe sollte hinter denen mit dem Vendor-Präfixen stehen.
  • Weitere Informationen sind beim W3C zu finden: css3 transitions module.
Browserunterstützung von transition-delay
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
-webkit-j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
-webkit-j
Version: 10Version: 11Version: 12
n-o-j

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:



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 nur für: FirefoxOpera

Beispiel Nr. 1 So sieht's aus:

transition-delay
 

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 nur für: FirefoxOperaSafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

transition-delay
 

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 nur für: FirefoxOperaSafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

transition-delay
 

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 nur für: FirefoxOperaSafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

transition-delay
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 7.49 sec.

Browser-Marktanteile