Eigenschap CSS -animatievertraging
Voorbeeld
Start de animatie na 2 seconden:
div {
animation-delay: 2s;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De animation-delay
eigenschap specificeert een vertraging voor het starten van een animatie.
De waarde van de animatievertraging wordt gedefinieerd in seconden (s) of milliseconden (ms).
Standaardwaarde: | 0s |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.animationDelay="1s" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit-, -moz- of -o- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
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-syntaxis
animation-delay: time|initial|inherit;
Eigendomswaarden
Value | Description | Play it |
---|---|---|
time | Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Negatieve waarden gebruiken. Hier begint de animatie alsof deze al 2 seconden speelt:
div {
animation-delay: -2s;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-animaties
HTML DOM-referentie: eigenschap AnimationDelay