transition-duration CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.
Die transition-duration CSS Eigenschaft legt die Dauer einer Übergangsanimation fest. Standardmäßig ist der Wert 0s, was bedeutet, dass keine Animation stattfinden wird.
Probieren Sie es aus
transition-duration: 500ms;
transition-property: margin-right;
transition-duration: 2s;
transition-property: background-color;
transition-duration: 2s;
transition-property: margin-right, color;
transition-duration: 3s, 1s;
transition-property: margin-right, color;
<section id="default-example">
<div id="example-element">Hover to see<br />the transition.</div>
</section>
#example-element {
background-color: #e4f0f5;
color: black;
padding: 1rem;
border-radius: 0.5rem;
font: 1em monospace;
width: 100%;
transition: margin-right 2s;
}
#default-example:hover > #example-element {
background-color: #990099;
color: white;
margin-right: 40%;
}
Sie können mehrere Dauern angeben; jede Dauer wird auf die entsprechende Eigenschaft angewendet, wie sie durch die transition-property Eigenschaft festgelegt wird, die als Masterliste fungiert. Wenn die Anzahl der angegebenen Dauern kleiner ist als in der Masterliste, wiederholt der Benutzeragent die Liste der Dauern. Wenn die Anzahl der angegebenen Dauern größer ist als in der Masterliste, wird die Liste auf die richtige Größe gekürzt. In beiden Fällen bleibt die CSS-Deklaration gültig.
Syntax
/* <time> values */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;
/* Global values */
transition-duration: inherit;
transition-duration: initial;
transition-duration: revert;
transition-duration: revert-layer;
transition-duration: unset;
Werte
<time>-
Ist ein
<time>, der die Dauer angibt, die der Übergang von dem alten Wert einer Eigenschaft zum neuen Wert dauern sollte. Eine Zeit von0sbedeutet, dass kein Übergang stattfinden wird, das heißt, der Wechsel zwischen den beiden Zuständen erfolgt sofort. Ein negativer Wert für die Zeit macht die Deklaration ungültig.
Formale Definition
| Anfangswert | 0s |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
transition-duration =
<time [0s,∞]>#
Beispiele
Beispiel mit verschiedenen Dauern
HTML
<div class="box duration-1">0.5 seconds</div>
<div class="box duration-2">2 seconds</div>
<div class="box duration-3">4 seconds</div>
<button id="change">Change</button>
CSS
.box {
margin: 20px;
padding: 10px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
font-size: 18px;
transition-property: background-color, font-size, transform, color;
transition-timing-function: ease-in-out;
}
.transformed-state {
transform: rotate(270deg);
background-color: blue;
color: yellow;
font-size: 12px;
transition-property: background-color, font-size, transform, color;
transition-timing-function: ease-in-out;
}
.duration-1 {
transition-duration: 0.5s;
}
.duration-2 {
transition-duration: 2s;
}
.duration-3 {
transition-duration: 4s;
}
JavaScript
function change() {
const elements = document.querySelectorAll("div.box");
for (const element of elements) {
element.classList.toggle("transformed-state");
}
}
const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Transitions Module Level 1 # transition-duration-property |