CSS/Eigenschaften/transition-delay

Browserunterstützung
caniuse.com

Die Eigenschaft transition-delay legt fest, mit welcher Verzögerung der Übergang beginnt. Die Angabe von 0s (Standardwert) startet die Animation in dem Moment, wo sich die zu animierende Eigenschaft ändert. Ein positiver Wert verzögert den Beginn der Animation um die angegebene Zeit. Ein negativer Wert verkürzt die Animationsdauer und berechnet die animierten Werte so, als habe die Animation schon vor der Eigenschaftsveränderung begonnen.

Erlaubte Werte

• Zeit: Zeitangabe in Sekunden(s) oder Millisekunden(ms).
• initial: Werte werden auf Standardwert zurückgesetzt
• inherit: Werte werden vom Elternelement übernommen

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

0s

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

aside {
    color:black
    transition-property: color; 
    transition-duration: 2s;
    transition-delay: 1s;
}
aside:hover {
    color: red;
}

Wenn der Benutzer mit der Maus über das aside-Element fährt, verändert sich die Textfarbe auf rot. Der Übergang beginnt nach 1 Sekunde.

Siehe auch

• CSS/Tutorials/Animation/Transition

Weblinks

• Spezifikation (W3C): transition-delay
• MDN: transition-delay
• Details: caniuse.com