path: root/files/pt-br/web/api/animationevent/animationevent/index.html

---
title: AnimationEvent()
slug: Web/API/AnimationEvent/AnimationEvent
tags:
  - AnimationEvent
  - Apps
  - CSSOM
  - Experimental
  - Referencia
translation_of: Web/API/AnimationEvent/AnimationEvent
---
<p>{{APIRef("Web Animations API")}}{{SeeCompatTable}}</p>

<p><code><font face="Open Sans, Arial, sans-serif">O construtor </font><strong>AnimationEvent()</strong></code>retorna o recente criado {{domxref("AnimationEvent")}}, representando um evento em relação a animação.</p>

<h2 id="Síntaxe">Síntaxe</h2>

<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>,
                                           elapsedTime  : <em>aFloat</em>,
                                           pseudoElement: <em>aPseudoElementName</em>});
</pre>

<h3 id="Argumentos">Argumentos</h3>

<p><em>O construtor <code>AnimationEvent()</code></em><em> também herda argumentos do {{domxref("Event.Event", "Event()")}}.</em></p>

<dl>
 <dt><code>type</code></dt>
 <dd>Um {{domxref("DOMString")}} representando o nome do tipo de <code>AnimationEvent</code>. É caso sensitivo e pode ser: <code>'animationstart'</code>, <code>'animationend'</code>, ou <code>'animationiteration'</code>.</dd>
 <dt><code>animationName</code> {{optional_inline}}</dt>
 <dd>Um{{domxref("DOMString")}} contendo o valor do {{cssxref("animation-name")}} propriedade CSS associada com a transição. É por padrão <code>""</code>.</dd>
 <dt><code>elapsedTime</code> {{optional_inline}}</dt>
 <dd>Um ponto flutuante dando a quantidade de tempo que a animação esteve rodando, em segundos, quando o evento termina, excluindo qualquer tempo que ela passou pausada. Para um evento <code>"animationstart"</code>, <code>elapsedTime</code> é <code>0.0</code> a não ser que haja um valor negativo para <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, nesse caso o evento terminará com <code>elapsedTime contendo</code>  <code>(-1 * </code><em>delay</em><code>)</code>. É por padrão <code>0.0</code>.</dd>
 <dt><code>pseudoElement</code> {{optional_inline}}</dt>
 <dd>É um <code>{{domxref("DOMString")}}</code>, começando com<code>"::"</code>, contendo o nome do <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> que a animação roda. Se a animação não roda em um pseudo-elementomas em um elemento, então temos um <em>string</em> vazio <code>"" .</code>É por padrão <code>""</code>. </dd>
</dl>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificações</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td>
   <td>{{ Spec2('CSS3 Animations')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2>

<p><code>{{ CompatibilityTable() }}</code></p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{ CompatGeckoDesktop("23.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>pseudoElement</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoDesktop("23.0") }}</td>
   <td>
    <p>{{CompatNo}}</p>
   </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 Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoMobile("23.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43.0)}}</td>
  </tr>
  <tr>
   <td><code>pseudoElement</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoMobile("23.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também </h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Usando animações CSS</a>.</li>
 <li>Tópicos relacionados a animação CSS, propriedades e regras: <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation" title="The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-direction.">animation</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction" title="The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.">animation-direction</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration" title="The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.">animation-duration</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode" title="The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.">animation-fill-mode</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count" title="The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping.">animation-iteration-count</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name" title="The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.">animation-name</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state" title="The animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.">animation-play-state</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function" title="The CSS animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several &lt;timing-function>.">animation-timing-function</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes" title="The @keyframes CSS at-rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically.">@keyframes</a></code></li>
 <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
</ul>