2009-11-17 dino@apple.com

- added rules for reversibility of transforms

Author: grorg

css3-transitions/ChangeLog

@@ -1,3 +1,7 @@
+2009-11-17 dino@apple.com
+
+- added rules for reversibility of transforms
+
 2009-11-01 dino@apple.com
 
 - made it clear that shorthand accepts duration before delay

css3-transitions/Overview.html

@@ -29,15 +29,15 @@
 
    <h1>CSS Transitions Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 17 November
     2009</h2>
 
    <dl>
     <dt>This version:
 
-    <dd> <a href="http://www.w3.org/TR/2009/ED-css3-transitions-20091101">
+    <dd> <a href="http://www.w3.org/TR/2009/ED-css3-transitions-20091117">
      http://dev.w3.org/csswg/css3-transitions/</a>
-     <!--http://www.w3.org/TR/2009/WD-css3-transitions-20091101-->
+     <!--http://www.w3.org/TR/2009/WD-css3-transitions-20091117-->
 
     <dt>Latest version:
 
@@ -119,6 +119,9 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
    W3C Patent Policy</a>.</p>
   <!--end-status-->
 
+  <p> The <a href=ChangeLog>list of changes made to this specification</a> is
+   available.
+
   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   <!--begin-toc-->
 
@@ -149,23 +152,26 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
       class=property>transition</code>&rsquo;</span> Shorthand Property </a>
     </ul>
 
-   <li><a href="#transition-events-"><span class=secno>3 </span> Transition
+   <li><a href="#reversing"><span class=secno>3 </span> Automatically
+    reversing transitions </a>
+
+   <li><a href="#transition-events-"><span class=secno>4 </span> Transition
     Events </a>
 
-   <li><a href="#animation-of-property-types-"><span class=secno>4 </span>
+   <li><a href="#animation-of-property-types-"><span class=secno>5 </span>
     Animation of property types </a>
 
-   <li><a href="#animatable-properties-"><span class=secno>5 </span>
+   <li><a href="#animatable-properties-"><span class=secno>6 </span>
     Animatable properties </a>
     <ul class=toc>
-     <li><a href="#properties-from-css-"><span class=secno>5.1 </span>
+     <li><a href="#properties-from-css-"><span class=secno>6.1 </span>
       Properties from CSS </a>
 
-     <li><a href="#properties-from-svg-"><span class=secno>5.2 </span>
+     <li><a href="#properties-from-svg-"><span class=secno>6.2 </span>
       Properties from SVG </a>
     </ul>
 
-   <li><a href="#references"><span class=secno>6 </span>References</a>
+   <li><a href="#references"><span class=secno>7 </span>References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-references">Normative
       references</a>
@@ -692,17 +698,38 @@ <h3 id=the-transition-shorthand-property-><span class=secno>2.5 </span> The
      <td> Same as specified value.
   </table>
 
-  <div class=issue> What should happen when a value is changed midway through
-   a transition? One option is to simply begin a new transition from the
-   current position. However things get interesting when from/to values are
-   being flipped. For example you'd like symmetry on fade-in/fade-out hover
-   effects if the user rolls over the object and rolls out before the
-   animation finishes. This implies that there needs to be a convenient and
-   straightforward rule for running transitions in reverse under certain
-   circumstances. This could be controlled via a new property, or could
-   perhaps be done simply by detecting when the from/to values are flipped.</div>
-
-  <h2 id=transition-events-><span class=secno>3 </span> Transition Events</h2>
+  <h2 id=reversing><span class=secno>3 </span> Automatically reversing
+   transitions</h2>
+
+  <p> A common type of transition effect is when a running transition is
+   interrupted and the property is reset to its original value. An example is
+   a hover effect on an element, where the pointer enters and exits the
+   element before the effect has completed. If the outgoing and incoming
+   transitions are executed using their specified durations and timing
+   functions, the resulting effect can be distractingly asymmetric. Instead,
+   the expected behavior is that the new transition should be the reverse of
+   what has already executed.
+
+  <p> If a currently executing transition is interrupted and the
+   transitioning property value is set to the original starting value for the
+   interrupted transition, and no other transition-related properties have
+   changed, then the new transition should be the reverse of the interrupted
+   transition. The new transition will execute with a duration that is the
+   elapsed time of the interrupted transition at the moment it was
+   interrupted. The timing function for the new transition will be the
+   portion of the curve traversed up to the point of reversal, followed in
+   the opposite direction to the starting point. The new transition will not
+   begin with a delay, even if one was specified. If the existing transition
+   was interrupted during its delay period, the new transition will execute
+   instantly.
+
+  <p> For example, suppose there is a transition with a duration of two
+   seconds. If this transition is interrupted after 0.5 seconds and the
+   property value assigned to the original value, then the new transition
+   effect will be the reverse of the original, as if it had begun 1.5 seconds
+   in the past.
+
+  <h2 id=transition-events-><span class=secno>4 </span> Transition Events</h2>
 
   <p> The completion of a CSS Transition generates a corresponding <a
    href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>.
