English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo CSS animation-delay definisce quando inizia la riproduzione dell'animazione (ad esempio: un valore di 2s indica che l'animazione inizierà 2 secondi dopo essere stata applicata). Il valore può essere specificato in secondi (s) o millisecondi (ms).
La tabella seguente riassume l'uso contestuale e la cronologia delle versioni di questo attributo.
| Valore predefinito: | 0s |
|---|---|
| Applicabile a: | Tutti gli elementi ::before e ::after Elementi pseudo |
| Ereditarietà: | Nessuno |
| Animabile: | No.Vedere: Proprietà animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | object object.style.animationDelay="2s" |
La sintassi di questo attributo è la seguente:
animation-delay: time | initial | inherit
Il seguente esempio dimostra come utilizzare la proprietà animation-delay.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 2s;
animation-name: moveit;
animation-duration: 4s;
animation-delay: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Prova a vedere‹/›Attenzione:Questa proprietà consente l'uso di valori negativi. Tuttavia, sembra che inizi a eseguire a metà del ciclo dell'animazione, ad esempio un ritardo di animazione di -2s fa iniziare l'animazione immediatamente, ma inizia a eseguire 2 secondi dopo l'inizio dell'animazione.
La tabella seguente descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| time | Definisce il numero di secondi o millisecondi da aspettare prima di iniziare l'animazione. Il valore predefinito è 0s. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore calcolato dell'attributo animation-delay dell'elemento genitore. |
Compatibilità del browser per l'attributo animation-delay, tutti i browser mainstream supportano questa proprietà.
|
Si prega di consultare la seguente guida:Animazioni CSS3.
Proprietà e regole correlate:animation,animation-name,animation-duration,animation-timing-function,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.