initial commit

18 files changed, 2295 insertions, 0 deletions

diff --git a/files/es/web/api/animation/animación/index.html b/files/es/web/api/animation/animación/index.html
new file mode 100644
index 0000000000..770036b76d
--- /dev/null
+++ b/files/es/web/api/animation/animación/index.html
@@ -0,0 +1,106 @@
+---
+title: Animation()
+slug: Web/API/Animation/Animación
+tags:
+  - Animacion
+translation_of: Web/API/Animation/Animation
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
+
+<p>El constructor <strong><code>Animation()</code></strong> de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve una instancia del objeto <code>Animation</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>animation</em> = new Animation([<em>effect</em>][, <em>timeline</em>]);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>effect</code> {{optional_inline}}</dt>
+ <dd>El efecto objetivo, es un objeto de la interfaz {{domxref("AnimationEffectReadOnly")}} ,para asignarlo a la animación. Aunque en el futuro podrían ser asignados otros efectos como <code>SequenceEffect</code> o <code>GroupEffect</code>, el único efecto disponible actualmente es {{domxref("KeyframeEffect")}}. Este puede ser <code>null</code> (valor por defecto) para indicar que no debe aplicarse ningún efecto.</dd>
+ <dt><code>timeline</code> {{optional_inline}}</dt>
+ <dd>Especifica el  <code>timeline</code> con el que asociar la animación, como un objeto de tipo basado en la interfaz {{domxref("AnimationTimeline")}} . Actualmente el único tipo de línea de tiempo disponible es {{domxref("DocumentTimeline")}}, pero en el futuro habrá lineas de tiempo asociadas , por ejemplo, con gestos o desplazamiento. El valor por defecto es {{domxref("Document.timeline")}}, pero puede ser establecido en <code>null</code>.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010">Follow the White Rabbit </a>, el constructor <code>Animation()</code> es usado para crear una <code>Animation</code> para el <code>rabbitDownKeyframes</code> utilizando el <code>timeline</code> del documento:</p>
+
+<pre class="brush: js">var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-animation', 'Animation()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}} <sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada de manera predeterminada en Firefox Developer Edition y Nightly builds. Puedes habilitarla en compilaciones de lanzamiento estableciendo la preferencia de <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puede desactivarse en cualquier versión de Firefox estableciendo esta preferencia 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")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/cancel/index.html b/files/es/web/api/animation/cancel/index.html
new file mode 100644
index 0000000000..e08956221a
--- /dev/null
+++ b/files/es/web/api/animation/cancel/index.html
@@ -0,0 +1,119 @@
+---
+title: Animation.cancel()
+slug: Web/API/Animation/cancel
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - cancel
+  - metodo
+  - waapi
+translation_of: Web/API/Animation/cancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>El método <code><strong>cancel()</strong></code> de la Web Animations API de la interfaz {{domxref("Animation")}} borra todos los {{domxref("KeyframeEffect")}} causados por esta animación y aborta su reproducción.</p>
+
+<div class="note">
+<p>Cuando se cancela una animación, su {{domxref("Animation.startTime", "startTime")}} y su {{domxref("Animation.currentTime", "currentTime")}} se establecen en  <code>null</code>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>Animation</em>.cancel();</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>None.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<p>Este método no arroja excepciones directamente; sin embargo, si la animación {{domxref ("Animation.playState", "playState")}} no está <code>"idle"</code>"inactiva" cuando se cancela, el {{domxref ("Animation.finished", "current finished promise", "", 1)}} se rechaza con un {{domxref ("DOMException")}} llamado <code>AbortError</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-cancel', 'Animation.cancel()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.playState")}}</li>
+ <li>{{domxref("Animation.finished")}} devuelve la promesa que esta acción rechazará si la animación de <code>playState</code> no está <code>"idle"</code> ("inactiva") .</li>
+</ul>
diff --git a/files/es/web/api/animation/effect/index.html b/files/es/web/api/animation/effect/index.html
new file mode 100644
index 0000000000..f4283c52c4
--- /dev/null
+++ b/files/es/web/api/animation/effect/index.html
@@ -0,0 +1,104 @@
+---
+title: Animation.effect
+slug: Web/API/Animation/effect
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - efecto
+translation_of: Web/API/Animation/effect
+---
+<div>{{ SeeCompatTable() }} {{ APIRef("Web Animations") }}</div>
+
+<p>La propiedad <code><strong>Animation</strong></code><strong><code>.effect</code></strong> de la  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> obtiene y establece el efecto objetivo de una animación. El efecto objetivo puede ser un objeto efecto de un tipo basado en {{domxref("AnimationEffectReadOnly")}}, como {{domxref("KeyframeEffect")}}, o <code>null</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>effect</em> = <em>Animation</em>.effect;
+
+<em>Animation</em>.effect = <em>{{domxref("AnimationEffectReadOnly")}}</em></pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto {{domxref("AnimationEffectReadOnly")}} que describe el efecto de animación objetivo para la animación, o <code>null</code> para indicar que el efecto no está activo.</p>
+
+<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', '#dom-animation-effect', 'Animation.effect' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</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>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1][2]</sup></td>
+   <td>{{CompatUnknown}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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>
+
+<p>[2] Esta propiedad es compatible con Firefox 48 pero es de solo-lectura. La versión Firefox 51 admite también escritura.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("AnimationEffectReadOnly")}}</li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/finish/index.html b/files/es/web/api/animation/finish/index.html
new file mode 100644
index 0000000000..69ed0e4a68
--- /dev/null
+++ b/files/es/web/api/animation/finish/index.html
@@ -0,0 +1,147 @@
+---
+title: Animation.finish()
+slug: Web/API/Animation/finish
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Finish
+  - Reference
+  - metodo
+  - waapi
+translation_of: Web/API/Animation/finish
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<div>
+<p><span class="seoSummary">El método <strong><code>finish()</code> </strong>de la interfaz {{domxref("Animation")}} de la <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>  </span>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 {{domxref("Animation.reverse", "reverse()")}}), establece el tiempo de la reproducción en 0.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>Animation</em>.finish(); </pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>None.</p>
+
+<dl>
+</dl>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>InvalidState</code></dt>
+ <dd>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.</dd>
+</dl>
+
+<h2 id="Ejemplos"><strong>Ejemplos</strong></h2>
+
+<p>El siguiente ejemplo muestra cómo usar el método <code>finish()</code> y captura un error <code>InvalidState</code>.</p>
+
+<pre class="brush: js">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.
+  }
+});
+</pre>
+
+<p>El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción.</p>
+
+<pre class="brush: js">elem.getAnimations().forEach(
+  function(animation){
+    return animation.finish();
+  }
+);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-finish', 'finish()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} para otros métodos y propiedades que puede usar para controlar la animación de la página web.</li>
+ <li>{{domxref("Animation.play()")}} para reproducir una animación hacia adelante.</li>
+ <li>{{domxref("Animation.reverse()")}} para reproducir una animación hacia atrás.</li>
+</ul>
diff --git a/files/es/web/api/animation/id/index.html b/files/es/web/api/animation/id/index.html
new file mode 100644
index 0000000000..e44c852e72
--- /dev/null
+++ b/files/es/web/api/animation/id/index.html
@@ -0,0 +1,110 @@
+---
+title: Animation.id
+slug: Web/API/Animation/id
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - id
+translation_of: Web/API/Animation/id
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad <code><strong>Animation</strong></code><strong><code>.id</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve o establece una cadena(string) utilizado para identificar la animación.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>animationsId</em> = <em>Animation</em>.id;
+
+<em>Animation</em>.id = <em>newIdString</em>;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{domxref("DOMString")}} que se puede usar para identificar la animación, o <code>null</code> si la animación no tiene <code>id</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/eJyWzm?editors=0010">Follow the White Rabbit </a>, puedes asignar  a <code>rabbitDownAnimation</code> un  <code>id</code> de esta manera:</p>
+
+<pre class="brush: js">rabbitDownAnimation.effect.<em>id</em> = "rabbitGo";
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-id', 'Animation.id' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/index.html b/files/es/web/api/animation/index.html
new file mode 100644
index 0000000000..ac1f5f46fb
--- /dev/null
+++ b/files/es/web/api/animation/index.html
@@ -0,0 +1,147 @@
+---
+title: Animation
+slug: Web/API/Animation
+tags:
+  - API
+  - Animacion
+  - Experimental
+  - Interfaz
+  - Reeferencia
+  - Web Animations
+  - waapi
+  - web animation api
+translation_of: Web/API/Animation
+---
+<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
+
+<p>La interfaz <strong><code>Animation</code></strong> de la  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> representa un reproductor de animación y proporciona controles de reproducción y una línea de tiempo para un nodo o una fuente de animación.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
+ <dd>Crea una nueva instancia de objeto <code>Animation</code>.</dd>
+</dl>
+
+<h2 id="Propiedades">Propiedades</h2>
+
+<dl>
+ <dt>{{domxref("Animation.currentTime")}}</dt>
+ <dd>El valor del tiempo de la animación actual en milisegundos , ya sea en ejecución o en pausa. Si la animación carece de {{domxref("AnimationTimeline", "timeline")}}, está inactivo, o no se ha reproducido todavía, su valor es <code>null</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.effect")}}</dt>
+ <dd>Obtiene y establece el {{domxref("AnimationEffectReadOnly")}} asociado con esta animación. Normalmente, este será un objeto {{domxref("KeyframeEffect")}}.</dd>
+ <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
+ <dd>Devuelve la Promesa actual terminada para esta animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.id")}}</dt>
+ <dd>Obtiene y establece la <code>String</code> usada para identificar la animación.</dd>
+ <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
+ <dd>Devuelve un valor enumerado que describe el estado de la reproducción de una animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.playbackRate")}}</dt>
+ <dd>Obtiene o establece la velocidad de reproducción de la animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
+ <dd>Devuelve la Promesa actual lista para esta animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.startTime")}}</dt>
+ <dd>Obiene o establece la hora programada en la que debe comenzar la reproducción de la animación.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.timeline")}}</dt>
+ <dd>Obtiene o establece el  {{domxref("AnimationTimeline", "timeline")}} asociado con esta animación.</dd>
+</dl>
+
+<h3 id="Manejadores_de_eventos">Manejadores de eventos</h3>
+
+<dl>
+ <dt>{{domxref("Animation.oncancel")}}</dt>
+ <dd>Obtiene y establece en manejador de eventos para el evento <code>cancel</code>.</dd>
+ <dt>{{domxref("Animation.onfinish")}}</dt>
+ <dd>Obtiene y establece en manejador de eventos para el evento <code>finish</code> .</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Animation.cancel()")}}</dt>
+ <dd>Borra todos los {{domxref("KeyframeEffect", "keyframeEffects")}} causados por la animación y aborta su reproducción.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.finish()")}}</dt>
+ <dd>Busca cualquier final de una animación, dependiendo de si la animación se está reproduciendo o invirtiendo.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.pause()")}}</dt>
+ <dd>Pone la reproducción en pausa.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.play()")}}</dt>
+ <dd><span id="result_box" lang="es"><span>Busca el final de una animación, dependiendo de si la animación se está reproduciendo o si se está invirtiendo.</span></span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.reverse()")}}</dt>
+ <dd><span id="result_box" lang="es"><span>Invierte la dirección de reproducción, deteniéndose al comienzo de la animación</span></span>. Si la animación finaliza o no se activa, volverá a reproducirse desde el final al principio.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.updatePlaybackRate()")}}</dt>
+ <dd>Establece la velocidad de la animación después de sincronizar por primera vez su posición de reproducción.</dd>
+</dl>
+
+<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
+
+<p>Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o <span class="short_text" id="result_box" lang="es"><span>síndrome de sensibilidad escotópica</span></span>.</p>
+
+<p>Considera ofrecer un mecanismo para pausar o deshabilitar las animaciones, así como utilizar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> para crear una experiencia complementaria para los usuarios que han expresado su preferencia por experiencias no animadas.</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+<p>{{Compat("api.Animation")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">API de Animaciones Web</a></li>
+</ul>
diff --git a/files/es/web/api/animation/oncancel/index.html b/files/es/web/api/animation/oncancel/index.html
new file mode 100644
index 0000000000..1f09835210
--- /dev/null
+++ b/files/es/web/api/animation/oncancel/index.html
@@ -0,0 +1,115 @@
+---
+title: Animation.oncancel
+slug: Web/API/Animation/oncancel
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - oncancel
+translation_of: Web/API/Animation/oncancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad <code><strong>oncancel</strong></code> de la interfaz {{domxref("Animation")}} de la  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> es el manejador de eventos para el evento {{event("cancel")}} .</p>
+
+<p>El evento <code>cancel</code> puede ser activado manualmente con {{domxref("Animation.cancel()")}} cuando la animación entra en estado de reproducción <code>"idle"(inactivo)</code> desde otro estado, como cuando una animación se elimina de un elemento antes de que termine de reproducirse.</p>
+
+<div class="note">
+<p>La creación de una nueva animación, inicialmente inactiva, no activa el evento {{event("cancel")}} en la nueva animación.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>cancelHandler</em> = <em>Animation</em>.oncancel;
+
+<em>Animation</em>.oncancel = <em>cancelHandler</em>;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Una función que será ejecutada cuando la animación sea cancelada, o <code>null</code> si no hay un manejador de eventos {{event("cancel")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Si esta animación es cancelada, elimina su elemento.</p>
+
+<pre class="brush: js">animation.oncancel = animation.effect.target.remove();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-oncancel', 'Animation.oncancel' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>The {{event("cancel")}} event</li>
+</ul>
diff --git a/files/es/web/api/animation/onfinish/index.html b/files/es/web/api/animation/onfinish/index.html
new file mode 100644
index 0000000000..592014f698
--- /dev/null
+++ b/files/es/web/api/animation/onfinish/index.html
@@ -0,0 +1,131 @@
+---
+title: Animation.onfinish
+slug: Web/API/Animation/onfinish
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - onfinish
+  - waapi
+translation_of: Web/API/Animation/onfinish
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad <code><strong>onfinish</strong></code> de la interfaz {{domxref("Animation")}} (de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>) es el manejador de eventos para el evento {{event("finish")}}. <span id="result_box" lang="es"><span>Este evento se envía cuando la animación termina de reproducirse</span></span>.</p>
+
+<p>El evento <code>finish</code> ocurre cuando la reproducción se completa de forma natural, así como cuando se llama al  método {{domxref("Animation.finish()")}} para que la animación termine inmediatamente.</p>
+
+<div class="note">
+<p>El estado de reproducción <code>"paused"</code> reemplaza al estado  <code>"finished"</code> ; Si la animación está pausada y finalizada, el estado<code>"paused"</code> será el único reportado. Puedes forzar el estado de la animación a <code>"finished"</code> configurando su {{domxref("Animation.startTime", "startTime")}} a <code>document.timeline.currentTime - (<em>Animation</em>.currentTime * <em>Animation</em>.playbackRate)</code>.</p>
+</div>
+
+<h2 id="Sintaxis"><span class="highlight-span">Sintaxis</span></h2>
+
+<pre class="syntaxbox">var <em>finishHandler</em> = <em>Animation</em>.onfinish;
+
+<em>Animation</em>.onfinish = <em>finishHandler</em>;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Una función que debe ser llamada para manejar el evento {{event("finish")}} , o <code>null</code> si no se establece ningún manejador para el evento <code>finish</code>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><code>Animation.onfinish</code> es utilizado en varias ocasiones en el juego de Alice in Web Animations API Land <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a>.  Aquí hay una instancia en la que agregamos eventos de puntero a un elemento después de que su animación de opacidad se haya desvanecido:</p>
+
+<pre class="brush: js">// <span id="result_box" lang="es"><span>Agrega una animación a los créditos finales del juego.</span></span>
+var endingUI = document.getElementById("ending-ui");
+var bringUI = endingUI.animate(keysFade, timingFade);
+
+// Pone en Pausa dichos créditos.
+bringUI.pause();
+
+// <span id="result_box" lang="es"><span>Esta función elimina los eventos de puntero en los créditos.</span></span>
+hide(endingUI);
+
+// Cuando los créditos se hayan desvanecido,
+// volvemos a agregar los eventos de puntero cuando terminen.
+bringUI.onfinish = function() {
+  endingUI.style.pointerEvents = 'auto';
+};
+
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-onfinish', 'Animation.onfinish' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.finish()")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/pause/index.html b/files/es/web/api/animation/pause/index.html
new file mode 100644
index 0000000000..0c0329dda7
--- /dev/null
+++ b/files/es/web/api/animation/pause/index.html
@@ -0,0 +1,106 @@
+---
+title: Animation.pause()
+slug: Web/API/Animation/pause
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Referencia
+  - pausar
+  - pause
+  - waapi
+translation_of: Web/API/Animation/pause
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>El método <code><strong>pause()</strong></code> de la interfaz {{domxref("Animation")}} de la  <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, suspende la reproducción de la animación.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">animation.pause();
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>None.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt>InvalidStateError</dt>
+ <dd>La animación {{domxref ("Animation.currentTime", "currentTime")}} no está resuelta <code>unresolved</code> (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.</dd>
+</dl>
+
+<p>Lanza un <code>InvalidStateError</code> si el {{domxref("Animation.currentTime", "currentTime")}} de la animación no está resuelto <code>unresolved</code> (tal vez no se haya iniciado la reproducción) y el fin de la animación es infinito positivo.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p><code>Animation.pause()</code> es utilizado en varias ocasiones en el juego Alice in Web Animations API Land <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a>, porque las animaciones creadas con el método {{domxref("Element.animate()")}} se inician de inmediato y deben ser detenidas manualmente para evitar esto:</p>
+
+<pre class="brush: 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();
+</pre>
+
+<p>Adicionalmente, al restablecer:</p>
+
+<pre class="brush: 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);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificación</th>
+   <th>Estado</th>
+   <th>Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-pause', 'play()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div>
+<p>{{Compat("api.Animation.pause")}}</p>
+</div>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} para otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.</li>
+ <li>{{domxref("Animation.pause()")}} para pausar una animación.</li>
+ <li>{{domxref("Animation.reverse()")}} para reproducir una animación al revés.</li>
+ <li>{{domxref("Animation.finish()")}} para finalizar una animación.</li>
+ <li>{{domxref("Animation.cancel()")}} para cancelar una animación.</li>
+</ul>
diff --git a/files/es/web/api/animation/play/index.html b/files/es/web/api/animation/play/index.html
new file mode 100644
index 0000000000..9ccb5d68a6
--- /dev/null
+++ b/files/es/web/api/animation/play/index.html
@@ -0,0 +1,149 @@
+---
+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
+---
+<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
+
+<p>El método <strong><code>play()</code></strong> de la interfaz {{ domxref("Animation") }} de la  <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> inicia o reanuda la reproducción de una animación. Si la animación ha finalizado, llamando a  <code>play()</code> reinicia la animación y la reproduce desde el principio.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">animation.play();
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , hacer click o tocar el pastel hace que la animación de crecimiento de Alicia (<code>aliceChange</code>) sea reproducida hacia adelante, causando que Alicia se haga más grande, ademas de desencadenar la animación del pastel. Dos  <code>Animation.play()</code> y un <code>EventListener</code>:</p>
+
+<pre class="brush: js">// 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);
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-play', 'play()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} para otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.</li>
+ <li>{{domxref("Animation.pause()")}} para pausar una animación.</li>
+ <li>{{domxref("Animation.reverse()")}} para reproducir una animación al revés.</li>
+ <li>{{domxref("Animation.finish()")}} para finalizar una animación.</li>
+ <li>{{domxref("Animation.cancel()")}} para cancelar una animación.</li>
+</ul>
diff --git a/files/es/web/api/animation/playbackrate/index.html b/files/es/web/api/animation/playbackrate/index.html
new file mode 100644
index 0000000000..0961c0bd6c
--- /dev/null
+++ b/files/es/web/api/animation/playbackrate/index.html
@@ -0,0 +1,162 @@
+---
+title: Animation.playbackRate
+slug: Web/API/Animation/playbackRate
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Interface
+  - Reference
+  - playbackRate
+translation_of: Web/API/Animation/playbackRate
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>La propiedad <code><strong>Animation</strong></code><strong><code>.playbackRate</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve o  establece la velocidad de reproducción de la animación.</p>
+
+<p>Las animaciones tienen un <strong>playback rate</strong> que proporciona un factor de escala para el cambio de velocidad de la animación {{domxref("DocumentTimeline", "timeline")}} valores del estado actual de la linea de tiempo de la animación. La velocidad de reproducción inicial es <code>1</code>.</p>
+
+<h2 id="Sintaxis" style="line-height: 30px; font-size: 2.14285714285714rem;">Sintaxis</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">var <em>currentPlaybackRate</em> = <em>Animation</em>.playbackRate;
+
+<em>Animation</em>.playbackRate = <em>newRate</em>;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p><span id="result_box" lang="es"><span>Toma un número que puede ser 0, negativo o positivo.</span> <span>Los valores negativos invierten la animación.</span> <span>El valor es un factor de escala, por lo que, por ejemplo, un valor de 2 duplicaría la velocidad de reproducción.</span></span></p>
+
+<div class="note">
+<p>si establecemos el <code>playbackRate</code> a <code>0</code> pausa la animación de manera efectiva (sin embargo, su {{domxref("Animation.playstate", "playstate")}} no se convierte necesariamente en  <code>paused</code>).</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia  (<code>aliceChange</code>) se invierta para reducirse:</p>
+
+<pre class="brush: js">var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia se encogerá.
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);
+</pre>
+
+<p>Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo <code>aliceChange</code> hacia adelante otra vez:</p>
+
+<pre class="brush: js">var growAlice = function() {
+  aliceChange.playbackRate = 1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia crecerá.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+</pre>
+
+<p>En otro ejemplo,  <a href="http://codepen.io/rachelnabors/pen/PNGGaV?editors=0010">Red Queen's Race Game</a>, Alicia y La Reina Roja están ralentizandose constantemente:</p>
+
+<pre class="brush: js">setInterval( function() {
+
+  // <span id="result_box" lang="es"><span>Asegúrate de que la velocidad de reproducción nunca descienda por debajo de .4</span></span>
+
+  if (redQueen_alice.playbackRate &gt; .4) {
+    redQueen_alice.playbackRate *= .9;
+  }
+
+}, 3000);
+</pre>
+
+<p><span id="result_box" lang="es"><span>Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su</span></span> <code>playbackRate</code>(velocidad de reproducción):</p>
+
+<pre class="brush: js">var goFaster = function() {
+  redQueen_alice.playbackRate *= 1.1;
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);
+</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', '#dom-animation-playbackrate', 'Animation.playbackRate')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
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>
diff --git a/files/es/web/api/animation/ready/index.html b/files/es/web/api/animation/ready/index.html
new file mode 100644
index 0000000000..35dfb68954
--- /dev/null
+++ b/files/es/web/api/animation/ready/index.html
@@ -0,0 +1,122 @@
+---
+title: Animation.ready
+slug: Web/API/Animation/ready
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Ready Promise
+  - Reference
+translation_of: Web/API/Animation/ready
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad de solo-lectura  <strong><code>Animation.ready</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve un {{jsxref("Promise")}} que se resuelve cuando la animación está lista para reproducirse. Una nueva 'promesa' es creada cada vez que la animación entra en <a href="/en-US/docs/Web/API/Animation/playState">play state(estado de reproducción)</a> <code>"pending"(pendiente)</code> así como si la reproducción es cancelada, ya que en ambos escenarios, la animación estará lista para ser reiniciada.</p>
+
+<div class="note">
+<p>Dado que la misma {{jsxref("Promise")}} es usada para las solicitudes pendientes de <code>play</code> y<code>pause</code> , <span id="result_box" lang="es"><span>se recomienda a los autores que comprueben el estado de la animación cuando se resuelva la promesa</span></span>.</p>
+</div>
+
+<h2 id="Sintaxis"><span class="highlight-span">Sintaxis</span></h2>
+
+<pre class="syntaxbox">var <em>readyPromise</em> = <em>Animation</em>.ready;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{jsxref("Promise")}} que se resuelve cuando la animación esta lista para reproducirse. Por lo general, se usará una construcción similar a esta usando una promise lista:</p>
+
+<pre class="brush: js">animation.ready.then(function() {
+  // Hace lo que sea necesario cuando
+  // la animación está lista para reproducirse
+});</pre>
+
+<h2 id="Ejemplo"><span class="highlight-span">Ejemplo</span></h2>
+
+<p>En el siguiente ejemplo, el estado de la animación será <code>running(reproduciendo)</code> cuando la<strong> Promise actual</strong> se resuelva ya que la animación no deja el estado de reproducción <code>pending</code> entre las llamadas <code>pause</code> and <code>play</code> ,por lo tanto, la <strong>Promise actual</strong> no cambia.</p>
+
+<pre class="brush: js">animation.pause();
+animation.ready.then(function() {
+  // Displays 'running'
+  alert(animation.playState);
+});
+animation.play();
+</pre>
+
+<h2 id="Especificaciones"><span class="highlight-span"><span class="highlight-span">Especificaciones</span></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', '#dom-animation-ready', 'Animation.ready' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><span class="highlight-span"><span class="highlight-span">Compatibilidad del navegador</span></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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="highlight-span">Ver también</span></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.playState")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/reverse/index.html b/files/es/web/api/animation/reverse/index.html
new file mode 100644
index 0000000000..9f2dbf790e
--- /dev/null
+++ b/files/es/web/api/animation/reverse/index.html
@@ -0,0 +1,136 @@
+---
+title: Animation.reverse()
+slug: Web/API/Animation/reverse
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Interface
+  - Reference
+  - metodo
+  - reverse
+  - waapi
+translation_of: Web/API/Animation/reverse
+---
+<div>{{APIRef("Web Animations")}}{{SeeCompatTable}}</div>
+
+<p>El método <strong><code>Animation.reverse()</code></strong> de la interfaz {{ domxref("Animation") }} Interface invierte la dirección de reproducción, lo que significa que la animación termina al principio. Si se llama en una animación sin reproducir, toda la animación se reproduce al revés. Si se llama en una animación pausada, continúa a la inversa.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">animation.reverse();
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<p>None.</p>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia(<code>aliceChange</code>) sea reproducida al revés, lo que la hace más pequeña. Esto se hace estableciendo el {{ domxref("Animation.playbackRate") }} de <code>aliceChange</code>  en <code>-1</code> de esta forma:</p>
+
+<pre class="brush: js">var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}</pre>
+
+<p>Pero también se podría haber hecho lamando a <code>reverse()</code> en <code>aliceChange</code> así:</p>
+
+<pre class="brush: js">var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.reverse();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-reverse', 'reverse()')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} para otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.</li>
+ <li>{{domxref("Animation.pause()")}} para pausar una animación.</li>
+ <li>{{domxref("Animation.play()")}} para reproducir una animación hacia adelante.</li>
+</ul>
diff --git a/files/es/web/api/animation/starttime/index.html b/files/es/web/api/animation/starttime/index.html
new file mode 100644
index 0000000000..8ad69e8ffa
--- /dev/null
+++ b/files/es/web/api/animation/starttime/index.html
@@ -0,0 +1,138 @@
+---
+title: Animation.startTime
+slug: Web/API/Animation/startTime
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Interface
+  - Reference
+  - startTime
+translation_of: Web/API/Animation/startTime
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p><span id="result_box" lang="es"><span>La propiedad <strong><code>Animation.startTime</code></strong> de la interfaz {{domxref ("Animación")}} es un valor de punto flotante de doble precisión que indica el tiempo programado en el que debe comenzar la reproducción de una animación.</span></span></p>
+
+<p>El  <strong>start time</strong> <strong>(tiempo de inicio)</strong> es el valor de tiempo de su {{domxref("timeline", "DocumentTimeline")}}cuando su objetivo {{domxref("KeyframeEffect")}} está programado para comenzar la reproducción. <span id="result_box" lang="es"><span>El </span></span><strong>start time</strong> <strong>(tiempo de inicio)</strong><span lang="es"><span> de una animación inicialmente no está resuelto (lo que significa que es <code>null</code> porque no tiene valor).</span></span></p>
+
+<h2 id="Sintaxis"><span class="highlight-span">Sintaxis</span></h2>
+
+<pre class="syntaxbox">var <em>animationStartedWhen</em> = <em>Animation</em>.startTime;
+
+<em>Animation</em>.startTime = <em>newStartTime</em>;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un número de punto flotante que representa el tiempo actual en milisegundos, o nulo si no se establece ningún valor de  tiempo. Puede leer este valor para determinar en qué momento está establecido el punto de inicio, y puede modificarlo para que la animación comience en un momento diferente.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el ejemplo <a href="http://codepen.io/rachelnabors/pen/zxYexJ?editors=0010">Running on Web Animations API example</a>, podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio <code>startTime</code> que el gato original:</p>
+
+<pre class="brush: js">var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing);
+
+/* Una función que crea nuevos gatos. */
+function addCat(){
+  var newCat = document.createElement("div");
+  newCat.classList.add("cat");
+  return newCat;
+}
+
+/* Esta es la función que agrega un gato a la columna WAAPI */
+function animateNewCatWithWAAPI() {
+  // crea unnuevo gato
+  var newCat = addCat();
+
+  // Animar a dicho gato con la función "animate" de WAAPI
+  var newAnimationPlayer = newCat.animate(keyframes, timing);
+
+  // Establece que el punto de inicio de la animación sea el mismo que el original<code class="language-js"><span class="comment token"> .cat#withWAAPI</span></code>
+  newAnimationPlayer.startTime = catRunning.startTime;<em><strong>
+</strong></em>
+  // Agrega el gato a la pila.
+  WAAPICats.appendChild(newCat);
+}
+</pre>
+
+<h2 id="Especificaciones"><span class="highlight-span"><span class="highlight-span">Especificaciones</span></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', '#dom-animation-starttime', 'Animation.startTime' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador"><span class="highlight-span"><span class="highlight-span">Compatibilidad del navegador</span></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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;"><span class="highlight-span">Ver también</span></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.currentTime")}} para el tiempo actual de la animación.</li>
+</ul>
diff --git a/files/es/web/api/animation/terminado/index.html b/files/es/web/api/animation/terminado/index.html
new file mode 100644
index 0000000000..5d321ba012
--- /dev/null
+++ b/files/es/web/api/animation/terminado/index.html
@@ -0,0 +1,120 @@
+---
+title: Animation.finished
+slug: Web/API/Animation/terminado
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+translation_of: Web/API/Animation/finished
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad de solo-lectura de <code><strong>Animation</strong></code><strong><code>.finished</code></strong> de la  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> devuelve un {{jsxref("Promise")}} que se resuelve una vez que la animación a terminado de reproducirse.</p>
+
+<div class="note">
+<p>Una vez que la reproducción de la animación abandona el estado  <code>finished</code>  ( es decir, la reproducción se está ejecutando otra vez ), Un nuevo <code>Promise</code> es creado para esta propiedad. El nuevo <code>Promise</code> será resuelto cuando se haya completado la actual secuencia de la animación.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>animationsPromise</em> = <em>Animation.</em>finished;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto {{jsxref("Promise")}} que se resuelve cuando haya finalizado la reproducción de la animación.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>El siguiente código espera a que todas las animaciones que se ejecutan en el elemento <code>elem</code> hayan terminado, después elimina el elemento del arbol del DOM:</p>
+
+<pre class="brush: js">Promise.all(
+  elem.getAnimations().map(
+    function(animation) {
+      return animation.finished
+    }
+  )
+).then(
+  function() {
+    return elem.remove();
+  }
+);</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-finished', 'Animation.finished' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/es/web/api/animation/tiempoactual/index.html b/files/es/web/api/animation/tiempoactual/index.html
new file mode 100644
index 0000000000..acd56f9170
--- /dev/null
+++ b/files/es/web/api/animation/tiempoactual/index.html
@@ -0,0 +1,114 @@
+---
+title: Animation.currentTime
+slug: Web/API/Animation/tiempoActual
+tags:
+  - Animacion
+translation_of: Web/API/Animation/currentTime
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>La propiedad <code><strong>Animation</strong></code><strong><code>.currentTime</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 el valor del tiempo de la animación en milisegundos, tanto si se está ejecutando como en pausa.</p>
+
+<p>Si la animación carece de un {{domxref("AnimationTimeline", "timeline")}}, está inactiva, o no ha sido reproducida todavía, el valor devuelto por <code>currentTime</code> es <code>null</code>.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>currentTime</em> = <em>Animation</em>.currentTime;
+<em>Animation</em>.currentTime =<em> newTime;</em></pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un número que representa el tiempo actual en milisegundos, o <code>null</code> para desactivar la animación.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En el juego <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Drink Me/Eat Me </a>, la altura de Alicia está animada, por lo que puede cambiar de pequeña a grande y de grande a pequeña. Al inicio del juego, su altura de fija estableciendo el <code>currentTime</code> (tiempoActual) a la mitad de la duración total del<a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>KeyframeEffect</code></a>:</p>
+
+<pre class="brush: js">aliceChange<strong>.</strong>currentTime = aliceChange.effect.timing.duration / 2;</pre>
+
+<p>Un modo más genérico para encontrar la marca del 50% en una animación sería :</p>
+
+<pre class="brush: js">animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-currenttime', 'currentTime')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta estableciendo la preferencia <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puede ser deshabilitado en cualquier versión de Firefox, estableciendo esta preferencia en <code>false</code>.</p>
+
+<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <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>{{domxref("Animation.startTime")}} para programar el tiempo de inicio de una animación.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+</ul>
diff --git a/files/es/web/api/animation/timeline/index.html b/files/es/web/api/animation/timeline/index.html
new file mode 100644
index 0000000000..ba34392efd
--- /dev/null
+++ b/files/es/web/api/animation/timeline/index.html
@@ -0,0 +1,111 @@
+---
+title: Animation.timeline
+slug: Web/API/Animation/timeline
+tags:
+  - API
+  - Animacion
+  - Animaciones Web
+  - Experimental
+  - Reference
+  - timeline
+translation_of: Web/API/Animation/timeline
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>La propiedad <strong><code>Animation.timeline</code></strong> de la interfaz {{domxref ("Animation")}} devuelve o establece el {{domxref ("AnimationTimeline", "timeline")}} asociado a esta animación. Un 'timeline' es una fuente de valores de tiempo para propósitos de sincronización, y es un objeto basado en {{domxref ("AnimationTimeline")}}. Por defecto, la línea de tiempo de la animación y la línea de tiempo de {{domxref ("Document")}} son las mismas.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>animationsTimeline</em> = <em>Animation</em>.timeline;
+
+<em>Animation</em>.timeline = <em>newTimeline</em>;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{domxref ("AnimationTimeline", "timeline object", "", 1)}} para usar como la fuente de sincronización para la animación, o <code>null</code> para usar el predeterminado, que es el 'timeline' del {{domxref ("Document")}}.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Aquí establecemos que la línea de tiempo <code>timeline</code> de la animación sea la misma que la del tiempo del documento (por cierto, esta es la <code>timeline</code> predeterminada para todas las animaciones):</p>
+
+<pre class="brush: js">animation.timeline = document.timeline;
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</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', '#dom-animation-timeline', 'Animation.timeline' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[1]</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 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" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("AnimationTimeline")}}  el objeto padre del que heredan todas las timeLine.</li>
+ <li>{{domxref("DocumentTimeline")}} el único objeto timeLine disponible en este momento.</li>
+ <li>{{domxref("Document.timeline")}} el timeLine predeterminado asignado a todas las animaciones.</li>
+</ul>