Proprietà animation-delay CSS

Definizione e uso

animation-delay L'attributo definisce quando inizia l'animazione.

Il valore di animation-delay è espresso in secondi o millisecondi.

Suggerimento:Permette valori negativi, -2s fa iniziare immediatamente l'animazione ma salta 2 secondi per entrare nel ciclo dell'animazione.

Vedi anche:

Corso CSS3:Animazione CSS

Manuale HTML DOM:Proprietà animationDelay

Esempio

Esempio 1

Attendere 2 secondi prima di iniziare l'animazione:

div {
  animation-delay: 2s;
}

Prova personalmente

Esempio 2

Valori negativi, notare che l'animazione salta 2 secondi per entrare nel ciclo dell'animazione:

div {
  animation-delay: -2s;
}

Prova personalmente

Sintassi CSS

animation-delay: time;
Valore Descrizione Test
time Opzionale. Definisce il tempo di attesa prima dell'inizio dell'animazione, espresso in secondi o millisecondi. Il valore predefinito è 0. Test

Dettagli tecnici

Valore predefinito: 0
Ereditarietà: no
Versione: CSS3
Sintassi JavaScript: object.style.animationDelay="2s"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Numeri con -webkit-, -moz- o -o- rappresentano la prima versione con prefisso utilizzata.

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-