CSS transition-delay-Eigenschaft

Die CSS-Eigenschaft transition-delay legt fest, wann der Übergangseffekt starten soll.

Der Standardwert ist 0s, was bedeutet, dass der Übergangseffekt sofort beginnt.

Der angegebene Zeitversatz verzögert den Start der Animation. Negative Werte sind ebenfalls erlaubt. Eine negative Verzögerung bewirkt, dass der Übergang mitten in seiner Animationszeitlinie beginnt.

Der Wert kann eine Zeitangabe in Sekunden oder Millisekunden oder eine durch Kommas getrennte Liste von Zeitwerten sein. Wenn mehrere Werte angegeben werden, werden sie den entsprechenden Eigenschaften in der transition-property-Liste zugeordnet. Diese Eigenschaft ist auch in der transition-Abkürzung enthalten.

INFO

Moderne Browser unterstützen diese Eigenschaft nativ ohne Vendor-Prefixes.

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

Syntax

css

transition-delay: time | initial | inherit;

Beispiel für die transition-delay-Eigenschaft:

CSS-Codebeispiel für transition-delay

html

<!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>

Try it Yourself »

Beispiel für die transition-delay-Eigenschaft mit 2 Sekunden Verzögerung:

Ein weiteres CSS-Codebeispiel für transition-delay

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung
time	Gibt an, wie viele Sekunden oder Millisekunden ein Übergangseffekt warten soll, bevor er startet. Der Standardwert ist 0s.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Welche Aussage zur transition-delay-Eigenschaft ist korrekt?

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

CSS transition-delay-Eigenschaft ​

Syntax ​

Beispiel für die transition-delay-Eigenschaft: ​

Beispiel für die transition-delay-Eigenschaft mit 2 Sekunden Verzögerung: ​