---
title: Animation
slug: Web/API/Animation
tags:
  - API
  - Animations
  - Experimental
  - Interface
  - NeedsTranslation
  - Reference
  - TopicStub
  - Web Animations
  - waapi
  - web animation api
translation_of: Web/API/Animation
---
<p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p>

<p>A interface <strong><code>Animation</code></strong> da <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> representa um único player de animação e fornece controles e uma linha do tempo (timeline) para um nó de animação ou recurso.</p>

<h2 id="Construtor">Construtor</h2>

<dl>
 <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
 <dd>Cria uma nova instância do objeto <code>Animation</code>.</dd>
</dl>

<h2 id="Propriedades">Propriedades</h2>

<dl>
 <dt>{{domxref("Animation.currentTime")}}</dt>
 <dd>O valor do tempo atual da animação, em milissegundos, esteja ela executando ou pausada. Se a animação não tem uma {{domxref("AnimationTimeline", "timeline")}}, está inativa ou ainda não foi executada, este valor é <code>null</code>.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.effect")}}</dt>
 <dd>Obtém e define o {{domxref("KeyframeEffect")}} associado a essa animação.</dd>
 <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
 <dd>Retorna a <code>Primise</code> de finalização atual para essa animação.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.id")}}</dt>
 <dd>Obtém e define a <code>String</code> usada para identificar a animação.</dd>
 <dt>{{domxref("Animation.oncancel")}}</dt>
 <dd>Obtém e define o manipulador para o evento <code>cancel</code>.</dd>
 <dt>{{domxref("Animation.onfinish")}}</dt>
 <dd>Obtém e define o manipulador para o evento <code>finish</code>.</dd>
 <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
 <dd>Retorna um valor enumerado descrevendo o estado de execução de uma animação.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.playbackRate")}}</dt>
 <dd>Obtém ou define a taxa de execução da animação.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
 <dd>Retorna a promessa atual para quando essa animação estiver pronta.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.startTime")}}</dt>
 <dd>Obtém ou define o tempo agendado quando a execução de uma animação deve começar.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.timeline")}}</dt>
 <dd>Obtém ou define a {{domxref("AnimationTimeline", "timeline")}} associada a essa animação.</dd>
</dl>

<h2 id="Métodos">Métodos</h2>

<dl>
 <dt>{{domxref("Animation.cancel()")}}</dt>
 <dd>Limpa todos os {{domxref("KeyframeEffect", "keyframeEffects")}} causados por essa animação e aborta sua execução.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.finish()")}}</dt>
 <dd>Vai até um dos extremos dessa animação, dependendo se ela está executando ou retornando.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.pause()")}}</dt>
 <dd>Suspende a execução de uma animação.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.play()")}}</dt>
 <dd>Inicia ou continua a execução de uma animação ou a recomeça se ela tiver terminado anteriormente.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.reverse()")}}</dt>
 <dd>Move a animação ao contrário, parando no início da animação.</dd>
</dl>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
   <td>{{Spec2("Web Animations")}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatChrome(39.0)}} [1]</td>
   <td>{{CompatGeckoDesktop(40.0)}} [2]</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>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatVersionUnknown}} [1]</td>
   <td>{{CompatGeckoDesktop(40.0)}} [2]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Implementado como <code>AnimationPlayer</code> (nome da interface em uma versão primária da especificação).</p>

<p>[2] Anteriormente ao Firefox 40, estava disponível como <code>AnimationPlayer</code>. Em ambos os casos, é necessário definir a preferência <code>dom.animations-api.core.enabled</code> para poder usá-la.</p>

<p> </p>