Stile animationFillMode Property
Esempio
Modifica della proprietà animationFillMode di un elemento <div>:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Definizione e utilizzo
La proprietà animationFillMode specifica quali stili verranno applicati all'elemento quando l'animazione non è in riproduzione (quando è terminata o quando ha un "ritardo").
Per impostazione predefinita, le animazioni CSS non influiranno sull'elemento che stai animando fino a quando il primo fotogramma chiave non viene "riprodotto", quindi smette di influenzarlo una volta completato l'ultimo fotogramma chiave. La proprietà animationFillMode può sovrascrivere questo comportamento.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da Moz specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
animationFillMode | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Sintassi
Restituisce la proprietà animationFillMode:
object.style.animationFillMode
Imposta la proprietà animationFillMode:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Valori di proprietà
Value | Description |
---|---|
none | Default value. The animation will not apply any styles to the target before or after it is executing |
forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
backwards | The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse") |
both | The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Dettagli tecnici
Valore di default: | nessuno |
---|---|
Valore di ritorno: | Un oggetto String, che rappresenta la proprietà della modalità di riempimento dell'animazione di un elemento |
Versione CSS | CSS3 |
Pagine correlate
Riferimento CSS: proprietà modalità riempimento animazione