CSS animation-fill-mode
La proprietà CSS3 animation-fill-mode controlla lo stato dell'elemento dopo l'animazione
La proprietà animation-fill-mode determina come un elemento si comporta prima e dopo l'animazione. Impostando il valore su forwards, l'elemento manterrà lo stato finale dell'animazione. Impostando backwards, invece, l'elemento assume lo stato iniziale definito nella prima parte dell'animazione. Il valore predefinito è none, il che significa che l'elemento torna allo stato iniziale subito dopo il completamento dell'animazione. Il valore both conserva sia lo stato iniziale che quello finale dell'animazione.
Sintassi
Significato dei valori principali:
-
none: il comportamento predefinito. L'elemento non conserva alcun stile dell'animazione dopo che questa è terminata. L'elemento torna al suo stato iniziale.
-
forwards: l'elemento conserva gli stili definiti nell'ultimo frame dell'animazione, anche dopo che l'animazione è terminata.
-
backwards: l'elemento assume gli stili definiti nel primo frame dell'animazione prima che l'animazione inizi. Questo è utile per applicare effetti al caricamento.
-
both: l'elemento conserva sia gli stili dell'inizio che della fine dell'animazione, sia prima che dopo l'animazione.
Esempio proprietà: animation-fill-mode
Codice Esempio: animation-fill-mode
/* Definizione dell'animazione */@keyframes grow {
0% {
width: 100px;
background-color: #50a14f;
}100% {
width: 300px;
background-color: #e06c75;
}}.animated-box {
height: 60px;
width: 100px;
color: white;
text-align: center;
line-height: 60px;
border-radius: 8px;
font-weight: bold;
animation: grow 2s ease-in-out forwards;
animation-fill-mode: forwards; /* Conserva lo stato finale dell'animazione */
}
Contenuto Esempio: animation-fill-mode
Prova questo esempio
DEMO
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 18.97.14.88
