Beispiel
Warten Sie zwei Sekunden, dann starten Sie die Animation:
div {
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
} Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die Animation-delay-Eigenschaft gibt eine Verzögerung für den Start einer Animation.
Die Animation-Verzögerungswert wird in Sekunden angegeben (s) oder Millisekunden (ms) .
| Standardwert: | 0s |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.animationDelay="1s" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| animation-delay | 43.0 4.0 -webkit- | 10.0 | 16.0 5,0 -moz- | 9.0 4.0 -webkit- | 30.0 15,0 -webkit- 12.0 -o- |
CSS-Syntax
animation-delay:time|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| time | Optional. Legt die Anzahl der Sekunden (s) oder Millisekunden (ms) zu warten , bevor die Animation beginnt. Der Standardwert ist 0. Negative Werte sind erlaubt | Spiel es " |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Mehr Beispiele
Beispiel
Mit negativen Werten feststellen, dass die Animation beginnt 2 Sekunden in den Animationszyklus:
div {
-webkit-animation-delay: -2s; /* Chrome, Safari, Opera */
animation-delay: -2s;
}
Versuch es selber " Verwandte Seiten
CSS3 Tutorial: CSS3 Animationen
HTML - DOM - Referenz: animationDelay property