@@ -845,7 +872,7 @@ <h2 id=transition-events-><span class=secno>3 </span> Transition Events</h2>
     </ul>
   </dl>
 
-  <h2 id=animation-of-property-types-><span class=secno>4 </span> Animation
+  <h2 id=animation-of-property-types-><span class=secno>5 </span> Animation
    of property types</h2>
 
   <p> The following describes how each property type undergoes transition or
@@ -899,10 +926,10 @@ <h2 id=animation-of-property-types-><span class=secno>4 </span> Animation
     property was individually specified.
   </ul>
 
-  <h2 id=animatable-properties-><span class=secno>5 </span> Animatable
+  <h2 id=animatable-properties-><span class=secno>6 </span> Animatable
    properties</h2>
 
-  <h3 id=properties-from-css-><span class=secno>5.1 </span> Properties from
+  <h3 id=properties-from-css-><span class=secno>6.1 </span> Properties from
    CSS</h3>
 
   <table>
@@ -1163,7 +1190,7 @@ <h3 id=properties-from-css-><span class=secno>5.1 </span> Properties from
      <td>number
   </table>
 
-  <h3 id=properties-from-svg-><span class=secno>5.2 </span> Properties from
+  <h3 id=properties-from-svg-><span class=secno>6.2 </span> Properties from
    SVG</h3>
 
   <p> All properties defined as animatable in the SVG specification, provided
@@ -1210,7 +1237,7 @@ <h3 id=properties-from-svg-><span class=secno>5.2 </span> Properties from
        </tr>
       </table> -->
 
-  <h2 id=references><span class=secno>6 </span>References</h2>
+  <h2 id=references><span class=secno>7 </span>References</h2>
 
   <h3 class=no-num id=normative-references>Normative references</h3>
   <!--begin-normative-->

css3-transitions/Overview.src.html

@@ -64,6 +64,10 @@ <h2 class="no-num no-toc" id="abstract">Abstract</h2>
 <h2 class="no-num no-toc" id="status">Status of this document</h2>
 <!--status-->
 
+<p>
+  The <a href="ChangeLog">list of changes made to this specification</a> is
+  available.
+</p>
 
 <h2 class="no-num no-toc" id="contents">Table of contents</h2>
 <!--toc-->
@@ -639,9 +643,41 @@ <h3>
           </tr>
         </tbody>
       </table>
-      <div class="issue">
-        What should happen when a value is changed midway through a transition? One option is to simply begin a new transition from the current position. However things get interesting when from/to values are being flipped. For example you'd like symmetry on fade-in/fade-out hover effects if the user rolls over the object and rolls out before the animation finishes. This implies that there needs to be a convenient and straightforward rule for running transitions in reverse under certain circumstances. This could be controlled via a new property, or could perhaps be done simply by detecting when the from/to values are flipped.
-      </div>
+
+      <h2 id="reversing">
+        Automatically reversing transitions
+      </h2>
+      <p>
+        A common type of transition effect is when a running transition is
+        interrupted and the property is reset to its original value. An
+        example is a hover effect on an element, where the pointer enters and
+        exits the element before the effect has completed. If the outgoing and
+        incoming transitions are executed using their specified durations and
+        timing functions, the resulting effect can be distractingly
+        asymmetric. Instead, the expected behavior is that the new transition
+        should be the reverse of what has already executed.
+      </p>
+      <p>
+        If a currently executing transition is interrupted and the
+        transitioning property value is set to the original starting value for
+        the interrupted transition, and no other transition-related properties
+        have changed, then the new transition should be the reverse of the
+        interrupted transition. The new transition will execute with a
+        duration that is the elapsed time of the interrupted transition at the
+        moment it was interrupted. The timing function for the new transition
+        will be the portion of the curve traversed up to the point of
+        reversal, followed in the opposite direction to the starting point.
+        The new transition will not begin with a delay, even if one was
+        specified. If the existing transition was interrupted during its delay
+        period, the new transition will execute instantly.
+      </p>
+      <p>
+        For example, suppose there is a transition with a duration of two
+        seconds. If this transition is interrupted after 0.5 seconds and the
+        property value assigned to the original value, then the new transition
+        effect will be the reverse of the original, as if it had begun
+        1.5 seconds in the past.
+      </p>
 
       <h2>
         Transition Events