CSS animation-delay Eigenschap

Definitie en gebruik

animation-delay De eigenschap definieert wanneer de animatie begint.

De waarden van animation-delay worden in seconden of milliseconden gemeten.

Tip:Negatieve waarden zijn toegestaan, -2s zorgt ervoor dat de animatie onmiddellijk begint, maar overslaat 2 seconden voordat de animatiecyclus begint.

Zie ook:

CSS3 tutorial:CSS animatie

HTML DOM referentiemanual:animationDelay-eigenschap

Voorbeeld

Voorbeeld 1

Wacht twee seconden voordat de animatie begint:

div {
  animation-delay: 2s;
}

Probeer het zelf

Voorbeeld 2

Negatieve waarden, let op: de animatie overslaat 2 seconden voordat de animatiecyclus begint:

div {
  animation-delay: -2s;
}

Probeer het zelf

CSS syntaxis

animation-delay: tijd;
Waarde Beschrijving Test
tijd Optioneel. Definieer de tijd die de animatie wacht voordat deze begint, in seconden of milliseconden. De standaardwaarde is 0. Test

Technische details

Standaardwaarde: 0
Inheritantie: nee
Versie: CSS3
JavaScript syntaxis: object.style.animationDelay="2s"

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Getallen met -webkit-、-moz- of -o- voorafgaand aan een cijfer vertegenwoordigen de eerste versie die de prefix gebruikt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-