1 files changed, 147 insertions, 0 deletions
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>