Esempio
La modifica della proprietà animationFillMode di un <div> elemento:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Prova tu stesso " Definizione e l'utilizzo
La proprietà animationFillMode specifica cosa si applicheranno gli stili per l'elemento quando l'animazione non è in riproduzione (when it is finished, or when it has a "delay") .
Per impostazione predefinita, le animazioni CSS non influirà l'elemento che si sta animando fino a quando il primo fotogramma chiave è "played" , e poi si ferma una volta che colpisce l'ultimo fotogramma chiave è stata completata. La proprietà animationFillMode può ignorare questo comportamento.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da Moz specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| animationFillMode | 43.0 | Non supportato | 16,0 5.0 Moz | Non supportato | 30,0 |
Sintassi
Restituire la proprietà animationFillMode:
object .style.animationFillMode Impostare la proprietà animationFillMode:
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
I valori delle proprietà
| Valore | Descrizione |
|---|---|
| none | Valore di default. L'animazione non si applica gli stili al bersaglio prima o dopo che è stato l'esecuzione |
| forwards | Dopo l'animazione estremità (determined by animation-iteration-count) , l'animazione applicherà i valori delle proprietà per il tempo dell'animazione conclusa |
| backwards | L'animazione si applicano i valori delle proprietà definite nel fotogramma chiave che avvierà la prima iterazione dell'animazione, durante il periodo definito dagli animazione ritardo. Questi sono entrambi i valori del fotogramma chiave da (when animation-direction is "normal" or "alternate") o quelli della chiave all'altro (when animationDirection is "reverse" or "alternate-reverse") |
| both | L'animazione seguirà le regole per sia in avanti che all'indietro. Cioè, si estenderà le proprietà di animazione in entrambe le direzioni |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Dettagli tecnici
| Valore di default: | nessuna |
|---|---|
| Valore di ritorno: | Una stringa, che rappresenta la proprietà di animazione-fill-mode di un elemento |
| CSS Version | CSS3 |
Pagine correlate
Di riferimento CSS: animation-fill-mode property
<Stile di oggetto