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 |
| Media | visual |
| Valor calculado | como se especifica |
| Animation type | discrete |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
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>#where
<single-animation-play-state> = running | paused
Ejemplos
Visita animaciones CSS para ver algunos ejemplos.
Especificaciones
| Especificación | Estado | Comentario |
|---|---|---|
| CSS Animations 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!
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Soporte básico | (Yes)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0) |
10 | 12 -o 12.10 |
(Yes)-webkit |
| Característica | Android | Chrome | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| Soporte básico | ? | ? | ? | ? | ? | ? | ? |