Propiedad animation-play-state de CSS
CSS animation-play-state Property specified if the animation is running or it is paused. See an example and try it yourself.
La propiedad animation-play-state de CSS especifica si la animación está en ejecución o en pausa. Si reanudas una animación en pausa, comenzará desde el punto en que se detuvo en lugar de empezar desde el inicio de la secuencia de animación. Además, puedes iniciar la animación desde un estado de pausa.
Cuando se especifican varios valores separados por comas para cualquier propiedad de animación, se asignarán a las animaciones definidas en animation-name de manera diferente.
La propiedad animation-play-state es una de las propiedades CSS3.
En JavaScript, esta propiedad se puede utilizar para pausar la animación a mitad de un ciclo.
| Valor inicial | running |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a los pseudo-elementos ::before y ::after. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.animationPlayState = "paused"; |
Sintaxis
Sintaxis de la propiedad animation-play-state de CSS
animation-play-state: paused | running | initial | inherit;Ejemplo de la propiedad animation-play-state con el valor "running":
Ejemplo de la propiedad CSS animation-play-state con el 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>Ejemplo de animation-play-state</h2>
<p>Aquí animation-play-state está configurado en "running".</p>
<div></div>
</body>
</html>En el siguiente ejemplo, la animación se detendrá al pasar el cursor sobre ella.
Ejemplo de la propiedad animation-play-state con el valor "paused":
Ejemplo de la propiedad CSS animation-play-state con el 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>Pasa el cursor sobre el cuadro verde para detener la animación.</p>
<div></div>
</body>
</html>Valores
| Valor | Descripción | Reproducir |
|---|---|---|
| running | Es el valor predeterminado cuando la animación está en ejecución. | Reproducir » |
| paused | La animación está en pausa. | Reproducir » |
| initial | Establece la propiedad en su valor predeterminado. | |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS 'animation-play-state'?