Propiedad CSS animation-play-state
La propiedad CSS animation-play-state indica si la animación está en ejecución o pausada. Consulta ejemplos y pruébalo tú mismo.
La propiedad CSS animation-play-state controla si una animación CSS está en ejecución o pausada. Alternar su valor es la forma estándar de iniciar y detener una animación sin eliminarla.
Pausar no restablece el progreso: cuando se reanuda una animación pausada, continúa exactamente desde donde se detuvo, en lugar de reiniciarse desde el primer fotograma clave. Esto hace que animation-play-state sea ideal para controles de "reproducir/pausar" y para detener el movimiento mientras el usuario pasa el cursor o interactúa con un elemento.
Esta página cubre la sintaxis de la propiedad, sus valores aceptados, ejemplos controlados por hover y por JavaScript, y su comportamiento cuando varias animaciones se ejecutan en el mismo elemento.
Cuándo usarla
- Pausar al pasar el cursor — detén una animación en bucle (un marquee, un spinner, un carrusel) mientras el puntero esté sobre él, para que los usuarios puedan leer o interactuar.
- Botones de reproducir/pausar — cambia el valor desde JavaScript en respuesta a un clic, de la misma manera en que un reproductor multimedia alterna la reproducción.
- Diferir el inicio — declara una animación pero comienza en
paused, luego establécela enrunningmás tarde cuando se cumpla una condición (un elemento entra en la vista al desplazarse, los datos terminan de cargarse, etc.).
La propiedad es una de las propiedades de animación CSS3 y forma parte de la abreviatura animation, junto con animation-name, animation-duration y animation-iteration-count.
Múltiples animaciones
Cuando se asignan varias animaciones separadas por comas a un elemento, cada valor de animation-play-state se empareja, en orden, con la animación en la misma posición en animation-name. Por ejemplo, animation-play-state: paused, running pausa la primera animación y ejecuta la segunda. Si se indican menos estados que nombres, los valores se repiten para cubrir el resto.
| Valor inicial | running |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a los pseudoelementos ::before y ::after. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.animationPlayState = "paused"; |
Sintaxis
animation-play-state: paused | running | initial | inherit;Ejemplos
El valor "running"
running es el valor predeterminado, por lo que este ejemplo se comporta igual con o sin la declaración — el cuadro se desliza una vez en 10 segundos:
<!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>Pausar al pasar el cursor con el valor "paused"
Aquí una animación en bucle se pausa mientras el puntero está sobre el cuadro. Como pausar conserva el progreso actual, el cuadro se congela en su lugar y se reanuda desde el mismo punto cuando el cursor se aleja:
<!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>Alternar reproducir/pausar con JavaScript
Puedes leer o establecer el valor desde un script a través de la propiedad animationPlayState del object style de un elemento. Así es como funciona un botón de reproducir/pausar:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 150px;
height: 150px;
background: #8ebf42;
position: relative;
animation: play 1s infinite;
animation-play-state: paused;
}
@keyframes play {
from { left: 0px; }
to { left: 200px; }
}
</style>
</head>
<body>
<button id="toggle">Play</button>
<div id="box"></div>
<script>
const box = document.getElementById("box");
const button = document.getElementById("toggle");
button.addEventListener("click", () => {
const paused =
getComputedStyle(box).animationPlayState === "paused";
box.style.animationPlayState = paused ? "running" : "paused";
button.textContent = paused ? "Pause" : "Play";
});
</script>
</body>
</html>La animación comienza en paused, por lo que nada se mueve hasta que el usuario hace clic en el botón. Cada clic cambia el estado y actualiza la etiqueta del botón.
Valores
La propiedad acepta una sola palabra clave (o una lista separada por comas, una por animación):
| Valor | Descripción | Pruébalo |
|---|---|---|
| running | Es el valor predeterminado cuando la animación está en ejecución. | Pruébalo » |
| paused | La animación está pausada. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado (running). | |
| inherit | Hereda la propiedad de su elemento padre. |
Compatibilidad con navegadores
animation-play-state es compatible con todos los navegadores modernos: Chrome, Edge, Firefox, Safari y Opera. No es animable, por lo que cambiarla surte efecto inmediatamente en lugar de hacer una transición entre estados.