--- title: Animation.play() slug: Web/API/Animation/play tags: - API - Animacion - Animaciones Web - Experimental - Interface - Reference - metodo - play - waapi translation_of: Web/API/Animation/play ---
{{ APIRef("Web Animations") }}{{SeeCompatTable}}

El método play() de la interfaz {{ domxref("Animation") }} de la  Web Animations API inicia o reanuda la reproducción de una animación. Si la animación ha finalizado, llamando a  play() reinicia la animación y la reproduce desde el principio.

Sintaxis

animation.play();

Parámetros

None.

Valor devuelto

{{jsxref("undefined")}}

Ejemplo

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar el pastel hace que la animación de crecimiento de Alicia (aliceChange) sea reproducida hacia adelante, causando que Alicia se haga más grande, ademas de desencadenar la animación del pastel. Dos  Animation.play() y un EventListener:

// El pastel tiene su propia animación:
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
});

// Pausa la animación del pastel para que no se reproduzca inmediatamente.
nommingCake.pause();

// Esta función se reproducirá cuando el usuario haga click o toque
var growAlice = function() {

  // Reproduce la animación de Alicia.
  aliceChange.play();

  // Reproduce la animación del pastel.
  nommingCake.play();

}

// Cuando el usuario hace click o toca, llama a growAlice, para reproducir todas las animaciones.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

Especificaciones

Specification Status Comment
{{SpecName('Web Animations', '#dom-animation-play', 'play()')}} {{Spec2("Web Animations")}}  

Compatibilidad del navegador

{{Compat("api.Animation.play")}}

Ver también