animation-play-state

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 typediscrete

Sintaxis

/* 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

<single-animation-play-state># (en-US)

where
<single-animation-play-state> = running | (en-US) paused

Ejemplos

Visita animaciones CSS para ver algunos ejemplos.

Especificaciones

Especificación Estado Comentario
CSS Animations Level 1
La definición de 'animation-play-state' en esta especificación.
Working Draft Definición incial

Compatibilidad entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico (Yes)-webkit (en-US)
43.0
5.0 (5.0)-moz (en-US)
16.0 (16.0)
10 12 -o (en-US)
12.10
(Yes)-webkit (en-US)
Característica Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Soporte básico ? ? ? ? ? ? ?

 

Consulte también