Animation.pause()

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

El método pause() de la interfaz Animation de la  Web Animations API, suspende la reproducción de la animación.

Sintaxis

animation.pause(); 

Parámetros

None.

Valor devuelto

None.

Excepciones

InvalidStateError
La animación currentTime no está resuelta unresolved (por ejemplo, si nunca se ha reproducido o no se está reproduciendo actualmente) y el tiempo de finalización de la animación es infinito positivo.

Lanza un InvalidStateError si el currentTime de la animación no está resuelto unresolved (tal vez no se haya iniciado la reproducción) y el fin de la animación es infinito positivo.

Ejemplos

Animation.pause() es utilizado en varias ocasiones en el juego Alice in Web Animations API Land Growing/Shrinking Alice Game, porque las animaciones creadas con el método Element.animate() se inician de inmediato y deben ser detenidas manualmente para evitar esto:

// animación de la magdalena que lentamente se está comiendo
var nommingCake = document.getElementById('eat-me_sprite').animate(
[
  { transform: 'translateY(0)' },
  { transform: 'translateY(-80%)' }   
], {
  fill: 'forwards',
  easing: 'steps(4, end)',
  duration: aliceChange.effect.timing.duration / 2
});

// realmente solo debe funcionar al hacer click, así que se pausa inicialmente:
nommingCake.pause();

Adicionalmente, al restablecer:

// Una función multiusos para pausar las animaciones de Alicia, el pastelito y la botella que dice "drink me."
var stopPlayingAlice = function() {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

// Cuando el usuario suelte el cupcake o la botella, pause las animaciones.
cake.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);

Especificaciones

Especificación Estado Comentario
Web Animations
La definición de 'play()' en esta especificación.
Working Draft

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
pause
Experimental
Chrome Soporte completo 39Edge ? Firefox Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 26Safari Sin soporte NoWebView Android Soporte completo 39Chrome Android Soporte completo 39Firefox Android Soporte completo 48
Soporte completo 48
Sin soporte 46 — 48
Deshabilitado
Deshabilitado From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 26Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 4.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Ver también