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 Dauer an, 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: #000;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #909;
  color: #fff;
  margin-right: 40%;
}

Die Verzögerung kann null, positiv oder negativ sein:

  • Ein Wert von 0s (oder 0ms) lässt den Übergangseffekt sofort beginnen.
  • Ein positiver Wert verzögert den Beginn des Übergangseffekts um die angegebene Zeitdauer.
  • Ein negativer Wert lässt den Übergangseffekt sofort beginnen, und zwar mittendrin. Mit anderen Worten, der Effekt wird animiert, als ob er bereits für die angegebene Zeitdauer gelaufen wäre.

Sie können mehrere Verzögerungen angeben, was nützlich ist, wenn mehrere Eigenschaften übergehen. Jede Verzögerung wird auf die entsprechende Eigenschaft angewendet, wie sie durch die transition-property Eigenschaft, die als Masterliste fungiert, spezifiziert ist. Wenn weniger Verzögerungen als in der Masterliste angegeben sind, wird die Liste der Verzögerungswerte wiederholt, bis es genug gibt. 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

css
/* <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 gewartet werden soll, zwischen der Änderung eines Eigenschaftswertes und dem Beginn des Übergangseffekts.

Formale Definition

Anfangswert0s
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

transition-delay = 
  <time>#

Beispiele

Beispiel mit verschiedenen Verzögerungen

HTML

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

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

js
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

BCD tables only load in the browser

Siehe auch