WD-css3-animations-20090320 53.9 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head>
  <title>CSS Animations Module Level 3</title>
  <link href=default.css rel=stylesheet type="text/css">

  <style type="text/css">
    .rhs { white-space: pre-wrap; }
    code { font-size: inherit; }
    #box-shadow-samples td { background: white; color: black; }

    table {
      border-collapse: collapse;
    }
    td {
      padding: 0.2em 1em;
      border: 1px solid black;
    }
  </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1>CSS Animations Module Level 3</h1>

   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 20 March
    2009</h2>

   <dl>
    <dt>This version:

    <dd> <a
     href="http://www.w3.org/TR/2009/WD-css3-animations-20090320">http://www.w3.org/TR/2009/WD-css3-animations-20090320</a>


    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-animations">http://www.w3.org/TR/css3-animations</a>


    <dt>Previous version:

    <dd>none

    <dt id=editors-list>Editors:

    <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a
     href="http://www.apple.com/">Apple Inc</a>)

    <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a
     href="http://www.apple.com/">Apple Inc</a>)

    <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a
     href="http://www.apple.com/">Apple Inc</a>)
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2009 <a
    href="http://www.w3.org/"><acronym title="World Wide Web
    Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
    of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.org/"><acronym title="European Research Consortium
    for Informatics and Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>CSS Animations allow an author to modify CSS property values over time.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-animations&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-animations<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a
   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   the <a href="http://www.w3.org/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>This is the first public Working Draft of the
   &ldquo;css3-animations&rdquo; series.

  <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>

   <li><a href="#keyframes-"><span class=secno>2 </span> Keyframes </a>
    <ul class=toc>
     <li><a href="#timing-functions-for-keyframes-"><span class=secno>2.1
      </span> Timing functions for keyframes </a>
    </ul>

   <li><a href="#animations-"><span class=secno>3 </span> Animations </a>
    <ul class=toc>
     <li><a href="#animation-behavior-"><span class=secno>3.1 </span>
      Animation behavior </a>

     <li><a href="#the-animation-name-property-"><span class=secno>3.2
      </span> The <span class=prop-name>&lsquo;<code
      class=property>animation-name</code>&rsquo;</span> Property </a>

     <li><a href="#the-animation-duration-property-"><span class=secno>3.3
      </span> The <span class=prop-name>&lsquo;<code
      class=property>animation-duration</code>&rsquo;</span> Property </a>

     <li><a href="#animation-timing-function_tag"><span class=secno>3.4
      </span> The <span class=prop-name>&lsquo;<code
      class=property>animation-timing-function</code>&rsquo;</span> Property
      </a>

     <li><a href="#the-animation-iteration-count-property-"><span
      class=secno>3.5 </span> The <span class=prop-name>&lsquo;<code
      class=property>animation-iteration-count</code>&rsquo;</span> Property
      </a>

     <li><a href="#the-animation-direction-property-"><span class=secno>3.6
      </span> The <span class=prop-name>&lsquo;<code
      class=property>animation-direction</code>&rsquo;</span> Property </a>

     <li><a href="#the-animation-play-state-property-"><span class=secno>3.7
      </span> The <span class=prop-name>&lsquo;<code
      class=property>animation-play-state</code>&rsquo;</span> Property </a>

     <li><a href="#the-animation-delay-property-"><span class=secno>3.8
      </span> The <span class=prop-name>&lsquo;<code
      class=property>animation-delay</code>&rsquo;</span> Property </a>

     <li><a href="#the-animation-shorthand-property-"><span class=secno>3.9
      </span> The <span class=prop-name>&lsquo;<code
      class=property>animation</code>&rsquo;</span> Shorthand Property </a>
    </ul>

   <li><a href="#animation-events-"><span class=secno>4 </span> Animation
    Events </a>

   <li><a href="#dom-interfaces-"><span class=secno>5 </span> DOM Interfaces
    </a>

   <li><a href="#references"><span class=secno>6 </span>References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      references</a>

     <li class=no-num><a href="#other-references">Other references</a>
    </ul>

   <li class=no-num><a href="#property-index">Property index</a>

   <li class=no-num><a href="#index">Index</a>
  </ul>
  <!--end-toc-->

  <h2 id=introduction><span class=secno>1 </span>Introduction</h2>

  <p><em>This section is not normative.</em>

  <p> This document introduces new CSS features to enable animation.

  <p> Animation is currently possible in languages like SVG, but no system
   exists for the native animation of CSS styles. This proposal introduces
   <em>defined animations</em>, which specify the values that CSS properties
   will take over a given time interval.

  <p> This specification is an extension to CSS Transitions <a
   href="#CSS3-TRANSITIONS"
   rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a>.

  <h2 id=keyframes-><span class=secno>2 </span> Keyframes</h2>

  <p> In a simple transition, since both the starting value and ending value
   are known, a single timing function and duration determine the
   intermediate values of the animating property. If finer control of the
   intermediate values is required, keyframes can be used.

  <p> Keyframes are specified using a specialized CSS at-rule. A <span
   class=prop-name>@keyframes</span> rule consists of the keyword
   "@keyframes", followed by an identifier giving a name for the animation
   (which will be referenced using <span class=prop-name>&lsquo;<code
   class=property><a
   href="#animation-name">animation-name</a></code>&rsquo;</span>), followed
   by a set of style rules (delimited by curly braces).

  <p> The <i>keyframe selector</i> for a keyframe style rule consists of a
   comma-separated list of percentage values or the keywords &lsquo;<code
   class=property>from</code>&rsquo; or &lsquo;<code
   class=property>to</code>&rsquo;. The selector is used to specify the
   percentage along the duration of the animation that the keyframe
   represents. The keyframe itself is specified by the block of property
   values declared on the selector. The keyword &lsquo;<code
   class=property>from</code>&rsquo; is equivalent to the value 0. The
   keyword &lsquo;<code class=property>to</code>&rsquo; is equivalent to the
   value 100%. Note that the percentage unit specifier must be used on
   percentage values. Therefore, "0" is an invalid keyframe selector.

  <p> Keyframes can be specified in any order. The selector determines the
   placement of the keyframe in the animation.

  <p> Every keyframe declaration must have a keyframe rule for 0% or 100%,
   possibly defined using "from" or "to". A keyframe declaration without
   these keyframe selectors is invalid and will not be available for
   animation.

  <p> The <i>keyframe declaration</i> for a keyframe rule consists of
   properties and values. Properties that are unable to be animated are
   ignored in these rules, with the exception of <a class=prop-name
   href="#animation-timing-function">animation-timing-function'</a>, the
   behavior of which is described below.

  <p> The @keyframes rule that is used by an animation will be the last one
   encountered in sorted rules order that matches the name of the animation.
   <span class=prop-name>@keyframes</span> rules do not cascade; therefore an
   animation will never derive keyframes from more than one <span
   class=prop-name>@keyframes</span> rule.

  <p> To determine the set of keyframes, all of the values in selectors are
   sorted in increasing order by time. If there are any duplicates, then the
   last keyframe specified inside the <span class=prop-name>@keyframes</span>
   rule will be used to provide the keyframe information for that time. There
   is no cascading within a <span class=prop-name>@keyframes</span> rule if
   multiple keyframes specify the same keyframe selector values.

  <div class=example>
   <p style=display:none> Example(s):</p>

   <pre>
  @keyframes 'wobble' {

    0% {
      left: 100px;
    }

    40% {
      left: 150px;
    }

    60% {
      left: 75px;
    }

    100% {
      left: 100px;
    }

  }

  </pre>
   Four keyframes are specified for the animation named "wobble". In the
   first keyframe, shown at the beginning of the animation cycle, the
   &lsquo;<code class=property>left</code>&rsquo; value of the animation is
   100px. By 40% of the animation duration, &lsquo;<code
   class=property>left</code>&rsquo; value has animated to 150px. At 60% of
   the animation duration, the &lsquo;<code class=property>left</code>&rsquo;
   value has animated back to 75px. At the end of the animation cycle, the
   &lsquo;<code class=property>left</code>&rsquo; value has returned to
   100px. The diagram below shows the state of the animation if it were given
   a duration of 10s.
   <div class=figure> <img alt="" src=animation1.png></div>

   <p class=caption> Animations states specified by keyframes</p>
  </div>

  <p> The following is the grammar for the keyframes rule.

  <pre>
        keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';

        keyframes-blocks: [ keyframe-selectors block ]* ;

        keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
      </pre>
  <!-- ======================================================================================================= -->

  <h3 id=timing-functions-for-keyframes-><span class=secno>2.1 </span> Timing
   functions for keyframes</h3>

  <p> A keyframe style rule may also declare the timing function that is to
   be used as the animation moves to the next keyframe.

  <div class=example>
   <p style=display:none> Example(s):</p>

   <pre>
  @keyframes 'bounce' {

    from {
      top: 100px;
      animation-timing-function: ease-out;
    }

    25% {
      top: 50px;
      animation-timing-function: ease-in;
    }

    50% {
      top: 100px;
      animation-timing-function: ease-out;
    }

    75% {
      top: 75px;
      animation-timing-function: ease-in;
    }

    to {
      top: 100px;
    }

  }

  </pre>
   Five keyframes are specified for the animation named "bounce". Between the
   first and second keyframe (ie. between 0 and 25%) an "ease-out" timing
   function is used. Between the second and third keyframe (ie. between 25%
   and 50%) an "ease-in" timing function is used. And so on. The effect will
   appear as an element that moves up the page 50px, slowing down as it
   reaches its highest point then speeding up as it falls back to 100px. The
   second half of the animation behaves in a similar manner, but only moves
   the element 25px units up the page.</div>

  <p> See <a href="#animation-timing-function_tag">the <span
   class=prop-name>&lsquo;<code
   class=property>animation-timing-function</code>&rsquo;</span> property</a>
   for more information.</p>
  <!-- ======================================================================================================= -->

  <h2 id=animations-><span class=secno>3 </span> Animations</h2>

  <p> Animations are similar to transitions in that they change the
   presentational value of CSS properties over time. The principal difference
   is that while transitions trigger <i>implicitly</i> when property values
   change, animations are <i>explicitly</i> executed when the animation
   properties are applied. Because of this, animations require explicit
   values for the properties being animated. These values are specified using
   animation keyframes, described above.

  <p> Many aspects of the animation can be controlled, including how many
   times the animation iterates, whether or not it alternates between the
   begin and end values, and whether or not the animation should be running
   or paused. An animation can also delay its start time.

  <div class=example>
   <p style=display:none> Example(s):</p>

   <pre>
  div {
    animation-name: 'diagonal-slide';
    animation-duration: 5s;
    animation-iteration-count: 10;
  }

  @keyframes 'diagonal-slide' {

    from {
      left: 0;
      top: 0;
    }

    to {
      left: 100px;
      top: 100px;
    }

  }

  </pre>
   This will produce an animation that moves an element from (0, 0) to
   (100px, 100px) over five seconds and repeats itself nine times (for a
   total of ten iterations).</div>
  <!-- ======================================================================================================= -->

  <h3 id=animation-behavior-><span class=secno>3.1 </span> Animation behavior
   </h3>

  <p> CSS Animations affect computed property values. During the execution of
   an animation, the computed value for a property is controlled by the
   animation. This overrides the value specified in the normal styling
   system.

  <p> In the case of multiple animations specifying behavior for the same
   property, the animation defined last will override the previously defined
   animations.

  <p> An animation does not affect the computed value before the application
   of the animation, before the animation delay has expired, and after the
   end of the animation.

  <div class=figure> <img alt="" src=sandwich.png></div>

  <p class=caption> Computation of animated property values

  <p> The diagram above shows how property values are computed. The intrinsic
   style is shown at the top of the diagram. The computed value is derived
   from intrinsic style at the times when an animation is not running and
   also when an animation is delayed (see below for specification of
   animation delay). During an animation, the computed style is derived from
   the animated value.

  <p> The start time of an animation is the latter of two moments: the time
   at which the style is resolved that specifies the animation, or the time
   the document's load event is fired. Therefore, an animation specified in
   the document stylesheet will begin at the document load. An animation
   specified on an element by modifying the style after the document has
   loaded will start when the style is resolved. That may be immediately in
   the case of a pseudo style rule such as hover, or may be when the
   scripting engine returns control to the browser (in the case of style
   applied by script).

  <p> An animation applies to an element if the element has a value for <span
   class=prop-name>&lsquo;<code class=property><a
   href="#animation-name">animation-name</a></code>&rsquo;</span> that
   references a valid keyframes rule. Once an animation has started it
   continues until it ends or the <span class=prop-name>&lsquo;<code
   class=property><a
   href="#animation-name">animation-name</a></code>&rsquo;</span> is removed.
   The values used for the keyframes and animation properties are snapshotted
   at the time the animation starts. Changing them during the execution of
   the animation has no effect. Note also, that changing the value of <span
   class=prop-name>&lsquo;<code class=property><a
   href="#animation-name">animation-name</a></code>&rsquo;</span> does not
   necessarily restart an animation (e.g. if a list of animations are applied
   and one is removed from the list, only that animation will stop; The other
   animations will continue). In order to restart an animation, it must be
   removed then reapplied.</p>
  <!-- ======================================================================================================= -->

  <h3 id=the-animation-name-property-><span class=secno>3.2 </span> The <span
   class=prop-name>&lsquo;<code class=property><a
   href="#animation-name">animation-name</a></code>&rsquo;</span> Property</h3>

  <p> The <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-name">animation-name</a></code>&rsquo;</span> property
   defines a list of animations that apply. Each name is used to select the
   keyframe at-rule that provides the property values for the animation. If
   the name does not match any keyframe at-rule, there are no properties to
   be animated and the animation will not execute. Furthermore, if the
   animation name is &lsquo;<code class=property>none</code>&rsquo; then
   there will be no animation. This can be used to override any animations
   coming from the cascade.

  <table class=propdef>
   <tbody>
    <tr>
     <td> <em>Name:</em>

     <td> <dfn id=animation-name>animation-name</dfn>

    <tr>
     <td> <em>Value:</em>

     <td> none | IDENT [, none | IDENT ]*

    <tr>
     <td> <em>Initial:</em>

     <td> none

    <tr>
     <td> <em>Applies&nbsp;to:</em>

     <td> block-level and inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> N/A

    <tr>
     <td> <em>Media:</em>

     <td> visual

    <tr>
     <td> <em>Computed value:</em>

     <td> Same as specified value.
  </table>
  <!--
      <p>
        It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on <span class="prop-name">opacity</span> will add together and animations on <span class="prop-name">transform</span> will have their transformation matrices multiplied.
      </p>
      <div class="example">
        <p style="display:none">
          Example(s):
        </p>
        <pre>
        @keyframes 'border-bloat' {
          from {
            border-width: 0;
          }
          to {
            border-width: 10px;
          }
        }

        @keyframes 'border-diet' {
          from {
            border-width: 4px;
          }
          to {
            border-width: 2px;
          }
        }

        div {
          animation-name: 'border-bloat', 'border-diet';
          animation-duration: 10s, 4s;
        }
      </pre>
      <p>
      The above example has two animations executing on the same property, <span class="prop-name">border-width</span>. The animations are additive. That is, the
      resulting value for the property will be the addition of the values from the
      two animations.
      </p>
      <p>
        At time &lsquo;<code class=css>0s</code>&rsquo; the element's border will be 4px wide (0px from &lsquo;<code class=property>border-bloat</code>&rsquo; plus 4px from &lsquo;<code class=property>border-diet</code>&rsquo;).
        At time &lsquo;<code class=css>4s</code>&rsquo; the element's border will be 6px wide (4px from &lsquo;<code class=property>border-bloat</code>&rsquo; plus 2px from &lsquo;<code class=property>border-diet</code>&rsquo;).
        At time &lsquo;<code class=css>10s</code>&rsquo; the element's border will be 10px wide (10px from &lsquo;<code class=property>border-bloat</code>&rsquo; and no addition from
        &lsquo;<code class=property>border-diet</code>&rsquo; as it is no longer executing).
      </p>
    </div>
  -->
  <!-- ======================================================================================================= -->

  <h3 id=the-animation-duration-property-><span class=secno>3.3 </span> The
   <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-duration">animation-duration</a></code>&rsquo;</span>
   Property</h3>

  <p> The <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-duration">animation-duration</a></code>&rsquo;</span>
   property defines the length of time that an animation takes to complete
   one cycle.

  <table class=propdef>
   <tbody>
    <tr>
     <td> <em>Name:</em>

     <td> <dfn id=animation-duration>animation-duration</dfn>

    <tr>
     <td> <em>Value:</em>

     <td> &lt;time&gt; [, &lt;time&gt;]*

    <tr>
     <td> <em>Initial:</em>

     <td> 0

    <tr>
     <td> <em>Applies&nbsp;to:</em>

     <td> block-level and inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> N/A

    <tr>
     <td> <em>Media:</em>

     <td> visual

    <tr>
     <td> <em>Computed value:</em>

     <td> Same as specified value.
  </table>

  <p> By default the value is &lsquo;<code class=css>0</code>&rsquo;, meaning
   that the animation cycle is immediate (i.e. there will be no animation). A
   negative value for <a class=prop-name
   href="#animation-duration">animation-duration</a> is treated as
   &lsquo;<code class=css>0</code>&rsquo;.</p>
  <!-- ======================================================================================================= -->

  <h3 id=animation-timing-function_tag><span class=secno>3.4 </span> The
   <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-timing-function">animation-timing-function</a></code>&rsquo;</span>
   Property</h3>

  <p> The <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-timing-function">animation-timing-function</a></code>&rsquo;</span>
   property describes how the animation will progress over one cycle of its
   duration. See the <span class=prop-name>&lsquo;<code
   class=property>transition-timing-function</code>&rsquo;</span> property <a
   href="#CSS3-TRANSITIONS"
   rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a> for a
   complete description of timing function calculation.

  <table class=propdef>
   <tbody>
    <tr>
     <td> <em>Name:</em>

     <td> <dfn id=animation-timing-function>animation-timing-function</dfn>

    <tr>
     <td> <em>Value:</em>

     <td> ease | linear | ease-in | ease-out | ease-in-out |
      cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
      &lt;number&gt;) [, ease | linear | ease-in | ease-out | ease-in-out |
      cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
      &lt;number&gt;)]*

    <tr>
     <td> <em>Initial:</em>

     <td> ease

    <tr>
     <td> <em>Applies&nbsp;to:</em>

     <td> block-level and inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> N/A

    <tr>
     <td> <em>Media:</em>

     <td> visual

    <tr>
     <td> <em>Computed value:</em>

     <td> Same as specified value.
  </table>

  <p> For a keyframed animation, the <span class=prop-name>&lsquo;<code
   class=property><a
   href="#animation-timing-function">animation-timing-function</a></code>&rsquo;</span>
   applies between keyframes, not over the entire animation. For example, in
   the case of an ease-in-out timing function, an animation will ease in at
   the start of the keyframe and ease out at the end of the keyframe. A <span
   class=prop-name>&lsquo;<code class=property><a
   href="#animation-timing-function">animation-timing-function</a></code>&rsquo;</span>
   defined within a keyframe block applies to that keyframe, otherwise the
   timing function specified for the animation is used.</p>
  <!-- ======================================================================================================= -->

  <h3 id=the-animation-iteration-count-property-><span class=secno>3.5
   </span> The <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-iteration-count">animation-iteration-count</a></code>&rsquo;</span>
   Property</h3>

  <p> The <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-iteration-count">animation-iteration-count</a></code>&rsquo;</span>
   property defines the number of times an animation cycle is played. The
   default value is one, meaning the animation will play from beginning to
   end once. A value of <span class=prop-value>&lsquo;<code
   class=property>infinite</code>&rsquo;</span> will cause the animation to
   repeat forever. Non-integer numbers will cause the animation to end
   part-way through a cycle. Negative values for <span
   class=prop-name>&lsquo;<code class=property><a
   href="#animation-iteration-count">animation-iteration-count</a></code>&rsquo;</span>
   are treated as zero. This property is often used with an <span
   class=prop-name>&lsquo;<code class=property><a
   href="#animation-direction">animation-direction</a></code>&rsquo;</span>
   value of <span class=prop-value>&lsquo;<code
   class=property>alternate</code>&rsquo;</span>, which will cause the
   animation to play in reverse on alternate cycles.

  <table class=propdef>
   <tbody>
    <tr>
     <td> <em>Name:</em>

     <td> <dfn id=animation-iteration-count>animation-iteration-count</dfn>

    <tr>
     <td> <em>Value:</em>

     <td> infinite | &lt;number&gt; [, infinite | &lt;number&gt;]*

    <tr>
     <td> <em>Initial:</em>

     <td> 1

    <tr>
     <td> <em>Applies&nbsp;to:</em>

     <td> block-level and inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> N/A

    <tr>
     <td> <em>Media:</em>

     <td> visual

    <tr>
     <td> <em>Computed value:</em>

     <td> Same as specified value.
  </table>
  <!-- ======================================================================================================= -->

  <h3 id=the-animation-direction-property-><span class=secno>3.6 </span> The
   <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-direction">animation-direction</a></code>&rsquo;</span>
   Property</h3>

  <p> The <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-direction">animation-direction</a></code>&rsquo;</span>
   property defines whether or not the animation should play in reverse on
   alternate cycles. If <span class=prop-value>&lsquo;<code
   class=property>alternate</code>&rsquo;</span> is specified, the animation
   cycle iterations that are odd counts are played in the normal direction,
   and the animation cycle iterations that are even counts are played in a
   reverse direction. When an animation is played in reverse the timing
   functions are also reversed. For example, when played in reverse an
   ease-in animation would appear to be an ease-out animation.

  <table class=propdef>
   <tbody>
    <tr>
     <td> <em>Name:</em>

     <td> <dfn id=animation-direction>animation-direction</dfn>

    <tr>
     <td> <em>Value:</em>

     <td> normal | alternate [, normal | alternate]*

    <tr>
     <td> <em>Initial:</em>

     <td> normal

    <tr>
     <td> <em>Applies&nbsp;to:</em>

     <td> block-level and inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> N/A

    <tr>
     <td> <em>Media:</em>

     <td> visual

    <tr>
     <td> <em>Computed value:</em>

     <td> Same as specified value.
  </table>
  <!-- ======================================================================================================= -->

  <h3 id=the-animation-play-state-property-><span class=secno>3.7 </span> The
   <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-play-state">animation-play-state</a></code>&rsquo;</span>
   Property</h3>

  <div class=issue> We are considering removing &lsquo;<code
   class=property><a
   href="#animation-play-state">animation-play-state</a></code>&rsquo; since
   its behaviour can be replicated using other techniques. For example, by
   querying the computed style, removing the animation and then setting
   style.</div>

  <p> The <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-play-state">animation-play-state</a></code>&rsquo;</span>
   property defines whether the animation is running or paused. A running
   animation can be paused by setting this property to <span
   class=prop-value>&lsquo;<code class=property>paused</code>&rsquo;</span>.
   To continue running a paused animation this property can be set to <span
   class=prop-value>&lsquo;<code class=property>running</code>&rsquo;</span>.
   A paused animation will continue to display the current value of the
   animation in a static state, as if the time of the animation is constant.
   When a paused animation is resumed, it restarts from the current value,
   not necessarily from the beginning of the animation.

  <table class=propdef>
   <tbody>
    <tr>
     <td> <em>Name:</em>

     <td> <dfn id=animation-play-state>animation-play-state</dfn>

    <tr>
     <td> <em>Value:</em>

     <td> running | paused [, running | paused]*

    <tr>
     <td> <em>Initial:</em>

     <td> running

    <tr>
     <td> <em>Applies&nbsp;to:</em>

     <td> block-level and inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> N/A

    <tr>
     <td> <em>Media:</em>

     <td> visual

    <tr>
     <td> <em>Computed value:</em>

     <td> Same as specified value.
  </table>
  <!-- ======================================================================================================= -->

  <h3 id=the-animation-delay-property-><span class=secno>3.8 </span> The
   <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-trigger">animation-delay</a></code>&rsquo;</span>
   Property</h3>

  <p> The <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-trigger">animation-delay</a></code>&rsquo;</span>
   property defines when the animation will start. It allows an animation to
   begin execution some time after it is applied. An <span
   class=prop-name>&lsquo;<code class=property><a
   href="#animation-trigger">animation-delay</a></code>&rsquo;</span> value
   of &lsquo;<code class=css>0</code>&rsquo; means the animation will execute
   as soon as it is applied. Otherwise, the value specifies an offset from
   the moment the animation is applied, and the animation will delay
   execution by that offset.

  <p> If the value for <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-trigger">animation-delay</a></code>&rsquo;</span> is a
   negative time offset then the animation will execute the moment it is
   applied, but will appear to have begun execution at the specified offset.
   That is, the animation will appear to begin part-way through its play
   cycle. In the case where an animation has implied starting values and a
   negative <span class=prop-name>&lsquo;<code class=property><a
   href="#animation-trigger">animation-delay</a></code>&rsquo;</span>, the
   starting values are taken from the moment the animation is applied.

  <table class=propdef>
   <tbody>
    <tr>
     <td> <em>Name:</em>

     <td> <dfn id=animation-trigger>animation-delay</dfn>

    <tr>
     <td> <em>Value:</em>

     <td> &lt;time&gt; [, &lt;time&gt;]*

    <tr>
     <td> <em>Initial:</em>

     <td> 0

    <tr>
     <td> <em>Applies&nbsp;to:</em>

     <td> block-level and inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> N/A

    <tr>
     <td> <em>Media:</em>

     <td> visual

    <tr>
     <td> <em>Computed value:</em>

     <td> Same as specified value.
  </table>
  <!-- ======================================================================================================= -->

  <h3 id=the-animation-shorthand-property-><span class=secno>3.9 </span> The
   <span class=prop-name>&lsquo;<code class=property><a
   href="#animation">animation</a></code>&rsquo;</span> Shorthand Property</h3>

  <p> The <span class=prop-name>&lsquo;<code class=property><a
   href="#animation">animation</a></code>&rsquo;</span> shorthand property
   combines six of the animation properties into a single property.

  <table class=propdef>
   <tbody>
    <tr>
     <td> <em>Name:</em>

     <td> <dfn id=animation>animation</dfn>

    <tr>
     <td> <em>Value:</em>

     <td> [&lt;animation-name&gt; || &lt;animation-duration&gt; ||
      &lt;animation-timing-function&gt; || &lt;animation-delay&gt; ||
      &lt;animation-iteration-count&gt; || &lt;animation-direction&gt;] [,
      [&lt;animation-name&gt; || &lt;animation-duration&gt; ||
      &lt;animation-timing-function&gt; || &lt;animation-delay&gt; ||
      &lt;animation-iteration-count&gt; || &lt;animation-direction&gt;] ]*

    <tr>
     <td> <em>Initial:</em>

     <td> see individual properties

    <tr>
     <td> <em>Applies&nbsp;to:</em>

     <td> block-level and inline-level elements

    <tr>
     <td> <em>Inherited:</em>

     <td> no

    <tr>
     <td> <em>Percentages:</em>

     <td> N/A

    <tr>
     <td> <em>Media:</em>

     <td> visual

    <tr>
     <td> <em>Computed value:</em>

     <td> Same as specified value.
  </table>
  <!-- ======================================================================================================= -->

  <h2 id=animation-events-><span class=secno>4 </span> Animation Events</h2>

  <p> Several animation related events are available through the <a
   href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event
   system</a>. The start and end of an animation, and the end of each
   iteration of an animation all generate DOM events. An element can have
   multiple properties being animated simultaneously. This can occur either
   with a single <a class=prop-name href="#animation-name">animation-name</a>
   value with keyframes containing multiple properties, or with multiple <a
   class=prop-name href="#animation-name">animation-name</a> values. For the
   purposes of events, each <a class=prop-name
   href="#animation-name">animation-name</a> specifies a single animation.
   Therefore an event will be generated for each <a class=prop-name
   href="#animation-name">animation-name</a> value and not necessarily for
   each property being animated.

  <p> The time the animation has been running is sent with each event
   generated. This allows the event handler to determine the current
   iteration of a looping animation or the current position of an alternating
   animation. This time does not include any time the animation was in the
   <code>paused</code> play state.

  <dl>
   <dt> <b>Interface <i><a id=Events-AnimationEvent
    name=Events-AnimationEvent>AnimationEvent</a></i></b>

   <dd>
    <p> The <code>AnimationEvent</code> interface provides specific
     contextual information associated with Animation events.</p>

    <dl>
     <dt> <br>
      <b>IDL Definition</b>

     <dd>
      <div class=idl-code>
       <pre>
  interface AnimationEvent : Event {
    readonly attribute DOMString          animationName;
    readonly attribute float              elapsedTime;
    void               initAnimationEvent(in DOMString typeArg,
                                          in boolean canBubbleArg,
                                          in boolean cancelableArg,
                                          in DOMString animationNameArg,
                                          in float elapsedTimeArg);
  };
  </pre>
      </div>

     <dt> <b>Attributes</b>

     <dd>
      <dl>
       <dt> <code class=attribute-name><a
        id=Events-AnimationEvent-animationName
        name=Events-AnimationEvent-animationName>animationName</a></code> of
        type <code>DOMString</code>, readonly

       <dd> The value of the <a class=prop-name
        href="#animation-name">animation-name</a> property of the animation
        that fired the event.
      </dl>

      <dl>
       <dt> <code class=attribute-name><a
        id=Events-AnimationEvent-elapsedTime
        name=Events-AnimationEvent-elapsedTime>elapsedTime</a></code> of type
        <code>float</code>, readonly

       <dd> The amount of time the animation has been running, in seconds,
        when this event fired, excluding any time the animation was paused.
        Note that this value is not affected by the value of <a
        class=prop-name href="#animation-trigger">animation-delay</a>. For an
        "animationstart" event, the elapsedTime is always zero.
      </dl>

     <dt> <b>Methods</b>

     <dd>
      <dl>
       <dt> <code class=method-name><a
        id=Events-AnimationEvent-initAnimationEvent
        name=Events-AnimtionEvent-initAnimationEvent>initAnimationEvent</a></code>


       <dd>
        <div class=method> The <code>initAnimationEvent</code> method is used
         to initialize the value of an <code>AnimationEvent</code> created
         through the <a
         href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent"><code>DocumentEvent</code></a>
         interface. This method may only be called before the
         <code>AnimationEvent</code> has been dispatched via the
         <code>dispatchEvent</code> method, though it may be called multiple
         times during that phase if necessary. If called multiple times, the
         final invocation takes precedence.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>typeArg</code> of type
             <code>DOMString</code>

            <dd> Specifies the event type.<br>

            <dt> <code class=parameter-name>canBubbleArg</code> of type
             <code>boolean</code>

            <dd> Specifies whether or not the event can bubble.<br>

            <dt> <code class=parameter-name>cancelableArg</code> of type
             <code>boolean</code>

            <dd> Specifies whether or not the event's default action can be
             prevented.

            <dt> <code class=parameter-name>animationNameArg</code> of type
             <code>DOMString</code>

            <dd> Specifies the <a
             href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event"><code>Event</code></a>'s
             animation name.<br>

            <dt> <code class=parameter-name>elapsedTimeArg</code> of type
             <code>float</code>

            <dd> Specifies the amount of time, in seconds, the animation has
             been running at the time of initialization.
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div> <b>No Return Value</b></div>

         <div> <b>No Exceptions</b></div>
        </div>
        <!-- method -->
      </dl>
    </dl>
  </dl>

  <p> The different types of Animation events that can occur are:

  <dl>
   <dt> <b>animationstart</b>

   <dd> The &lsquo;<code class=property>animationstart</code>&rsquo; event
    occurs at the start of the animation
    <ul>
     <li>Bubbles: Yes

     <li>Cancelable: Yes

     <li>Context Info: animationName
    </ul>

   <dt> <b>animationend</b>

   <dd> The &lsquo;<code class=property>animationend</code>&rsquo; event
    occurs when the animation finishes.
    <ul>
     <li>Bubbles: Yes

     <li>Cancelable: Yes

     <li>Context Info: animationName, elapsedTime
    </ul>

   <dt> <b>animationiteration</b>

   <dd> The &lsquo;<code class=property>animationiteration</code>&rsquo;
    event occurs at the end of each iteration of an animation for which
    <code><a
    href="#animation-iteration-count">animation-iteration-count</a></code> is
    greater than one. This event does not occur for animations with an
    iteration count of one.
    <ul>
     <li>Bubbles: Yes

     <li>Cancelable: Yes

     <li>Context Info: animationName, elapsedTime
    </ul>
  </dl>
  <!-- ======================================================================================================= -->

  <h2 id=dom-interfaces-><span class=secno>5 </span> DOM Interfaces</h2>

  <p> CSS animation is exposed to the CSSOM through a pair of new interfaces
   describing the keyframes.

  <dl>
   <dt> <b>Interface <i><a id=DOM-CSSRule
    name=DOM-CSSRule>CSSRule</a></i></b>

   <dd>
    <p> The following 2 rule types are added to the <code>CSSRule</code>
     interface. They provide identification for the new keyframe and
     keyframes rules.</p>

    <dl>
     <dt> <b>IDL Definition</b>

     <dd>
      <div class=idl-code>
       <pre>
    interface CSSRule {
      ...
      const unsigned short KEYFRAMES_RULE = 7;
      const unsigned short KEYFRAME_RULE = 8;
      ...
    };</pre>
      </div>
     </dd>
     <!-- IDL -->
    </dl>

   <dt> <b>Interface <i><a id=DOM-CSSKeyframeRule
    name=DOM-CSSKeyframeRule>CSSKeyframeRule</a></i></b>

   <dd>
    <p> The <code>CSSKeyframeRule</code> interface represents the style rule
     for a single key.</p>

    <dl>
     <dt> <br>
      <b>IDL Definition</b>

     <dd>
      <div class=idl-code>
       <pre>
    interface CSSKeyframeRule : CSSRule {
        attribute DOMString keyText;
        readonly attribute CSSStyleDeclaration style;
    };
    </pre>
      </div>
      <br>

     <dt> <b>Attributes</b>

     <dd>
      <dl>
       <dt> <code class=attribute-name><a id=DOM-CSSKeyframeRule-keyText
        name=DOM-CSSKeyframeRule-keyText>keyText</a></code> of type
        <code>DOMString</code>

       <dd> This attribute represents the key as the string representation of
        a floating point number between 0 and 1. If the value in the CSS
        style is <code>from</code> this value will be 0, and if the value in
        the CSS style is <code>to</code> this value will be 1.<br>
      </dl>

     <dd>
      <dl>
       <dt> <code class=attribute-name><a id=DOM-CSSKeyframeRule-style
        name=DOM-CSSKeyframeRule-style>style</a></code> of type
        <code>CSSStyleDeclaration</code>

       <dd> This attribute represents the style associated with this
        keyframe.<br>
      </dl>

     <dt> <b>No Methods</b>
    </dl>
  </dl>

  <dl>
   <dt> <b>Interface <i><a id=DOM-CSSKeyframesRule
    name=DOM-CSSKeyframesRule>CSSKeyframesRule</a></i></b>

   <dd>
    <p> The <code>CSSKeyframesRule</code> interface represents a complete set
     of keyframes for a single animation.</p>

    <dl>
     <dt> <br>
      <b>IDL Definition</b>

     <dd>
      <div class=idl-code>
       <pre>
    interface CSSKeyframesRule : CSSRule {
        attribute          DOMString   name;
        readonly attribute CSSRuleList cssRules;

        void               insertRule(in DOMString rule);
        void               deleteRule(in DOMString key);
        CSSKeyframeRule    findRule(in DOMString key);
    };
    </pre>
      </div>
      <br>

     <dt> <b>Attributes</b>

     <dd>
      <dl>
       <dt> <code class=attribute-name><a id=DOM-CSSKeyframesRule-name
        name=DOM-CSSKeyframesRule-name>name</a></code> of type
        <code>DOMString</code>

       <dd> This attribute is the name of the keyframes, used by the <code><a
        href="#animation-name">animation-name</a></code> property.<br>
      </dl>

     <dd>
      <dl>
       <dt> <code class=attribute-name><a id=DOM-CSSKeyframeRules-cssRules
        name=DOM-CSSKeyframeRules-cssRules>cssRules</a></code> of type
        <code>CSSRuleList</code>

       <dd> This attribute gives access to the keyframes in the list.<br>
      </dl>

     <dt> <b>Methods</b>

     <dd>
      <dl><!-- ======================================================================================================= -->

       <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-insertRule
        name=DOM-CSSKeyframesRule-insertRule>insertRule</a></code>

       <dd>
        <div class=method> The <code>insertRule</code> method inserts the
         passed CSSKeyframeRule into the list at the passed key.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>rule</code> of type
             <code>DOMString</code>

            <dd> The rule to be inserted, expressed in the same syntax as one
             entry in the <code>@keyframes</code> rule. The key is included
             in the rule string, which described the point at which the rule
             should be inserted. If a rule with the same key already exists
             in the list, it is replaced with this rule.
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>No Return Value</b></div>

         <div> <b>No Exceptions</b></div>
        </div>
        <!-- ======================================================================================================= -->


       <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-deleteRule
        name=DOM-CSSKeyframesRule-deleteRule>deleteRule</a></code>

       <dd>
        <div class=method> The <code>deleteRule</code> method deletes the
         CSSKeyframeRule with the passed key. If a rule with this key does
         not exist, the method does nothing.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>key</code> of type
             <code>DOMString</code>

            <dd> The key which describes the rule to be deleted. The key must
             resolve to a number between 0 and 1, or the rule is ignored.<br>
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>No Return Value</b></div>

         <div> <b>No Exceptions</b></div>
        </div>
        <!-- ======================================================================================================= -->


       <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-findRule
        name=DOM-CSSKeyframesRule-findRule>findRule</a></code>

       <dd>
        <div class=method> The <code>findRule</code> method returns the rule
         with a key matching the passed key. If no such rule exists, a null
         value is returned.
         <div class=parameters> <b>Parameters</b>
          <div class=paramtable>
           <dl>
            <dt> <code class=parameter-name>key</code> of type
             <code>DOMString</code>

            <dd> The key which described the rule to find. The key must
             resolve to a number between 0 and 1, or the rule is ignored.<br>
           </dl>
          </div>
         </div>
         <!-- parameters -->
         <div class=return-value> <b>Return Value</b>
          <div class=returnvalue>
           <dl>
            <dt> <code>CSSKeyframeRule</code>

            <dd> The found rule.<br>
           </dl>
          </div>
         </div>

         <div> <b>No Exceptions</b></div>
        </div>
        <!-- ======================================================================================================= -->

      </dl>
      <!-- method -->
    </dl>
  </dl>

  <h2 id=references><span class=secno>6 </span>References</h2>

  <h3 class=no-num id=normative-references>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS]

   <dd>Dean Jackson; David Hyatt; Chris Marrin. <a
    href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320"><cite>CSS
    Transitions Module Level 3.</cite></a> 20 March 2009. W3C Working Draft.
    (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320">http://www.w3.org/TR/2009/WD-css3-transitions-20090320</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=property-index>Property index</h2>
  <!--begin-properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr valign=baseline>
     <td><a class=property href="#animation">animation</a>

     <td>[&lt;animation-name&gt; || &lt;animation-duration&gt; ||
      &lt;animation-timing-function&gt; || &lt;animation-delay&gt; ||
      &lt;animation-iteration-count&gt; || &lt;animation-direction&gt;] [,
      [&lt;animation-name&gt; || &lt;animation-duration&gt; ||
      &lt;animation-timing-function&gt; || &lt;animation-delay&gt; ||
      &lt;animation-iteration-count&gt; || &lt;animation-direction&gt;] ]*

     <td>see individual properties

     <td>block-level and inline-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#animation-trigger">animation-delay</a>

     <td>&lt;time&gt; [, &lt;time&gt;]*

     <td>0

     <td>block-level and inline-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property
      href="#animation-direction">animation-direction</a>

     <td>normal | alternate [, normal | alternate]*

     <td>normal

     <td>block-level and inline-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#animation-duration">animation-duration</a>

     <td>&lt;time&gt; [, &lt;time&gt;]*

     <td>0

     <td>block-level and inline-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property
      href="#animation-iteration-count">animation-iteration-count</a>

     <td>infinite | &lt;number&gt; [, infinite | &lt;number&gt;]*

     <td>1

     <td>block-level and inline-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#animation-name">animation-name</a>

     <td>none | IDENT [, none | IDENT ]*

     <td>none

     <td>block-level and inline-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property
      href="#animation-play-state">animation-play-state</a>

     <td>running | paused [, running | paused]*

     <td>running

     <td>block-level and inline-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property
      href="#animation-timing-function">animation-timing-function</a>

     <td>ease | linear | ease-in | ease-out | ease-in-out |
      cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
      &lt;number&gt;) [, ease | linear | ease-in | ease-out | ease-in-out |
      cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
      &lt;number&gt;)]*

     <td>ease

     <td>block-level and inline-level elements

     <td>no

     <td>N/A

     <td>visual
  </table>
  <!--end-properties-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>animation, <a href="#animation"
    title=animation><strong>3.9</strong></a>

   <li>animation-delay, <a href="#animation-trigger"
    title=animation-delay><strong>3.8</strong></a>

   <li>animation-direction, <a href="#animation-direction"
    title=animation-direction><strong>3.6</strong></a>

   <li>animation-duration, <a href="#animation-duration"
    title=animation-duration><strong>3.3</strong></a>

   <li>animation-iteration-count, <a href="#animation-iteration-count"
    title=animation-iteration-count><strong>3.5</strong></a>

   <li>animation-name, <a href="#animation-name"
    title=animation-name><strong>3.2</strong></a>

   <li>animation-play-state, <a href="#animation-play-state"
    title=animation-play-state><strong>3.7</strong></a>

   <li>animation-timing-function, <a href="#animation-timing-function"
    title=animation-timing-function><strong>3.4</strong></a>
  </ul>
  <!--end-index-->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
End:
-->