Proprietà CSS animation-delay
La proprietà CSS animation-delay specifica quando un'animazione inizierà. Guarda gli esempi e provali tu stesso.
La proprietà CSS animation-delay specifica quando un'animazione inizierà. L'animazione può iniziare più tardi, immediatamente oppure saltare in avanti a un punto specifico della timeline (usando un ritardo negativo).
La proprietà animation-delay è una delle proprietà CSS3.
Il valore predefinito è 0. Sono ammessi valori negativi. Quando si usano valori negativi, l'animazione inizierà come se fosse già in riproduzione da N secondi/millisecondi.
Quando per una proprietà di animazione vengono specificati più valori separati da virgola, questi vengono applicati ciclicamente in base al numero di animazioni definite in animation-name.
Se i keyframes di un'animazione omettono il valore iniziale, il browser usa gli stili calcolati dell'elemento nel momento in cui l'animazione inizia.
| Proprietà | Valore |
|---|---|
| Valore iniziale | 0s |
| Si applica a | Tutti gli elementi e gli pseudo-elementi ::before e ::after. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.animationDelay = "1s"; |
Sintassi
Sintassi della proprietà CSS animation-delay
animation-delay: time | initial | inherit;Esempio della proprietà animation-delay:
Esempio della proprietà CSS animation-delay
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #1c87c9;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example</h2>
<p>Here the animation starts after 3 seconds.</p>
<div></div>
</body>
</html>Esempio della proprietà animation-delay con un valore negativo:
Esempio della proprietà CSS animation-delay con valore negativo
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: delay 5s infinite;
animation-delay: -2s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example with negative value.</h2>
<p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
<div></div>
</body>
</html>Esempio della proprietà animation-delay specificata in millisecondi:
Esempio della proprietà CSS animation-delay con millisecondi
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #8ebf42;
position: relative;
animation: delay 5s infinite;
animation-delay: 200ms;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example in milliseconds.</h2>
<p>Here, the animation will start after 200ms.</p>
<div></div>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| time | Definisce il numero di secondi (s) o millisecondi (ms) di attesa prima dell'inizio dell'animazione. È facoltativo. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | |
| inherit | Eredita la proprietà dall'elemento genitore. |