transition-delay

Die Eigenschaft transition-delay, die normalerweise als Teil der transition-Kurzschreibweise verwendet wird, dient dazu, eine Zeitspanne zu definieren, um den Beginn einer Transition zu verzögern.

.delay-me {
  transition-delay: 0.25s;
}

Der Wert kann einer der folgenden sein

• Ein gültiger Zeitwert, der in Sekunden oder Millisekunden definiert ist, z. B. 1.3s oder 125ms
• Eine durch Kommas getrennte Liste von Zeitwerten zur Definition separater Verzögerungswerte für mehrere Transitionen eines einzelnen Elements, z. B. 1s background-color, 350ms transform

Der Standardwert für transition-delay ist 0s, was bedeutet, dass keine Verzögerung stattfindet und die Transition sofort beginnt. Der Zeitwert kann als dezimale Zahl für eine präzisere Zeitsteuerung ausgedrückt werden.

Wenn eine Transition einen negativen Verzögerungswert hat, beginnt die Transition sofort (ohne Verzögerung), jedoch beginnt die Transition auf halbem Weg des Prozesses, als ob sie bereits begonnen hätte.

Der folgende Pen zeigt einen Hover-Effekt auf einer Box, der einen transition-delay-Wert von 2s mit einer Transition-Dauer von 1s verwendet.

Sehen Sie sich den Pen
Transition delay demo von CSS-Tricks (@css-tricks) an.
auf CodePen.

Vergleichen Sie das nun mit der folgenden Demo, die eine Verzögerung von -1s und eine Dauer von 3s hat.

Sehen Sie sich den Pen
Negative transition delay demo von CSS-Tricks (@css-tricks) an.
auf CodePen.

Beachten Sie, dass im zweiten Beispiel nur die letzten zwei Drittel der eigentlichen Transition sichtbar sind und keine Verzögerung auftritt. Der negative Wert entfernt die Verzögerung und schneidet effektiv in die Dauer ein.

Für die Kompatibilität in allen unterstützenden Browsern sind Vendor-Präfixe erforderlich, wobei die Standard-Syntax zuletzt deklariert wird

.example {
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}

IE10 (die erste stabile Version von IE, die transition-delay unterstützt) benötigt kein -ms- Präfix.

Ein häufiger Anwendungsfall ist das Staging von Transitionen.

Sehen Sie sich den Pen
Staggered Animations von Chris Coyier (@chriscoyier) an.
auf CodePen.

Verwandte Eigenschaften

• transition
• transition-property
• transition-timing-function
• transition-duration

Weitere Ressourcen

• transition-delay auf W3C
• transition-delay auf MDN
• Erhalten von CSS-Stilzuständen mithilfe von "unendlichen" Transition-Verzögerungen.

Browser-Unterstützung