Propriedade CSS animation-play-state
A propriedade CSS animation-play-state especifica se a animação está a ser reproduzida ou em pausa. Veja um exemplo e experimente-o você mesmo.
A propriedade CSS animation-play-state especifica se a animação está a ser reproduzida ou em pausa. Se retomar uma animação em pausa, esta começará a partir do ponto onde foi interrompida no momento da pausa, em vez de recomeçar do início da sequência de animação. Além disso, pode iniciar a animação a partir do estado de pausa.
Quando são especificados vários valores separados por vírgula para qualquer propriedade de animação, estes serão associados de forma diferente às animações definidas em animation-name.
A propriedade animation-play-state é uma das propriedades CSS3.
Em JavaScript, esta propriedade pode ser utilizada para pausar a animação a meio de um ciclo.
| Valor inicial | running |
|---|---|
| Aplica-se a | Todos os elementos. Aplica-se também aos pseudo-elementos ::before e ::after. |
| Herdada | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.animationPlayState = "paused"; |
Sintaxe
Sintaxe da propriedade CSS animation-play-state
animation-play-state: paused | running | initial | inherit;Exemplo da propriedade animation-play-state com o valor "running":
Exemplo da propriedade CSS animation-play-state com o valor 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>No exemplo seguinte, a animação para quando passa o rato por cima.
Exemplo da propriedade animation-play-state com o valor "paused":
Exemplo da propriedade CSS animation-play-state com o valor 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>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| running | É o valor predefinido, utilizado quando a animação está a ser reproduzida. | Experimente » |
| paused | A animação está em pausa. | Experimente » |
| initial | Define a propriedade com o seu valor predefinido. | |
| inherit | Herda a propriedade do seu elemento pai. |