Revision 938887 of AnimationEvent

Revision slug: Web/API/AnimationEvent
Revision title: AnimationEvent
Revision id: 938887
Created: Oct 22, 2015, 7:57:36 PM
Creator: takahan
Is current revision? No
Comment Semantic change

Tags:

Revision Content

{{SeeCompatTable}}{{APIRef("Web Animations API")}}

A interface AnimationEvent representa eventos provendo informações relacionadas a animações.

{{InheritanceDiagram}}

Propriedades

Tambémpropriedades herdadas pelo pai {{domxref("Event")}}.

{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}: O {{domxref("DOMString")}} contém o valor do {{cssxref("animation-name")}} propriedade CSS associada com a transição.
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}: É um ponto flutuante dado pela quantidade de tempo que a animação está rodando, em segundos, quando esse evento termina, excluindo o tempo em que animação esteve pausada. Para o evento "animationstart", elapsedTime é 0.0 a não ser que haja um valor negativo para {{cssxref("animation-delay")}}, nesse caso o evento terminará com elapsedTime contendo (-1 * delay).
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}: Um {{domxref("DOMString")}} começa com '::', contendo o nome do pseudo-elemento onde a animação roda. Se a animação não rodar no pseudo-elemento mas no elemento, então teremos um string vazio ' '.

Constructores

{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}: Cria um evento AnimationEvent com os dados parâmetros.

Métodos

Também herda métodos do pai {{domxref("Event")}}.

{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}: Inicializa um AnimationEvent criado usando diminuído {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} método.

Especificações

Especificação	Estado	Comentário
`{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}`	`{{ Spec2('CSS3 Animations') }}`	Definição inicial.

Compatibilidade com o Navegador

{{CompatibilityTable}}

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	`1.0 {{ property_prefix("webkit") }}` `{{CompatChrome(43.0)}}`	`{{ CompatGeckoDesktop("6.0") }}`	`10.0`	`12 {{ property_prefix("o") }} 12.10 15.0 {{ property_prefix("webkit") }}`	`4.0 {{ property_prefix("webkit") }}`
`AnimationEvent() constructor`	`{{CompatChrome(43.0)}}`	`{{ CompatGeckoDesktop("23.0") }}`	`{{CompatNo}}`	`{{CompatNo}}`	`{{CompatNo}}`
`initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}`	`1.0`	`{{ CompatGeckoDesktop("6.0") }} Removed in {{ CompatGeckoDesktop("23.0") }}`	`10.0`	`12`	`4.0`
`pseudoelement`	`{{CompatNo}}`	`{{ CompatGeckoDesktop("23.0") }}`	`{{CompatNo}}`	`{{CompatNo}}`	`{{CompatNo}}`

Característica	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
`Basic support`	`{{CompatVersionUnknown}}{{ property_prefix("webkit") }}`	`{{ CompatGeckoMobile("6.0") }}`	`10.0`	`12 {{ property_prefix("o") }} 12.10 15.0 {{ property_prefix("webkit") }}`	`{{CompatVersionUnknown}}{{ property_prefix("webkit") }}`	`{{CompatChrome(43.0)}}`
`AnimationEvent() constructor`	`{{CompatNo}}`	`{{ CompatGeckoMobile("23.0") }}`	`{{CompatNo}}`	`{{CompatNo}}`	`{{CompatNo}}`	`{{CompatChrome(43.0)}}`
`initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}`	`{{CompatVersionUnknown}}`	`{{ CompatGeckoMobile("6.0") }} Removed in {{ CompatGeckoMobile("23.0") }}`	`10.0`	`{{CompatVersionUnknown}}`	`{{CompatVersionUnknown}}`	`{{CompatNo}}`
`pseudoelement`	`{{CompatNo}}`	`{{ CompatGeckoMobile("23.0") }}`	`{{CompatNo}}`	`{{CompatNo}}`	`{{CompatNo}}`	`{{CompatNo}}`

Veja também

Usando animações CSS
{{CSS_Reference:animation}}

Revision Source

<p><code>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</code></p>

<p>A interface&nbsp;<strong><code>AnimationEvent</code></strong>&nbsp; representa eventos provendo&nbsp;informações&nbsp;relacionadas a <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations/">animações</a>.</p>

<p><code>{{InheritanceDiagram}}</code></p>

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

<p><em>Tambémpropriedades herdadas&nbsp;pelo&nbsp;pai&nbsp;<code>{{domxref("Event")}}</code></em>.</p>

