Animation.finish()

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 finish() de la interfaz Animation de la Web Animations API establece el tiempo de reproducción actual hasta el final de la animación correspondiente a la dirección de reproducción actual. Es decir, si la animación se está reproduciendo hacia adelante, establece el tiempo de reproducción a la longitud de la secuencia de animación, y si la animación se reproduce hacia atras, habiendo llamado a su método reverse(), establece el tiempo de la reproducción en 0.

Sintaxis

Animation.finish();

InvalidState: La velocidad de reproducción del reproductor es 0 o la velocidad de reproducción de la animación es mayor que 0 y el tiempo de finalización de la animación es infinito.

Ejemplos

El siguiente ejemplo muestra cómo usar el método finish() y captura un error InvalidState.

interfaceElement.addEventListener("mousedown", function() {
  try {
    player.finish();
  } catch(e if e instanceof InvalidState) {
    console.log("finish() called on paused or finished animation.");
  } catch(e);
    logMyErrors(e); //pasa el objeto excepción al manejador de errores.
  }
});

El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción.

elem.getAnimations().forEach(function (animation) {
  return animation.finish();
});

Especificaciones

Specification
Web Animations # dom-animation-finish

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

Web Animations API
Animation para otros métodos y propiedades que puede usar para controlar la animación de la página web.
Animation.play() para reproducir una animación hacia adelante.
Animation.reverse() para reproducir una animación hacia atrás.