---
title: Animation.playState
slug: Web/API/Animation/playState
tags:
  - API
  - Animacion
  - Animaciones Web
  - Experimental
  - Reference
  - playState
translation_of: Web/API/Animation/playState
---
<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>

<p>La propiedad  <code><strong>Animation</strong></code><strong><code>.playState</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve y establece un valor enumerado que describe el estado de reproducción de una animación.</p>

<div class="note">
<p>Esta propiedad es de solo lectura para las Animaciones y Transiciones en CSS.</p>
</div>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox">var<em> currentPlayState</em> = <em>Animation</em>.playState;

<em>Animation</em>.playState = <em>newState</em>;
</pre>

<h3 id="Valor">Valor</h3>

<dl>
 <dt><code>idle(inactivo)</code></dt>
 <dd><span id="result_box" lang="es"><span>El tiempo actual de la animación no está resuelto y no hay tareas pendientes.</span></span></dd>
 <dt><code>pending(pendiente)</code></dt>
 <dd><span id="result_box" lang="es"><span>La animación está esperando que se complete una tarea pendiente.</span></span></dd>
 <dt><code>running(funcionando)</code></dt>
 <dd><span class="short_text" id="result_box" lang="es"><span>La animación se está ejecutando.</span></span></dd>
 <dt><code>paused(pausado)</code></dt>
 <dd><span id="result_box" lang="es"><span>La animación se ha suspendido y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.</span></span></dd>
 <dt><code>finished(finalizado)</code></dt>
 <dd><span id="result_box" lang="es"><span>La animación ha alcanzado uno de sus límites y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.</span></span></dd>
</dl>

<h2 id="Ejemplo">Ejemplo</h2>

<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , los jugadores pueden tener un final con (Alicia llorando en un mar de lágrimas) <a href="http://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Alice crying into a pool of tears</a>. En el juego, por razones de rendimiento, las lágrimas solo se deben animar cuando son visibles. <span id="result_box" lang="es"><span>Por lo tanto, deben detenerse tan pronto como estén animadas, de esta manera:</span></span></p>

<pre class="brush: js">// <span class="short_text" id="result_box" lang="es"><span>Configurando las animaciones de lágrimas</span></span>

tears.forEach(function(el) {
  el.animate(
    tearsFalling,
    {
      delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria
      duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria
      iterations: Infinity,
      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
    });
  el.playState = 'paused';
});


// Reproduce las lágrimas cayendo cuando el final necesita mostrarlas.

tears.forEach(function(el) {
  el.playState = 'playing';
});


// Reinicia la animación de las lágrimas y la detiene.

tears.forEach(function(el) {
  el.playState = "paused";
  el.currentTime = 0;
});
</pre>

<h2 id="Especificaciones"><span class="highlight-span">Especificaciones</span></h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Animations', '#play-state', 'playState')}}</td>
   <td>{{Spec2("Web Animations")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_del_navegador"><span class="highlight-span">Compatibilidad del navegador</span></h2>

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

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
 <li>{{domxref("Animation")}} <span id="result_box" lang="es"><span>para otros métodos y propiedades que puede usar para controlar la animación de la página web.</span></span></li>
 <li>Los métodos  {{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}} pueden establecer el <code>playState</code> de un  <code>Animation</code> .</li>
</ul>