Attributo Style animationFillMode

Definizione e uso

animationFillMode L'attributo specifica lo stile applicato all'elemento quando l'animazione non viene riprodotta (alla fine dell'animazione, o con "ritardo").

Di default, le animazioni CSS non influenzano l'elemento animato prima di "riprodurre" il primo keyframe, e smettono di influenzarlo alla fine dell'ultimo keyframe.animationFillMode L'attributo può sovrascrivere questo comportamento.

Esempio

Modifica l'attributo animationFillMode dell'elemento <div>:

document.getElementById("myDIV").style.animationFillMode = "forwards";

Prova tu stesso

Sintassi

Restituisce l'attributo animationFillMode:

oggetto.style.animationFillMode

Imposta l'attributo animationFillMode:

oggetto.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

Valore dell'attributo

Valore Descrizione
none Valore predefinito. L'animazione non applicherà alcun stile al target prima o dopo l'esecuzione.
forwards Alla fine dell'animazione (decisa da animation-iteration-count), l'animazione applicherà questo valore di attributo alla fine dell'animazione.
backwards

Nel periodo di tempo definito da animation-delay, l'animazione applicherà i valori delle proprietà definiti nei keyframe, che inizieranno la prima iterazione dell'animazione.

Questi sono i valori dai keyframe (quando la direzione dell'animazione è "normal" o "alternate") o ai keyframe (quando la direzione dell'animazione è "reverse" o "alternate-reverse").
both L'animazione seguirà le regole in avanti e all'indietro. Questo significa che estenderà le proprietà dell'animazione in entrambe le direzioni.
initial Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit Inherita da questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: none
Valore di ritorno: Stringa che rappresenta l'elemento Proprietà animation-fill-mode.
Versione CSS: CSS3

Supporto dei browser

animationFillMode È una funzionalità CSS3 (1999).

Tutti i browser lo supportano completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Supporta Supporta Supporta Supporta Supporta 11

Pagine correlate

Manuale di riferimento CSS:Proprietà animation-fill-mode