CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

animation-fill-mode: none | forwards | backwards | both;

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

CODE: CSSpreleva codice
  1. /* Definizione dell'animazione */
  2. @keyframes grow {
  3.   0% {
  4.     width: 100px;
  5.     background-color: #50a14f;
  6.   }
  7.   100% {
  8.     width: 300px;
  9.     background-color: #e06c75;
  10.   }
  11. }
  12.  
  13. .animated-box {
  14.   height: 60px;
  15.   width: 100px;
  16.   color: white;
  17.   text-align: center;
  18.   line-height: 60px;
  19.   border-radius: 8px;
  20.   font-weight: bold;
  21.   animation: grow 2s ease-in-out forwards;
  22.   animation-fill-mode: forwards; /* Conserva lo stato finale dell'animazione */
  23. }

Contenuto Esempio: animation-fill-mode

Prova questo esempio

DEMO
PayPal DONATE

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies