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 inicialrunning
Applies totodos los elementos y los pseudoelementos ::before y ::after
Heredableno
Valor calculadocomo se especifica
Animation typeNot 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

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-play-state
paused
running

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Consulte también