Animation.pause()

Baseline Widely available

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

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/es/web/api/web_animations_api/index.md)

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

Sintaxis

js
animation.pause();

Parámetros

Ningun.

Valor devuelto

Ningun.

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:

js
// 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:

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

Specification
Web Animations
# dom-animation-pause

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también