<dl>
 <dt><code>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</code></dt>
 <dd>O {{domxref("DOMString")}} contém&nbsp;o&nbsp;valor do&nbsp;{{cssxref("animation-name")}}&nbsp;propriedade&nbsp;CSS associada com a transição.</dd>
 <dt><code>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</code></dt>
 <dd><code><font face="Open Sans, Arial, sans-serif">É um ponto flutuante</font></code>&nbsp;dado&nbsp;pela quantidade de tempo que a animação está rodando, em segundos, quando&nbsp;esse evento termina, excluindo o tempo em que animação esteve pausada. Para&nbsp;o evento&nbsp;<code>"animationstart"</code>, <code>elapsedTime</code>&nbsp;é&nbsp;<code>0.0</code>&nbsp;a não ser que haja um valor negativo para&nbsp;<code>{{cssxref("animation-delay")}}</code>, nesse caso o evento terminará com&nbsp;<code>elapsedTime</code> contendo&nbsp;&nbsp;<code>(-1 * </code><em>delay</em><code>)</code>.</dd>
 <dt><code>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</code></dt>
 <dd>Um<code> {{domxref("DOMString")}}&nbsp;</code>começa com&nbsp;&nbsp;<code>'::'</code>, contendo o nome do&nbsp;<a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a>&nbsp;onde a animação roda. Se a animação não rodar no pseudo-elemento mas no elemento, então teremos um <em>string </em>vazio <code>' '</code>.</dd>
</dl>

<h2 id="Constructor">Constructores</h2>

<dl>
 <dt><code>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</code></dt>
 <dd>Cria um evento&nbsp;<code>AnimationEvent</code>&nbsp;com os dados parâmetros.</dd>
</dl>

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

<p><em>Também herda métodos do pai&nbsp;<code>{{domxref("Event")}}</code></em>.</p>

<dl>
 <dt><code>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</code></dt>
 <dd>Inicializa um&nbsp;<code>AnimationEvent criado usando diminuído&nbsp;</code>{{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} método.</dd>
</dl>

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

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

<h2 id="Browser_compatibility">Compatibilidade com o&nbsp;Navegador</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>
    <p><code>1.0 {{ property_prefix("webkit") }}</code></p>

    <p><code>{{CompatChrome(43.0)}}</code></p>
   </td>
   <td><code>{{ CompatGeckoDesktop("6.0") }}</code></td>
   <td><code>10.0</code></td>
   <td><code>12 {{ property_prefix("o") }}<br />
    12.10<br />
    15.0 {{ property_prefix("webkit") }}</code></td>
   <td><code>4.0 {{ property_prefix("webkit") }}</code></td>
  </tr>
  <tr>
   <td><code>AnimationEvent() constructor</code></td>
   <td>
    <p><code>{{CompatChrome(43.0)}}</code></p>
   </td>
   <td><code>{{ CompatGeckoDesktop("23.0") }}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatNo}}</code></td>
  </tr>
  <tr>
   <td><code>initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}</code></td>
   <td><code>1.0</code></td>
   <td><code>{{ CompatGeckoDesktop("6.0") }}<br />
    Removed in {{ CompatGeckoDesktop("23.0") }}</code></td>
   <td><code>10.0</code></td>
   <td><code>12</code></td>
   <td><code>4.0</code></td>
  </tr>
  <tr>
   <td><code>pseudoelement</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{ CompatGeckoDesktop("23.0") }}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatNo}}</code></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<p>&nbsp;</p>

<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</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><code>Basic support</code></td>
   <td><code>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</code></td>
   <td><code>{{ CompatGeckoMobile("6.0") }}</code></td>
   <td><code>10.0</code></td>
   <td><code>12 {{ property_prefix("o") }}<br />
    12.10<br />
    15.0 {{ property_prefix("webkit") }}</code></td>
   <td><code>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</code></td>
   <td><code>{{CompatChrome(43.0)}}</code></td>
  </tr>
  <tr>
   <td><code>AnimationEvent() constructor</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{ CompatGeckoMobile("23.0") }}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatChrome(43.0)}}</code></td>
  </tr>
  <tr>
   <td><code>initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}</code></td>
   <td><code>{{CompatVersionUnknown}}</code></td>
   <td><code>{{ CompatGeckoMobile("6.0") }}<br />
    Removed in {{ CompatGeckoMobile("23.0") }}</code></td>
   <td><code>10.0</code></td>
   <td><code>{{CompatVersionUnknown}}</code></td>
   <td><code>{{CompatVersionUnknown}}</code></td>
   <td><code>{{CompatNo}}</code></td>
  </tr>
  <tr>
   <td><code>pseudoelement</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{ CompatGeckoMobile("23.0") }}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatNo}}</code></td>
   <td><code>{{CompatNo}}</code></td>
  </tr>
 </tbody>
</table>
</div>

<h2>&nbsp;</h2>

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

<ul>
 <li><a href="/en-US/docs/CSS/Using_CSS_animations">Usando animações CSS</a></li>
 <li><code>{{CSS_Reference:animation}}</code></li>
</ul>

Revert to this revision