Proprietà CSS animation-duration
La proprietà animation-duration definisce il tempo in cui l'animazione completa un ciclo. Guarda alcuni esempi e provali tu stesso.
La proprietà animation-duration definisce la durata (in secondi o millisecondi) necessaria a un'animazione per completare un ciclo. Molto spesso si usa la proprietà shorthand animation per impostare tutte le proprietà dell'animazione in una volta sola. Il valore predefinito della proprietà animation-duration è 0s, il che significa che l'animazione si completa istantaneamente e i keyframe non hanno alcun effetto visibile. I valori negativi non sono validi e fanno sì che la proprietà venga ignorata. Tuttavia, alcune implementazioni più datate potrebbero trattarli come equivalenti a 0s.
Quando per una qualsiasi proprietà di animazione vengono specificati più valori separati da virgola, questi vengono applicati in ordine alle animazioni corrispondenti definite in animation-name. Se i valori sono più numerosi dei nomi delle animazioni, i valori si ripetono ciclicamente dall'inizio.
La proprietà animation-duration è una delle proprietà CSS3.
| 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.animationDuration = "4s"; |
Sintassi
Sintassi della proprietà CSS animation-duration
animation-duration: time | initial | inherit;Esempio della proprietà animation-duration:
Esempio della proprietà CSS animation-duration con i secondi
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 7s infinite;
}
@keyframes pulse {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #eee
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property</div>
</body>
</html>Esempio della proprietà animation-duration con una durata di 6 secondi:
Esempio della proprietà CSS animation-duration con 6 secondi
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: nudge 6s ease infinite alternate, nudge 6s linear infinite alternate;
}
@keyframes nudge {
0%,
100% {
transform: translate(0, 0);
}
60% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| time | Specifica la durata necessaria a un'animazione per completare un ciclo. I valori possono essere specificati in secondi (s) o millisecondi (ms). Nota che il valore predefinito della proprietà è 0s, non la parola chiave time. | Provalo » |
| initial | Fa usare alla proprietà il suo valore predefinito. | |
| inherit | Eredita la proprietà dall'elemento genitore. |