Add two additional values for animation-direction: reverse and alternate-reverse .
authorL. David Baron <dbaron@dbaron.org>
Wed, 28 Mar 2012 22:14:48 -0700
changeset 5304b531bcdc39f7
parent 5303 083f80ca0535
child 5305 02337495520a
Add two additional values for animation-direction: reverse and alternate-reverse .

This is as proposed in
http://lists.w3.org/Archives/Public/www-style/2011May/0548.html
and resolved in the group's 2012 March 28 teleconference per
http://lists.w3.org/Archives/Public/www-style/2012Mar/0655.html
css3-animations/Overview.html
css3-animations/Overview.src.html
     1.1 --- a/css3-animations/Overview.html	Wed Mar 28 22:04:08 2012 -0700
     1.2 +++ b/css3-animations/Overview.html	Wed Mar 28 22:14:48 2012 -0700
     1.3 @@ -192,7 +192,10 @@
     1.4     <li><a href="#dom-interfaces-"><span class=secno>5. </span> DOM Interfaces
     1.5      </a>
     1.6  
     1.7 -   <li><a href="#references"><span class=secno>6. </span>References</a>
     1.8 +   <li><a href="#acknowledgments"><span class=secno>6.
     1.9 +    </span>Acknowledgments</a>
    1.10 +
    1.11 +   <li><a href="#references"><span class=secno>7. </span>References</a>
    1.12      <ul class=toc>
    1.13       <li class=no-num><a href="#normative-references">Normative
    1.14        references</a>
    1.15 @@ -807,13 +810,10 @@
    1.16  
    1.17    <p> The <a href="#animation-direction"><code
    1.18     class=property>'animation-direction'</code></a> property defines whether
    1.19 -   or not the animation should play in reverse on alternate cycles. If <code
    1.20 -   class=css>alternate</code> is specified, the animation cycle iterations
    1.21 -   that are odd counts are played in the normal direction, and the animation
    1.22 -   cycle iterations that are even counts are played in a reverse direction.
    1.23 -   When an animation is played in reverse the timing functions are also
    1.24 -   reversed. For example, when played in reverse an ease-in animation would
    1.25 -   appear to be an ease-out animation.
    1.26 +   or not the animation should play in reverse on some or all cycles. When an
    1.27 +   animation is played in reverse the timing functions are also reversed. For
    1.28 +   example, when played in reverse an ease-in animation would appear to be an
    1.29 +   ease-out animation.
    1.30  
    1.31    <table class=propdef>
    1.32     <tbody>
    1.33 @@ -825,7 +825,8 @@
    1.34      <tr>
    1.35       <td> <em>Value:</em>
    1.36  
    1.37 -     <td> normal | alternate [, [ normal | alternate ] ]*
    1.38 +     <td> normal | reverse | alternate | alternate-reverse [, [ normal |
    1.39 +      reverse | alternate | alternate-reverse ] ]*
    1.40  
    1.41      <tr>
    1.42       <td> <em>Initial:</em>
    1.43 @@ -857,6 +858,29 @@
    1.44  
    1.45       <td> Same as specified value.
    1.46    </table>
    1.47 +
    1.48 +  <dl>
    1.49 +   <dt>normal
    1.50 +
    1.51 +   <dd>All iterations of the animation are played as specified.
    1.52 +
    1.53 +   <dt>reverse
    1.54 +
    1.55 +   <dd>All iterations of the animation are played in the reverse direction
    1.56 +    from the way they were specified.
    1.57 +
    1.58 +   <dt>alternate
    1.59 +
    1.60 +   <dd>The animation cycle iterations that are odd counts are played in the
    1.61 +    normal direction, and the animation cycle iterations that are even counts
    1.62 +    are played in a reverse direction.
    1.63 +
    1.64 +   <dt>alternate-reverse
    1.65 +
    1.66 +   <dd>The animation cycle iterations that are odd counts are played in the
    1.67 +    reverse direction, and the animation cycle iterations that are even
    1.68 +    counts are played in a normal direction.
    1.69 +  </dl>
    1.70    <!-- ======================================================================================================= -->
    1.71  
    1.72    <h3 id=the-animation-play-state-property-><span class=secno>3.7. </span>
    1.73 @@ -1556,7 +1580,13 @@
    1.74      </dl>
    1.75    </dl>
    1.76  
    1.77 -  <h2 id=references><span class=secno>6. </span>References</h2>
    1.78 +  <h2 id=acknowledgments><span class=secno>6. </span>Acknowledgments</h2>
    1.79 +
    1.80 +  <p>Thanks especially to the feedback from Estelle Weyl and all the rest of
    1.81 +   the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
    1.82 +   community.
    1.83 +
    1.84 +  <h2 id=references><span class=secno>7. </span>References</h2>
    1.85  
    1.86    <h3 class=no-num id=normative-references>Normative references</h3>
    1.87    <!--begin-normative-->
    1.88 @@ -1649,7 +1679,8 @@
    1.89       <th><a class=property
    1.90        href="#animation-direction">animation-direction</a>
    1.91  
    1.92 -     <td>normal | alternate [, [ normal | alternate ] ]*
    1.93 +     <td>normal | reverse | alternate | alternate-reverse [, [ normal |
    1.94 +      reverse | alternate | alternate-reverse ] ]*
    1.95  
    1.96       <td>normal
    1.97  
     2.1 --- a/css3-animations/Overview.src.html	Wed Mar 28 22:04:08 2012 -0700
     2.2 +++ b/css3-animations/Overview.src.html	Wed Mar 28 22:14:48 2012 -0700
     2.3 @@ -731,7 +731,7 @@
     2.4          The <code class="property">'animation-direction'</code> Property
     2.5        </h3>
     2.6        <p>
     2.7 -        The <code class="property">'animation-direction'</code> property defines whether or not the animation should play in reverse on alternate cycles. If <code class="css">alternate</code> 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.
     2.8 +        The <code class="property">'animation-direction'</code> property defines whether or not the animation should play in reverse on some or all cycles.  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.
     2.9        </p>
    2.10        <table class="propdef">
    2.11          <tbody>
    2.12 @@ -748,7 +748,7 @@
    2.13                <em>Value:</em>
    2.14              </td>
    2.15              <td>
    2.16 -              normal | alternate [, [ normal | alternate ] ]*
    2.17 +              normal | reverse | alternate | alternate-reverse [, [ normal | reverse | alternate | alternate-reverse ] ]*
    2.18              </td>
    2.19            </tr>
    2.20            <tr>
    2.21 @@ -800,7 +800,18 @@
    2.22              </td>
    2.23            </tr>
    2.24          </tbody>
    2.25 -      </table><!-- ======================================================================================================= -->
    2.26 +      </table>
    2.27 +      <dl>
    2.28 +        <dt>normal</dt>
    2.29 +          <dd>All iterations of the animation are played as specified.</dd>
    2.30 +        <dt>reverse</dt>
    2.31 +          <dd>All iterations of the animation are played in the reverse direction from the way they were specified.</dd>
    2.32 +        <dt>alternate</dt>
    2.33 +          <dd>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.</dd>
    2.34 +        <dt>alternate-reverse</dt>
    2.35 +          <dd>The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.</dd>
    2.36 +      </dl>
    2.37 +      <!-- ======================================================================================================= -->
    2.38        <h3>
    2.39          The <code class="property">'animation-play-state'</code> Property
    2.40        </h3>
    2.41 @@ -1607,6 +1618,13 @@
    2.42            </dd>
    2.43          </dl>
    2.44  
    2.45 +<h2 id="acknowledgments">Acknowledgments</h2>
    2.46 +
    2.47 +<p>Thanks especially to the feedback from
    2.48 +Estelle Weyl
    2.49 +and all the rest of the
    2.50 +<a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.</p>
    2.51 +
    2.52  <h2>References</h2>
    2.53  
    2.54  <h3 class="no-num">Normative references</h3>