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 CSS-Eigenschaft transition-duration legt fest, wie lange eine Übergangsanimation bis zum Abschluss dauern soll. Standardmäßig ist der Wert 0s, was bedeutet, dass keine Animation stattfindet.
Sie können mehrere Zeitdauern angeben; jede Zeitdauer wird auf die entsprechende Eigenschaft angewendet, wie durch die Eigenschaft transition-property angegeben, die als Hauptliste fungiert. Wenn die Anzahl der angegebenen Zeitdauern geringer ist als die in der Hauptliste, wiederholt der User Agent die Liste der Zeitdauern. Wenn die Anzahl der angegebenen Zeitdauern größer ist als die in der Hauptliste, wird die Liste auf die richtige Größe gekürzt. In beiden Fällen bleibt die CSS-Deklaration gültig.
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%;
}
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>-
Ein
<time>, das die Zeitspanne angibt, die der Übergang vom alten Wert einer Eigenschaft zum neuen Wert dauern soll. Eine Zeit von0sgibt an, dass kein Übergang stattfindet, 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 unterschiedlichen Zeitdauern
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 |