animation-play-state

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen

La propiedad CSS animation-play-state determina si una animación está en ejecución o en pausa. Puede ser consultada para determinar si la animación se está ejecutando. Además, su valor se puede establecer para pausar y reanudar una animación.

Reanudando una animación pausada, ésta empezará en el punto en el que fue pausada, en vez de empezar desde el principio.

Valor inicial	`running`
Applies to	todos los elementos y los pseudoelementos `::before` y `::after`
Heredable	no
Valor calculado	como se especifica
Animation type	Not animatable

Sintaxis

css

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;

Valores

running: La animación se está ejecutando.
paused: La animación está pausada.

Syntax formal

animation-play-state = 
  <single-animation-play-state>#  

<single-animation-play-state> = 
  running  |
  paused

Ejemplos

Visita animaciones CSS para ver algunos ejemplos.

Especificaciones

Specification
CSS Animations Level 1 # animation-play-state