CSS animation-play-state
La proprietà CSS3 animation-play-state controlla la pausa e la riproduzione dell'animazione
La proprietà animation-play-state consente di mettere in pausa o far riprendere un'animazione durante il suo ciclo di esecuzione. Con il valore paused, l'animazione si ferma, mentre con il valore running l'animazione è in esecuzione. È utile per interagire con l'utente, come nel caso di effetti che si attivano al passaggio del mouse o per animazioni che si devono fermare quando l'utente non sta guardando una determinata sezione di una pagina.
Sintassi
Significato dei valori principali:
-
paused: l'animazione è messa in pausa e non viene eseguita. Può essere utilizzato per fermare un'animazione in corso senza annullarla completamente.
-
running: l'animazione è in esecuzione. Questo è il valore predefinito e indica che l'animazione sta procedendo normalmente.
Esempio proprietà: animation-play-state
Codice Esempio: animation-play-state
/* Definizione dell'animazione */@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}.animated-box {
width: 100px;
height: 60px;
background-color: #ff9800;
color: white;
line-height: 60px;
text-align: center;
border-radius: 6px;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-play-state: running; /* Animazione attiva */
}
Contenuto Esempio: animation-play-state
Prova questo esempio
DEMO
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
IP: 18.97.14.88
