Proprietà animation-fill-mode

È possibile controllare gli stili dell'elemento prima e dopo l'esecuzione dell'animazione. animation-fill-mode specifica se un elemento deve mantenere il suo stato finale dall'animazione o tornare al suo stato originale.

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

• none - Questo è il valore predefinito. L'animazione non influenzerà la visualizzazione dell'elemento né prima né dopo l'animazione. L'elemento apparirà come inizialmente;
• forwards - Significa che gli stili alla fine dell'animazione rimarranno per l'elemento e non tornerà alla visualizzazione iniziale;
• backwards - Significa che l'elemento avrà gli stili specificati all'inizio dell'animazione. Anche se l'animazione viene attivata al passaggio del mouse o ha un certo ritardo;
• both - Combina backwards e forwards. Significa che prima dell'esecuzione dell'animazione, l'elemento avrà gli stili specificati all'inizio dell'animazione. Dopo l'esecuzione dell'animazione, l'elemento avrà gli stili impostati alla fine dell'animazione.

Consideriamo il seguente esempio per verificare la differenza tra i valori. È stato realizzato per mostrare che lo stato dell'elemento non cambierà mai se abbiamo applicato animation-fill-mode con il valore corretto. Dopo l'esecuzione del codice, lo stato finale degli elementi sarà immutabile. Se è necessario vedere nuovamente l'animazione, ricaricare la pagina.

Proprietà animation-play-state

Possiamo controllare lo stato di esecuzione dell'animazione. Può essere in pausa o in esecuzione.

animation-play-state: running | paused

• running - Questo è il valore predefinito. Avvia o riprende l'animazione;
• paused - Interrompe l'animazione nello stato attuale.

Consideriamo il seguente esempio, in cui interromperemo l'animazione infinita al passaggio del cursore.