transition-delay
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die transition-delay CSS Eigenschaft legt die Dauer fest, die gewartet werden soll, bevor der Übergangseffekt einer Eigenschaft beginnt, wenn sich ihr Wert ändert.
Probieren Sie es aus
transition-delay: 250ms;
transition-property: margin-right;
transition-delay: 1s;
transition-property: background-color;
transition-delay: 1s;
transition-property: margin-right, color;
transition-delay: 1s, 250ms;
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%;
}
Die Verzögerung kann null, positiv oder negativ sein:
- Ein Wert von
0s(oder0ms) startet den Übergangseffekt sofort. - Ein positiver Wert verzögert den Beginn des Übergangseffekts um die angegebene Zeitspanne.
- Ein negativer Wert startet den Übergangseffekt sofort und teilweise innerhalb des Effekts. Mit anderen Worten, der Effekt wird animiert, als ob er bereits für die angegebene Zeitspanne gelaufen wäre.
Es können mehrere Verzögerungen angegeben werden, was nützlich ist, wenn mehrere Eigenschaften übergangsmäßig verändert werden. Jede Verzögerung wird auf die entsprechende Eigenschaft angewendet, die durch die transition-property Eigenschaft spezifiziert ist, welche als Hauptliste fungiert. Wenn weniger Verzögerungen als in der Hauptliste spezifiziert sind, wird die Liste der Verzögerungswerte wiederholt, bis genügend vorhanden sind. Wenn mehr Verzögerungen vorhanden sind, wird die Liste der Verzögerungswerte gekürzt, um mit der Anzahl der Eigenschaften übereinzustimmen. In beiden Fällen bleibt die CSS-Deklaration gültig.
Syntax
/* <time> values */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: revert-layer;
transition-delay: unset;
Werte
<time>-
Bezeichnet die Zeitspanne, die zwischen der Änderung eines Eigenschaftswerts und dem Beginn des Übergangseffekts gewartet werden soll.
Formale Definition
| Anfangswert | 0s |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
transition-delay =
<time>#
Beispiele
Beispiel mit unterschiedlichen Verzögerungen
HTML
<div class="box delay-1">0.5 seconds</div>
<div class="box delay-2">2 seconds</div>
<div class="box delay-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;
transition-duration: 3s;
}
.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;
transition-duration: 3s;
}
.delay-1 {
transition-delay: 0.5s;
}
.delay-2 {
transition-delay: 2s;
}
.delay-3 {
transition-delay: 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
| Specification |
|---|
| CSS Transitions # transition-delay-property |