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

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

Dauer / Länge einer "transition"

Steuert die Dauer bzw. Länge einer Transition.

CSS-Eigenschaft: transition-duration
KurzbeschreibungWerteStandardwertKategorieHinweis
Dauer / Länge einer "transition"
  • <time>
0
Allgemein:
Animierte Inhalte
CSS 3:
Transitions
Neu in CSS 3
 

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
    Es sollte jedoch auch die eigentliche Eigenschaft transition-duration definiert werden, um sich ein späteres Nacharbeiten zu ersparen, wenn die Browser die Eigenschaft komplett unterstützen.
  • Weitere Informationen sind beim W3C zu finden: css3 transitions module.
Browserunterstützung von transition-duration
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-duration:



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

Beispiel Nr. 1 So sieht's aus:

Kasten
 

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

Beispiel Nr. 2 So sieht's aus:

Kasten
 

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

Beispiel Nr. 3 So sieht's aus:

Kasten
 

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

Beispiel Nr. 4 So sieht's aus:

Kasten
 

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: 6.636 sec.

Browser-Marktanteile