Übergangsverzögerung - CSS-Tricks

Die transition-delayEigenschaft, die normalerweise als Teil der transitionKurzform verwendet wird, wird verwendet, um eine Zeitdauer zu definieren, um den Beginn eines Übergangs 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.3soder125ms
Eine durch Kommas getrennte Liste von Zeitwerten zum Definieren separater Verzögerungswerte bei mehreren Übergängen für ein einzelnes Element, z 1s background-color, 350ms transform

Der Standardwert für transition-delayist 0s, was bedeutet, dass keine Verzögerung stattfindet und der Übergang sofort beginnt. Der Zeitwert kann für ein genaueres Timing als dezimalbasierte Zahl ausgedrückt werden.

Wenn ein Übergang einen negativen Verzögerungswert hat, beginnt der Übergang sofort (ohne Verzögerung). Der Übergang beginnt jedoch in der Mitte des Prozesses, als hätte er bereits begonnen.

Der folgende Stift zeigt einen Hover-Effekt auf einer Box, die einen transition-delayWert von 2smit einer Übergangsdauer von verwendet 1s:

Weitere Informationen finden Sie in der
Demo zur Verzögerung des
Stiftübergangs mit CSS-Tricks (@ css-Tricks) auf CodePen.

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

Weitere Informationen finden Sie in der
Demo zu Pen Negative Transition Delay von CSS-Tricks (@ css-Tricks)
auf CodePen.

Beachten Sie, dass im zweiten Beispiel nur die letzten zwei Drittel des tatsächlichen Übergangs sichtbar sind und es keine Verzögerung gibt. Der negative Wert beseitigt die Verzögerung und verkürzt effektiv die Dauer.

Für die Kompatibilität in allen unterstützenden Browsern sind Herstellerpräfixe erforderlich, wobei die Standardsyntax 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 unterstützt wird transition-delay) benötigt kein -ms-Präfix.

Ein häufiger Anwendungsfall ist das Versetzen von Übergängen:

Sehen Sie sich die
stiftversetzten Animationen von Chris Coyier (@chriscoyier)
auf CodePen an.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.