Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Gestione degli Stati di Animazione in CSS | Animazioni CSS Avanzate
Tecniche CSS Avanzate

bookGestione 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 - 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.

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Qual è lo scopo della proprietà animation-fill-mode

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 4

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.04

bookGestione 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 - 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.

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Qual è lo scopo della proprietà animation-fill-mode

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 4
some-alt