initial commit

1 files changed, 158 insertions, 0 deletions

diff --git a/files/es/web/api/animation/playstate/index.html b/files/es/web/api/animation/playstate/index.html
new file mode 100644
index 0000000000..35d104739b
--- /dev/null
+++ b/files/es/web/api/animation/playstate/index.html
@@ -0,0 +1,158 @@
+---
+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>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes de Chrome 50, este atributo mostraba <code>idle</code> para una animación que aún no había comenzado. A partir de Chrome 50, muestra <code>paused</code>.</p>
+
+<p>[2] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
+
+<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>