Proprietà CSS animation-duration
La proprietà animation-duration definisce il tempo impiegato dall'animazione per completare un ciclo. Guarda esempi e provali.
La proprietà animation-duration definisce la durata (in secondi o millisecondi) che un'animazione impiega per completare un ciclo. Un ciclo corrisponde a una singola esecuzione dal keyframe 0% al keyframe 100%; se l'animazione si ripete, questa durata si applica a ogni ripetizione, non alla durata totale complessiva. Molto spesso la proprietà abbreviata animation viene usata per impostare tutte le proprietà di animazione contemporaneamente, ma impostare animation-duration da sola è utile quando si vuole sovrascrivere solo il timing mantenendo intatto il resto dell'abbreviazione.
Il valore predefinito è 0s, il che significa che l'animazione si completa istantaneamente e i keyframe non hanno alcun effetto visibile. Questo è il motivo più comune per cui un'animazione "non funziona": la regola @keyframes e animation-name sono corretti, ma non è stata impostata alcuna durata. Un'animazione ha sempre bisogno di una durata diversa da zero per essere visibile.
I valori negativi non sono validi e causano l'ignoranza della proprietà (alcune implementazioni precedenti potrebbero invece trattarli come 0s). Se si desidera un avvio ritardato, utilizzare animation-delay — un ritardo negativo è valido lì e avvia l'animazione a metà ciclo.
Come la durata si combina con le altre proprietà di animazione
La durata è solo uno degli elementi di un'animazione. Funziona insieme a:
- animation-name — quale regola
@keyframeseseguire (necessaria perché accada qualcosa). - animation-timing-function — la curva di velocità all'interno della durata (
ease,linear, ecc.). - animation-iteration-count — quante volte la durata si ripete (
infiniteper loop senza fine). - animation-delay — quanto tempo aspettare prima che inizi il primo ciclo.
Ad esempio, animation: pulse 2s ease-in-out 3 esegue i keyframe pulse tre volte, con ogni ciclo della durata di 2 secondi, per un totale di 6 secondi di movimento.
Quando vengono specificati più valori separati da virgola per qualsiasi proprietà di animazione, vengono applicati in ordine alle animazioni corrispondenti definite in animation-name. Se ci sono più durate che nomi, i valori extra vengono ignorati; se ce ne sono di meno, la lista torna al ciclo e ricomincia dall'inizio. Ad esempio, con due nomi di animazione e animation-duration: 1s, 2s, 3s, il terzo valore viene scartato; con animation-duration: 1s, entrambe le animazioni usano 1s.
Secondi vs. millisecondi
1s e 1000ms sono equivalenti — usare quello che risulta più leggibile. I millisecondi sono comodi per brevi transizioni UI (250ms), i secondi per movimenti in loop più lunghi (6s). L'unità è obbligatoria: animation-duration: 2 (senza unità) non è valido e la dichiarazione viene ignorata.
La proprietà animation-duration è una delle proprietà CSS3.
| Valore iniziale | 0s |
|---|---|
| Si applica a | Tutti gli elementi, pseudo-elementi ::before e ::after. |
| Ereditato | 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 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 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;
}
@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 | Prova |
|---|---|---|
| time | Specifica la durata impiegata da un'animazione per completare un ciclo. I valori possono essere specificati in secondi (s) o millisecondi (ms). Si noti che il valore predefinito per la proprietà stessa è 0s, non la parola chiave time. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito (0s). | |
| inherit | Eredita la proprietà dall'elemento padre. |
Supporto nei browser
animation-duration è supportato in tutti i browser moderni. Non è ereditato e non è di per sé animabile — modificare la durata a metà animazione riavvia il timing invece di interpolarlo.
Proprietà correlate
- animation — l'abbreviazione che imposta la durata insieme a nome, timing, ritardo e altro.
- animation-name — assegna il nome alla regola
@keyframesda eseguire. - animation-delay — ritarda l'avvio dell'animazione.
- animation-iteration-count — ripete la durata un numero definito di volte.
- animation-timing-function — modella la curva di velocità all'interno della durata.
- animation-fill-mode — controlla gli stili prima e dopo l'esecuzione dell'animazione.