Proprietà CSS animation-fill-mode

La proprietà animation-fill-mode definisce come un'animazione CSS applica gli stili al suo elemento target al di fuori del periodo in cui è effettivamente in esecuzione — ovvero, prima che inizi e dopo che termina.

Per impostazione predefinita, un'animazione @keyframes applica stili a un elemento solo durante la sua riproduzione. Nel momento in cui l'animazione termina, l'elemento torna immediatamente a ciò che il normale CSS specifica. Se è impostato un animation-delay, l'elemento mostra i suoi stili normali anche durante quel periodo di attesa. animation-fill-mode consente di modificare questo comportamento affinché l'elemento possa mantenere il último fotogramma al termine, oppure adottare il primo fotogramma prima dell'inizio. È una delle proprietà CSS3.

Perché animation-fill-mode è importante

Un problema comune: si anima una casella da invisibile a visibile, ma non appena l'animazione termina scompare di nuovo — perché la regola sottostante recita ancora opacity: 0. Impostando animation-fill-mode: forwards si mantiene l'elemento sull'ultimo fotogramma in modo che rimanga visibile. Questo è il motivo più comune per cui si ricorre a questa proprietà.

I quattro valori significativi corrispondono chiaramente a quando un fotogramma viene mantenuto:

none (predefinito) — l'elemento usa i suoi stili normali prima e dopo l'animazione. I fotogrammi chiave si applicano solo durante la riproduzione.
forwards — al termine dell'animazione, l'elemento mantiene gli stili dell'ultimo fotogramma chiave raggiunto (il fotogramma to/100% per un'esecuzione normale). Il fotogramma scelto dipende da animation-iteration-count e animation-direction.
backwards — durante il periodo di animation-delay prima che l'animazione inizi, l'elemento mostra già gli stili del primo fotogramma chiave (dipende da animation-direction).
both — applica le regole sia di forwards che di backwards: il primo fotogramma viene mantenuto prima che il ritardo termini, e l'ultimo fotogramma viene mantenuto dopo che l'animazione è finita.

Quando si fornisce alla proprietà abbreviata animation più valori separati da virgola, ogni modalità di riempimento si applica all'animazione corrispondente elencata in animation-name.

Valore iniziale	none
Si applica a	Tutti gli elementi. Si applica anche agli pseudo-elementi ::before e ::after.
Ereditato	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>

Provalo tu stesso »

Con forwards, la casella termina 200px più in basso e di colore verde — e rimane lì invece di tornare alla posizione iniziale e al colore blu.

Esempio della proprietà animation-fill-mode con il valore "backwards":

Esempio della proprietà CSS animation-fill-mode con il valore backwards

backwards ha un effetto visibile solo quando è presente un animation-delay: durante il ritardo l'elemento mostra già il primo fotogramma chiave. In questo caso, la casella è già nella sua posizione from e la pagina attende 2 secondi prima che il movimento inizi.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        top: 200px;
        animation: element 3s;
        animation-delay: 2s;
        animation-fill-mode: backwards;
      }
      @keyframes element {
        from {
          top: 0px;
          background-color: #1c87c9;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Durante il ritardo di 2 secondi la casella si trova a top: 0 ed è blu — il primo fotogramma chiave — invece dello stile verde a 200px verso il basso definito dalla regola dell'elemento.

Esempio della proprietà animation-fill-mode con il valore "both":

Esempio della proprietà CSS animation-fill-mode con il valore both

both combina i due: il primo fotogramma viene mantenuto durante il ritardo, poi l'animazione viene eseguita e l'ultimo fotogramma viene mantenuto al termine.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 3s;
        animation-delay: 2s;
        animation-fill-mode: both;
      }
      @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	Questo è il valore predefinito. L'animazione non applicherà alcuno stile all'elemento prima e dopo la sua esecuzione.
forwards	Specifica che l'elemento deve mantenere i valori di stile impostati dall'ultimo fotogramma chiave.
backwards	Specifica che l'elemento deve ottenere i valori di stile impostati dal primo fotogramma chiave e mantenerli durante il periodo di animation-delay.
both	Specifica che l'animazione deve seguire le regole sia di forwards che di backwards.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Esercitati

Pratica

La proprietà animation-fill-mode ha i seguenti valori, tranne:

forwardsbackwardsalternate