CSS animation-delay property

Definition and usage

animation-delay Property definierar när animationen börjar.

animation-delay-värden mäts i sekunder eller millisekunder.

Tip:Tillåter negativa värden, -2s gör att animationen börjar omedelbart, men hoppas över 2 sekunder innan den börjar i animationssyklusen.

See also:

CSS3 Tutorial:CSS animation

HTML DOM Reference Manual:animationDelay property

Example

Example 1

Vänta två sekunder innan animationen börjar:

div {
  animation-delay: 2s;
}

Try it yourself

Example 2

Negativa värden, observera att animationen hoppas över 2 sekunder innan den börjar i animationssyklusen:

div {
  animation-delay: -2s;
}

Try it yourself

CSS syntax

animation-delay: time;
Value Description Test
time Optional. Definierar tiden innan animationen börjar, mätt i sekunder eller millisekunder. Standardvärdet är 0. Test

Technical details

Default value: 0
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.animationDelay="2s"

Webbläsarstöd

Talen i tabellen anger den första webbläsarens version som fullständigt stöder egenskapen.

Tal med -webkit-, -moz- eller -o- först använda prefixets första version.

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-