Gestione degli Stati di Animazione in CSS
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
- Combinabackwards
eforwards
. 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.
index.html
index.css
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.
index.html
index.css
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.04
Gestione degli Stati di Animazione in CSS
Scorri per mostrare il menu
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
- Combinabackwards
eforwards
. 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.
index.html
index.css
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.
index.html
index.css
Grazie per i tuoi commenti!