CSS transition-duration Eigenschaft
Wie man die CSS-Langhand-Eigenschaft transition-duration einsetzt, um die Dauer einer Animation festzulegen. Werte und Beispiele.
Die CSS-Eigenschaft transition-duration legt fest, wie lange eine Übergangsanimation benötigt, um vom Anfangszustand in den Endzustand zu gelangen. Sie gehört zu den CSS3-Eigenschaften und ist eine Langhand-Komponente der transition-Kurzschreibweise.
Dieses Kapitel erklärt, wie gültige Dauerwerte geschrieben werden, wie sich eine einzelne Dauer von einer kommaseparierten Liste unterscheidet, welche Fallstricke es gibt (Nullwerte, fehlende Einheiten, nicht übereinstimmende Listenlängen) und wie die Eigenschaft mit den übrigen transition-Eigenschaften zusammenhängt — transition-property, transition-timing-function und transition-delay.
Wie eine Dauer angegeben wird
Eine Dauer ist ein einzelner <time>-Wert, der entweder in Sekunden (s) oder Millisekunden (ms) angegeben wird:
transition-duration: 0.5s; /* half a second */
transition-duration: 500ms; /* the same thing */Einige Regeln, die man von Anfang an kennen sollte:
- Die Einheit ist Pflicht. Eine bloße Zahl wie
transition-duration: 2ist ungültig, und die gesamte Deklaration wird ignoriert. Schreiben Sie immer2soder2000ms. - Negative Werte sind ungültig. Anders als bei transition-delay darf eine Dauer nicht negativ sein; der Browser behandelt eine negative Dauer als
0s. 0sbedeutet kein sichtbarer Übergang. Dies ist der Standardwert, sodass die Eigenschaftsänderung sofort erfolgt. Es muss ein Wert ungleich null gesetzt werden, damit die Animation sichtbar ist.
Mehrere Dauerwerte
Es können eine oder mehrere kommaseparierte Dauern angegeben werden. Jede Dauer wird der entsprechenden Eigenschaft zugewiesen, die in transition-property aufgeführt ist, welche als Hauptliste dient:
transition-property: width, background-color;
transition-duration: 2s, 0.5s; /* width animates over 2s, background over 0.5s */Gibt es weniger Dauern als Eigenschaften, wird die Dauernliste wiederholt, bis sie die Liste auffüllt. Gibt es mehr Dauern als Eigenschaften, werden die überzähligen Dauern ignoriert:
/* 3 properties, 1 duration → every property uses 1s */
transition-property: width, height, color;
transition-duration: 1s;Vendor-Präfixe (wie -webkit-, -moz-, -o-) sind für moderne Browser nicht mehr erforderlich, da transition-duration in allen aktuellen Versionen vollständig unterstützt wird.
| Anfangswert | 0s |
|---|---|
| Gilt für | Alle Elemente, ::before- und ::after-Pseudoelemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.transitionDuration = "3s"; |
Syntax
CSS transition-duration-Werte
transition-duration: time | initial | inherit;Beispiel der transition-duration-Eigenschaft:
CSS transition-duration Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 100px;
background: #666;
transition-duration: 2s;
}
div:hover {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition-duration property example</h2>
<div></div>
</body>
</html>Bewegen Sie die Maus über das graue Feld: Da transition-duration auf 2s gesetzt ist, wächst die Breite gleichmäßig über zwei Sekunden, anstatt sofort zu springen.
Beispiel der transition-duration-Eigenschaft mit dem Wert "time":
CSS transition-duration weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.example {
padding: 1em;
width: 30px;
height: 30px;
left: 0;
background-color: #666;
position: relative;
transition-property: background-color, left;
transition-timing-function: linear, linear;
}
.container:hover .example {
left: 250px;
background-color: #ccc;
}
.el1 {
transition-duration: .3s, .3s;
}
.el2 {
transition-duration: .6s, .6s;
}
.el3 {
transition-duration: 1s, 1s;
}
.el4 {
transition-duration: 2s, 2s;
}
</style>
</head>
<body>
<h2>Transition-duration property example</h2>
<div class="container">
<p>
<code>transition-duration: .3s, .3s;</code>
</p>
<div class="example el1"></div>
<p>
<code>transition-duration: .6s, .6s;</code>
</p>
<div class="example el2"></div>
<p>
<code>transition-duration: 1s, 1s;</code>
</p>
<div class="example el3"></div>
<p>
<code>transition-duration: 2s, 2s;</code>
</p>
<div class="example el4"></div>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| time | Gibt an, wie viele Sekunden oder Millisekunden ein Übergangseffekt benötigt. Der Standardwert ist 0s. |
| initial | Setzt diese Eigenschaft auf ihren Standardwert. |
| inherit | Erbt diese Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
transition-duration wird selten allein verwendet. In der Praxis kombiniert man sie mit den anderen transition-Langhänden, meist über die transition-Kurzschreibweise:
- transition-property — welche CSS-Eigenschaften animiert werden.
- transition-timing-function — die Beschleunigungskurve (ease, linear, cubic-bezier).
- transition-delay — wie lange gewartet wird, bevor der Übergang beginnt.
Für mehrstufige Bewegungen, die nicht als einfache A-zu-B-Änderung ausgedrückt werden können, sollte stattdessen CSS animations verwendet werden.