Esempio
Animare qualcosa che si muove da un luogo all'altro e farlo rimanere lì:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} Prova tu stesso " Definizione e utilizzo
La proprietà di animazione-fill-mode specifica uno stile per l'elemento quando l'animazione non sta giocando (when it is finished, or when it has a delay) .
Per impostazione predefinita, le animazioni CSS non influenzano l'elemento fino a quando il primo fotogramma chiave è "played" , e poi si ferma una volta che l'ultimo fotogramma chiave è stata completata. La proprietà di animazione-fill-mode può ignorare questo comportamento.
| Valore di default: | none |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.animationFillMode="forwards" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz-, o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16,0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
CSS Sintassi
animation-fill-mode: none|forwards|backwards|both|initial|inherit;I valori delle proprietà
| Valore | Descrizione |
|---|---|
| none | Valore di default. L'animazione non si applicherà tutti gli stili per l'elemento di destinazione 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 momento l'animazione si è conclusa |
| backwards | L'animazione si applicano i valori di proprietà definiti nel fotogramma chiave che prenderà il via la prima iterazione dell'animazione, durante il periodo definito da un'animazione di ritardo. Questi sono sia i valori del fotogramma chiave da (when animation-direction is "normal" or "alternate") o quelle del fotogramma chiave di (when animation-direction is "reverse" or "alternate-reverse") |
| both | L'animazione seguirà le regole per sia in avanti che all'indietro. Cioè, 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à |
Pagine correlate
CSS3 tutorial: CSS3 animazioni
Di riferimento HTML DOM: animationFillMode property