AnimationEvent

  • Revision slug: Web/API/AnimationEvent
  • Revision title: AnimationEvent
  • Revision id: 411295
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{SeeCompatTable}}

AnimationEvent objects provide information about events that occur related to CSS animations.

Method overview

void initAnimationEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString propertyNameArg, in float elapsedTimeArg);

Attributes

{{OpenEventProperties()}}{{AnimationEventProperties()}}{{CloseEventProperties()}}

Methods

initAnimationEvent()

Initializes the animation event.

void initAnimationEvent(
  in DOMString typeArg,
  in boolean canBubbleArg,
  in boolean cancelableArg,
  in DOMString animationNameArg,
  in float elapsedTimeArg
);
Parameters
typeArg
A string identifying the specific type of animation event that occurred. See {{ anch("Animation event types") }} below for details.
canBubbleArg
true of the event can bubble, otherwise false.
cancelableArg
true if the event's default action can be prevented; otherwise false.
animationNameArg
The name of the animation that generated the event; this is the same as the value of the {{ cssxref("animation-name") }} property on the element that's animating.
elapsedTimeArg
The amount of time, in seconds, since the animation began, at which the event was created.

Animation event types

The following types of events can be fired by CSS animations; these strings are the possible values of the {{ domxref("event.type") }} value on the delivered event.

animationstart
Sent when the animation begins. The elapsedTime attribute's value will be 0.
animationend
Sent when the animation ends.
animationiteration
Sent at the end of each iteration of an animation for which {{ cssxref("animation-iteration-count") }} is greater than one; this event isn't fired for animations with an iteration count of one.

All of these events can be canceled, and can bubble.

Specifications

Specification Status Comment
CSS Animations Level 3 {{ Spec2('CSS3 Animations') }}  

See also

Revision Source

<p>{{SeeCompatTable}}</p>
<p><code>AnimationEvent</code> objects provide information about events that occur related to <a href="/en/CSS/CSS_animations">CSS animations</a>.</p>
<h2 id="Method_overview">Method overview</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><code>void <a href="/en/DOM/event/AnimationEvent#initAnimationEvent()">initAnimationEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString propertyNameArg, in float elapsedTimeArg);</code></td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p>{{OpenEventProperties()}}{{AnimationEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Methods">Methods</h2>
<h3 id="initAnimationEvent()">initAnimationEvent()</h3>
<p>Initializes the animation event.</p>
<pre>
void initAnimationEvent(
  in DOMString typeArg,
  in boolean canBubbleArg,
  in boolean cancelableArg,
  in DOMString animationNameArg,
  in float elapsedTimeArg
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>typeArg</code></dt>
  <dd>
    A string identifying the specific type of animation event that occurred. See {{ anch("Animation event types") }} below for details.</dd>
  <dt>
    <code>canBubbleArg</code></dt>
  <dd>
    <code>true</code> of the event can bubble, otherwise <code>false</code>.</dd>
  <dt>
    <code>cancelableArg</code></dt>
  <dd>
    <code>true</code> if the event's default action can be prevented; otherwise <code>false</code>.</dd>
  <dt>
    <code>animationNameArg</code></dt>
  <dd>
    The name of the animation that generated the event; this is the same as the value of the {{ cssxref("animation-name") }} property on the element that's animating.</dd>
  <dt>
    <code>elapsedTimeArg</code></dt>
  <dd>
    The amount of time, in seconds, since the animation began, at which the event was created.</dd>
</dl>
<h2 id="Animation_event_types">Animation event types</h2>
<p>The following types of events can be fired by CSS animations; these strings are the possible values of the {{ domxref("event.type") }} value on the delivered event.</p>
<dl>
  <dt>
    <code>animationstart</code></dt>
  <dd>
    Sent when the animation begins. The <code>elapsedTime</code> attribute's value will be 0.</dd>
  <dt>
    <code>animationend</code></dt>
  <dd>
    Sent when the animation ends.</dd>
  <dt>
    <code>animationiteration</code></dt>
  <dd>
    Sent at the end of each iteration of an animation for which {{ cssxref("animation-iteration-count") }} is greater than one; this event isn't fired for animations with an iteration count of one.</dd>
</dl>
<p>All of these events can be canceled, and can bubble.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://dev.w3.org/csswg/css3-animations/#AnimationEvent-interface" title="http://dev.w3.org/csswg/css3-animations/#keyframes">CSS Animations Level 3</a></td>
      <td>{{ Spec2('CSS3 Animations') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
  <li>{{ CSS_Reference:animation() }}</li>
</ul>
Revert to this revision