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 gibt die Wartezeit an, 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) lässt den Übergangseffekt sofort beginnen. - Ein positiver Wert verzögert den Beginn des Übergangseffekts um die angegebene Zeitspanne.
- Ein negativer Wert bewirkt, dass der Übergangseffekt sofort beginnt und bereits teilweise abgelaufen ist. Mit anderen Worten, der Effekt wird so animiert, als ob er bereits für die angegebene Zeitspanne gelaufen wäre.
Es ist möglich, mehrere Verzögerungen anzugeben, was nützlich ist, wenn mehrere Eigenschaften übergehen sollen. Jede Verzögerung wird auf die entsprechende Eigenschaft angewendet, wie sie durch die transition-property-Eigenschaft spezifiziert ist, die als Hauptliste fungiert. Wenn weniger Verzögerungen als in der Hauptliste angegeben sind, wird die Liste der Verzögerungswerte wiederholt, bis genug vorhanden sind. Wenn es mehr Verzögerungen gibt, wird die Liste der Verzögerungswerte gekürzt, um die Anzahl der Eigenschaften anzupassen. 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>-
Gibt die Zeitspanne an, die gewartet werden soll, zwischen dem Ändern des Werts einer Eigenschaft und dem Beginn des Übergangseffekts.
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 zeigt unterschiedliche 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 |
Browser-Kompatibilität
Loading…