Gestire gli stati delle animazioni con animation-play-state

In questo post riporto alcuni consigli di Lea Verou per applicare al meglio la proprietà animation-play-state.
Gestire gli stati delle animazioni con animation-play-state

Secondo Lea Verou

Pochi giorni fa mentre spulciavo tra i miei feed sono incappato in un post molto interessante di Lea Verou riguardo le animazioni css.

Lea ci fa notare che quando un’animazione è continua le cose sono semplici, tipo il loading di una pagina, ma cosa succede quando l’animazione è applicata su uno stato come hover, active o focus? L’elemento scatta bruscamente quando togliamo il puntatore per ritornare alla posizione iniziale. In alcuni casi potrebbe essere utile immobilizzare l’ultimo fotogramma fino al prossimo passaggio del mouse, per ottenere questo si può usare la proprietà animation-play-state.

Come impostare il css

Inizialmente occorre impostare sull’elemento la proprietà animation-play-state settata sul valore paused.

 
#glasslandscape{-webkit-animation-play-state:paused;}

Basta poi sostituire il valore in running sullo stato hover.

#glasslandscape{-webkit-animation-play-state:running;}

Conclusione

Per quanto mi riguarda ho impostato il mio esempio sullo spostamento di un background e devo dire che il risultato è al quanto notevole. Date un’occhiata all’esempio e spero vi sia di aiuto per sviluppare nuove idee 😉

Fonte

Smooth state animations with animation-play-state di Lea Verou

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github