---
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>