CSS transition-delay Eigenschaft - Verwendung, Syntax, Beispiele

Die CSS-Eigenschaft transition-delay legt fest, wie lange gewartet werden soll, bevor ein Übergangseffekt nach dem auslösenden Änderungsereignis beginnt. Sie ist eine der vier Langform-Eigenschaften, aus denen die transition-Kurzschreibweise besteht, zusammen mit transition-property, transition-duration und transition-timing-function.

Diese Seite behandelt die Werte der Eigenschaft, das Verhalten positiver und negativer Verzögerungen, die Möglichkeit, für jede animierte Eigenschaft eine eigene Verzögerung festzulegen, sowie die häufigsten Einsatzmöglichkeiten in realen Benutzeroberflächen. Sie gehört zu den CSS3-Eigenschaften.

So funktioniert die Verzögerung

Der Standardwert ist 0s, was bedeutet, dass der Übergangseffekt sofort startet, sobald sich der Eigenschaftswert ändert (zum Beispiel bei :hover).

Eine positive Verzögerung verschiebt den Start. Mit transition-delay: 2s passiert zwei Sekunden lang nichts Sichtbares; erst dann beginnt die Eigenschaft, von ihrem alten Wert zum neuen Wert über die transition-duration zu animieren.

Eine negative Verzögerung ist zulässig und verhält sich anders: Der Übergang startet sofort, beginnt jedoch mitten in seiner Zeitachse, als ob er bereits seit dieser Zeitspanne gelaufen wäre. transition-duration: 4s mit transition-delay: -2s springt also direkt zur Hälfte und endet in den verbleibenden zwei Sekunden.

Die Verzögerung wiederholt sich nicht – anders als bei einer Animationsiteration läuft ein Übergang einmal pro Änderung, die Verzögerung gilt also nur für den einzelnen Durchlauf, den die Änderung auslöst.

Info

Moderne Browser unterstützen diese Eigenschaft nativ ohne Hersteller-Präfixe.

Anfangswert	0s
Gilt für	Alle Elemente, ::before- und ::after-Pseudo-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.transitionDelay = "3s";

Syntax

transition-delay: time | initial | inherit;

Einfaches Beispiel

Dieses Element wächst, wenn Sie mit der Maus darüber fahren. Die Verzögerung beträgt 0s, das Wachstum beginnt daher sofort – ändern Sie den Wert im Editor auf 1s, um den Unterschied zu spüren.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Beispiel mit 2 Sekunden Verzögerung

Hier wartet das Element nach dem Hover-Ereignis volle zwei Sekunden, bevor es zu wachsen beginnt. Beachten Sie, dass transition-property mehrere Eigenschaften als kommagetrennte Liste aufführt (width, height).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, height;
        transition-duration: 3s;
        transition-delay: 2s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element and wait 2 seconds to see the effect.</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Unterschiedliche Verzögerung für jede Eigenschaft

Wenn Sie mehrere Eigenschaften animieren, können Sie für jede eine eigene Verzögerung angeben, indem Sie die Werte in derselben Reihenfolge wie in transition-property auflisten. Die Verzögerungsliste wird mit der Eigenschaftsliste abgeglichen: Hier beginnt width sofort, während background-color eine Sekunde wartet.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, background-color;
        transition-duration: 1s, 1s;
        transition-delay: 0s, 1s;
      }
      div:hover {
        width: 300px;
        background-color: #1c8470;
      }
    </style>
  </head>
  <body>
    <h2>Staggered transition-delay</h2>
    <p>Hover: the width grows first, then the color changes a second later.</p>
    <div></div>
  </body>
</html>

Häufige Anwendungsfälle

Gestaffelte Animationen, bei denen sich mehrere Elemente (oder mehrere Eigenschaften eines Elements) nacheinander statt gleichzeitig bewegen, was eine ausgefeiltere Wirkung erzeugt.
Hover-Intent-Menüs. Eine kurze Verzögerung beim Schließen eines Dropdown-Menüs (oft in Kombination mit einer Verzögerung auf visibility) hält das Menü kurz offen, damit eine leicht danebengegangene Mausbewegung es nicht sofort schließt.
Negative Verzögerungen, um einen Effekt scheinbar bereits „laufend" zu starten – nützlich, wenn ein Element sofort an einer bestimmten Stelle seines Übergangs landen soll.

Werte

Wert	Beschreibung
time	Gibt an, wie viele Sekunden oder Millisekunden ein Übergangseffekt warten soll, bevor er startet. Der Standardwert ist 0s.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche Aussage zur transition-delay-Eigenschaft ist korrekt?

Sie legt fest, wann der Übergangseffekt enden soll.Der Standardwert ist 0s, was bedeutet, dass der Übergangseffekt nicht startet.Ein negativer Wert lässt den Übergangseffekt sofort beginnen.