Proprietà CSS animation-fill-mode
La proprietà animation-fill-mode imposta uno stile all'elemento quando l'animazione non è in riproduzione. Trova alcuni esempi con valori diversi.
La proprietà animation-fill-mode imposta uno stile all'elemento quando l'animazione non è in esecuzione (prima che inizi, dopo che termina o entrambi).
animation-fill-mode è una delle proprietà CSS3.
La proprietà animation-fill-mode è l'unica proprietà che influisce sull'elemento prima che venga riprodotto il primo @keyframe o dopo che è stato riprodotto l'ultimo keyframe. Può assumere i seguenti valori: "forwards" per specificare che l'elemento deve mantenere i valori di stile impostati dall'ultimo keyframe (a seconda delle proprietà animation-iteration-count e animation-direction); "backwards" per specificare che l'elemento deve assumere i valori di stile impostati dal primo keyframe (dipende da animation-direction) e mantenerli durante il periodo di animation-delay; "both" per specificare che l'animazione deve seguire le regole sia di "forwards" che di "backwards"; e "none" (predefinito) per specificare che non verrà applicato alcuno stile all'elemento prima o dopo l'esecuzione dell'animazione.
Quando per le proprietà shorthand dell'animazione vengono specificati più valori separati da virgola, questi vengono applicati alle animazioni corrispondenti definite in animation-name.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche agli pseudo-elementi ::before e ::after. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.animationFillMode = "forwards"; |
Sintassi
Sintassi della proprietà CSS animation-fill-mode
animation-fill-mode: none | forwards | backwards | both | initial | inherit;Esempio della proprietà animation-fill-mode con il valore "forwards":
Esempio della proprietà CSS animation-fill-mode con il valore forwards
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
animation: element 5s;
animation-fill-mode: forwards;
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>Esempio della proprietà animation-fill-mode con il valore "backwards":
Esempio della proprietà CSS animation-fill-mode con il valore backwards
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
animation: element 5s;
animation-fill-mode: backwards;
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| none | È il valore predefinito. L'animazione non applicherà alcuno stile all'elemento prima e dopo il suo avvio. |
| forwards | Specifica che l'elemento deve mantenere i valori di stile impostati dall'ultimo keyframe. |
| backwards | Specifica che l'elemento deve assumere i valori di stile impostati dal primo keyframe e mantenerli durante il periodo di animation-delay. |
| both | Specifica che l'animazione deve seguire le regole sia di forwards che di backwards. |
| initial | Fa usare alla proprietà il suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |