Proprietà CSS animation-play-state
La proprietà CSS animation-play-state specifica se l'animazione è in riproduzione o in pausa. Guarda un esempio e provalo tu stesso.
La proprietà CSS animation-play-state specifica se l'animazione è in riproduzione o in pausa. Se riprendi un'animazione in pausa, questa ripartirà dal punto in cui era stata interrotta al momento della pausa, anziché ricominciare dall'inizio della sequenza. Inoltre, puoi avviare l'animazione dallo stato di pausa.
Quando per una qualsiasi proprietà di animazione vengono specificati più valori separati da virgola, questi verranno associati in modo diverso alle animazioni definite in animation-name.
La proprietà animation-play-state è una delle proprietà CSS3.
In JavaScript, questa proprietà può essere usata per mettere in pausa l'animazione nel mezzo di un ciclo.
| Valore iniziale | running |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche agli pseudo-elementi ::before e ::after. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.animationPlayState = "paused"; |
Sintassi
Sintassi della proprietà CSS animation-play-state
animation-play-state: paused | running | initial | inherit;Esempio della proprietà animation-play-state con il valore "running":
Esempio della proprietà CSS animation-play-state con il valore running
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: #ccc;
position: relative;
animation: play 10s;
animation-play-state: running;
}
@keyframes play {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-play-state example</h2>
<p>Here the animation-play-state is set to "running".</p>
<div></div>
</body>
</html>Nell'esempio seguente, l'animazione si fermerà al passaggio del mouse.
Esempio della proprietà animation-play-state con il valore "paused":
Esempio della proprietà CSS animation-play-state con il valore paused
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: #8ebf42;
position: relative;
animation: play 1s infinite;
}
div:hover {
animation-play-state: paused;
}
@keyframes play {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<p>Hover over the green box to stop the animation.</p>
<div></div>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| running | È il valore predefinito, usato quando l'animazione è in riproduzione. | Provalo » |
| paused | L'animazione è in pausa. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | |
| inherit | Eredita la proprietà dall'elemento genitore. |