Proprietà animation-duration
La proprietà animation-duration imposta
la durata di esecuzione dell'animazione.
Sintassi
selettore {
animation-duration: tempo in s o ms;
}
Valori
| Valore | Descrizione |
|---|---|
s |
Specifica il tempo in secondi (ad esempio 3s). |
ms |
Specifica il tempo in millisecondi (ad esempio 3ms). Un secondo equivale a 1000 millisecondi. |
Valore predefinito: 0s.
Esempio
In questo esempio l'animazione verrà riprodotta
per 3 secondi:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Vedi anche
-
la proprietà
animation-name,
che imposta il nome dell'animazione -
la proprietà
animation-delay,
che imposta il ritardo prima dell'esecuzione dell'animazione -
la proprietà
animation-timing-function,
che imposta la velocità di esecuzione dell'animazione -
la proprietà
animation-iteration-count,
che imposta il numero di iterazioni dell'animazione -
la proprietà
animation-direction,
che imposta la direzione dell'animazione -
la proprietà
animation-fill-mode,
che imposta lo stato dell'animazione -
la proprietà
animation-play-state,
che permette di mettere in pausa l'animazione -
la proprietà
animation,
che rappresenta una forma abbreviata per le animazioni -
la regola
@keyframes,
che definisce i fotogrammi chiave dell'animazione -
le transizioni fluide
transition, che rappresentano un'animazione al passaggio del mouse sull'elemento