Mercurial > drafts / changeset

     1.1 --- a/css-transitions/Overview.html	Mon Nov 11 17:37:09 2013 +0800
     1.2 +++ b/css-transitions/Overview.html	Mon Nov 11 17:53:08 2013 +0800
     1.3 @@ -10,7 +10,7 @@
     1.4     rel=dcterms.rights>
     1.5    <meta content="CSS Transitions" name=dcterms.title>
     1.6    <meta content=text name=dcterms.type>
     1.7 -  <meta content=2013-10-22 name=dcterms.date>
     1.8 +  <meta content=2013-11-11 name=dcterms.date>
     1.9    <meta content="L. David Baron" name=dcterms.creator>
    1.10    <meta content=W3C name=dcterms.publisher>
    1.11    <meta content="http://dev.w3.org/csswg/css3-transitions/"
    1.12 @@ -40,7 +40,7 @@
    1.13  
    1.14     <h1>CSS Transitions</h1>
    1.15  
    1.16 -   <h2 class="no-num no-toc">Editor's Draft 22 October 2013</h2>
    1.17 +   <h2 class="no-num no-toc">Editor's Draft 11 November 2013</h2>
    1.18  
    1.19     <dl>
    1.20      <dt>This version:
    1.21 @@ -194,36 +194,37 @@
    1.22  
    1.23     <li><a href="#starting"><span class=secno>3. </span> Starting of
    1.24      transitions </a>
    1.25 +    <ul class=toc>
    1.26 +     <li><a href="#reversing"><span class=secno>3.1. </span> Automatically
    1.27 +      reversing interrupted transitions </a>
    1.28 +    </ul>
    1.29  
    1.30     <li><a href="#application"><span class=secno>4. </span> Application of
    1.31      transitions </a>
    1.32  
    1.33 -   <li><a href="#reversing"><span class=secno>5. </span> Automatically
    1.34 -    reversing interrupted transitions </a>
    1.35 -
    1.36 -   <li><a href="#transition-events"><span class=secno>6. </span> Transition
    1.37 +   <li><a href="#transition-events"><span class=secno>5. </span> Transition
    1.38      Events </a>
    1.39  
    1.40 -   <li><a href="#animatable-types"><span class=secno>7. </span> Animation of
    1.41 +   <li><a href="#animatable-types"><span class=secno>6. </span> Animation of
    1.42      property types </a>
    1.43  
    1.44 -   <li><a href="#animatable-properties"><span class=secno>8. </span>
    1.45 +   <li><a href="#animatable-properties"><span class=secno>7. </span>
    1.46      Animatable properties </a>
    1.47      <ul class=toc>
    1.48 -     <li><a href="#animatable-css"><span class=secno>8.1. </span> Properties
    1.49 +     <li><a href="#animatable-css"><span class=secno>7.1. </span> Properties
    1.50        from CSS </a>
    1.51  
    1.52 -     <li><a href="#animatable-svg"><span class=secno>8.2. </span> Properties
    1.53 +     <li><a href="#animatable-svg"><span class=secno>7.2. </span> Properties
    1.54        from SVG </a>
    1.55      </ul>
    1.56  
    1.57 -   <li><a href="#changes"><span class=secno>9. </span>Changes since Working
    1.58 +   <li><a href="#changes"><span class=secno>8. </span>Changes since Working
    1.59      Draft of 12 February 2013</a>
    1.60  
    1.61 -   <li><a href="#acknowledgments"><span class=secno>10.
    1.62 +   <li><a href="#acknowledgments"><span class=secno>9.
    1.63      </span>Acknowledgments</a>
    1.64  
    1.65 -   <li><a href="#references"><span class=secno>11. </span>References</a>
    1.66 +   <li><a href="#references"><span class=secno>10. </span>References</a>
    1.67      <ul class=toc>
    1.68       <li class=no-num><a href="#normative-references">Normative
    1.69        references</a>
    1.70 @@ -986,7 +987,9 @@
    1.71     that <a href="#style-change-event">style change event</a>.
    1.72  
    1.73    <p class=issue> This wording needs to handle already-running transitions
    1.74 -   better!
    1.75 +   better! Need to cancel a transition that hasn't moved yet when we're
    1.76 +   resetting to its start value! Define cancelling as not firing transition
    1.77 +   events. And point to other occurrence of cancelling in reversing section.
    1.78  
    1.79    <div class=note>
    1.80     <p> Note that this definition of the <a
    1.81 @@ -1042,6 +1045,17 @@
    1.82     event</a> plus the matching transition delay. The <dfn id=end-time>end
    1.83     time</dfn> of this transition is defined as the <a
    1.84     href="#start-time">start time</a> plus the matching transition duration.
    1.85 +   The <dfn id=start-value>start value</dfn> of this transition is defined as
    1.86 +   the value of the transitioning property in the <a
    1.87 +   href="#before-change-style">before-change style</a>, and the <dfn
    1.88 +   id=end-value>end value</dfn> of this transition is defined as the value of
    1.89 +   the transitioning property in the <a
    1.90 +   href="#after-change-style">after-change style</a>. Except in the cases
    1.91 +   described in the <a href="#reversing">section on reversing of
    1.92 +   transitions</a>, the <dfn
    1.93 +   id=reversing-adjusted-start-value>reversing-adjusted start value</dfn> is
    1.94 +   the same as the <a href="#start-value">start value</a>, and the <dfn
    1.95 +   id=reversing-shortening-factor>reversing shortening factor</dfn> is 1.
    1.96  
    1.97    <p> Once the transition of a property has started, it must continue running
    1.98     based on the original timing function, duration, and delay, even if the
    1.99 @@ -1065,6 +1079,84 @@
   1.100     value changes because it is inherited (directly or indirectly) from
   1.101     another element that is transitioning the same property.
   1.102  
   1.103 +  <h3 id=reversing><span class=secno>3.1. </span> Automatically reversing
   1.104 +   interrupted transitions</h3>
   1.105 +
   1.106 +  <p> Many common transitions effects involve transitions between two states,
   1.107 +   such as the transition that occurs when the mouse pointer moves over a
   1.108 +   user interface element, and then later moves out of that element. With
   1.109 +   these effects, it is common for a running transition to be interrupted
   1.110 +   before it completes, and the property reset to the starting value of that
   1.111 +   transition. An example is a hover effect on an element, where a transition
   1.112 +   starts when the pointer enters the element, and then the pointer exits the
   1.113 +   element before the effect has completed. If the outgoing and incoming
   1.114 +   transitions are executed using their specified durations and timing
   1.115 +   functions, the resulting effect can be distractingly asymmetric because
   1.116 +   the second transition takes the full specified time to move a shortened
   1.117 +   distance. Instead, the expected behavior is that the second transition is
   1.118 +   shorter.
   1.119 +
   1.120 +  <p> To meet this expectation, when a transition is started for a property
   1.121 +   on an element (henceforth, the <dfn id=new-transition>new
   1.122 +   transition</dfn>) that has a currently-running transition whose <a
   1.123 +   href="#reversing-adjusted-start-value">reversing-adjusted start value</a>
   1.124 +   is the same as the <a href="#end-value">end value</a> of the new
   1.125 +   transition (henceforth, the <dfn id=old-transition>old transition</dfn>),
   1.126 +   implementations must cancel the old transition <span class=issue>link to
   1.127 +   definition above</span> and adjust the new transition as follows (prior to
   1.128 +   following the rules for computing the <a
   1.129 +   href="#combined-duration">combined duration</a>, <a
   1.130 +   href="#start-time">start time</a>, and <a href="#end-time">end time</a>):
   1.131 +
   1.132 +  <ol>
   1.133 +   <li> The <a href="#reversing-adjusted-start-value">reversing-adjusted
   1.134 +    start value</a> of the new transition is instead the the <a
   1.135 +    href="#end-value">end value</a> of the old transition. <span
   1.136 +    class=note>Note: This represents the logical start state of the
   1.137 +    transition, and allows some calculations to ignore that the transition
   1.138 +    started before that state was reached, which in turn allows repeated
   1.139 +    reversals of the same transition to work correctly.</span>
   1.140 +
   1.141 +   <li> The <a href="#reversing-shortening-factor">reversing shortening
   1.142 +    factor</a> of the new transition is the absolute value, clamped to the
   1.143 +    range [0, 1], of the sum of:
   1.144 +    <ol>
   1.145 +     <li>the output of the timing function of the old transition at the time
   1.146 +      of the <a href="#style-change-event">style change event</a>, times the
   1.147 +      <a href="#reversing-shortening-factor">reversing shortening factor</a>
   1.148 +      of the old transition
   1.149 +
   1.150 +     <li>1 minus the <a href="#reversing-shortening-factor">reversing
   1.151 +      shortening factor</a> of the old transition.
   1.152 +    </ol>
   1.153 +    <span class=note>Note: This represents the portion of the space between
   1.154 +    the <a href="#reversing-adjusted-start-value">reversing-adjusted start
   1.155 +    value</a> and the <a href="#end-value">end value</a> that the old
   1.156 +    transition has traversed (in amounts of the value, not time), except with
   1.157 +    the absolute value and clamping to handle timing functions that have y1
   1.158 +    or y2 outside the range [0, 1].</span>
   1.159 +
   1.160 +   <li> The matching transition-duration for the new transition is multiplied
   1.161 +    by the <a href="#reversing-shortening-factor">reversing shortening
   1.162 +    factor</a>.
   1.163 +
   1.164 +   <li> If the matching transition-delay for the new transition is negative,
   1.165 +    it is also multiplied by the <a
   1.166 +    href="#reversing-shortening-factor">reversing shortening factor</a>.
   1.167 +  </ol>
   1.168 +
   1.169 +  <p class=note> Note that these rules do not fully address the problem for
   1.170 +   transition patterns that involve more than two states.
   1.171 +
   1.172 +  <p class=note> Note that these rules lead to the entire timing function of
   1.173 +   the new transition being used, rather than jumping into the middle of a
   1.174 +   timing function, which can create a jarring effect.
   1.175 +
   1.176 +  <p class=note> This was one of several possibilities that was considered by
   1.177 +   the working group. See the <a href=transition-reversing-demo>reversing
   1.178 +   demo</a> demonstrating a number of them, leading to a working group
   1.179 +   resolution made on 2013-06-07 and edits made on 2013-11-11.
   1.180 +
   1.181    <h2 id=application><span class=secno>4. </span> Application of transitions</h2>
   1.182  
   1.183    <p> When a property on an element is undergoing a transition (that is, when
   1.184 @@ -1094,97 +1186,18 @@
   1.185    <p> If the current time is at or before the <a href="#start-time">start
   1.186     time</a> of the transition (that is, during the delay phase of the
   1.187     transition), this value is a specified style that will compute to the <a
   1.188 -   href="#before-change-style">before-change style</a> in the <a
   1.189 -   href="#style-change-event">style change event</a> in which the transition
   1.190 -   was started.
   1.191 +   href="#start-value">start value</a> of the transition.
   1.192  
   1.193    <p> If the current time is after the <a href="#start-time">start time</a>
   1.194     of the transition (that is, during the duration phase of the transition),
   1.195     this value is a specified style that will compute to the <a
   1.196     href="#animatable-types">result of interpolating the property</a> using
   1.197 -   the <a href="#before-change-style">before-change style</a> for the
   1.198 -   property as <i>V</i><sub>start</sub>, using the <a
   1.199 -   href="#after-change-style">after-change style</a> for the property as
   1.200 -   <i>V</i><sub>end</sub>, and using (current time - start time) / (end time
   1.201 -   - start time) as the input to the timing function. (The <a
   1.202 -   href="#before-change-style">before-change style</a> and <a
   1.203 -   href="#after-change-style">after-change style</a> <a
   1.204 -   href="#style-change-event">style change event</a> in which the transition
   1.205 -   was started.)
   1.206 -
   1.207 -  <h2 id=reversing><span class=secno>5. </span> Automatically reversing
   1.208 -   interrupted transitions</h2>
   1.209 -
   1.210 -  <p> A common type of transition effect is when a running transition is
   1.211 -   interrupted and the property is reset to its original value. An example is
   1.212 -   a hover effect on an element, where the pointer enters and exits the
   1.213 -   element before the effect has completed. If the outgoing and incoming
   1.214 -   transitions are executed using their specified durations and timing
   1.215 -   functions, the resulting effect can be distractingly asymmetric. Instead,
   1.216 -   the expected behavior is that the new transition should be the reverse of
   1.217 -   what has already executed.
   1.218 -
   1.219 -  <p> If a running transition with duration T, executing so far for duration
   1.220 -   TE, from state A, to state B, is interrupted by a property change that
   1.221 -   would start a new transition back to state A, and all the transition
   1.222 -   attributes are the same (duration, delay and timing function), then the
   1.223 -   new transition must reverse the effect. The new transition must:
   1.224 -
   1.225 -  <ol>
   1.226 -   <li> Use the B and A states as its "from" and "to" states respectively. It
   1.227 -    does not use the current value as its from state, due to the rules below.
   1.228 -
   1.229 -   <li> Execute with the same duration T, but starting as if the transition
   1.230 -    had already begun, without any transition delay, at the moment which
   1.231 -    would cause the new transition to finish in TE from the moment of
   1.232 -    interruption. In other words, the new transition will execute as if it
   1.233 -    started T-TE in the past.
   1.234 -
   1.235 -   <li> Use a timing function that is the portion of the curve traversed up
   1.236 -    to the moment of interruption, followed in the opposite direction
   1.237 -    (towards the starting point). This will make the transition appear as if
   1.238 -    it is playing backwards.
   1.239 -
   1.240 -   <li> Ignore any transition delay.
   1.241 -  </ol>
   1.242 -
   1.243 -  <p> For example, suppose there is a transition with a duration of two
   1.244 -   seconds. If this transition is interrupted after 0.5 seconds and the
   1.245 -   property value assigned to the original value, then the new transition
   1.246 -   effect will be the reverse of the original, as if it had begun 1.5 seconds
   1.247 -   in the past.
   1.248 -
   1.249 -  <p> Note that by using the defined from and to states for the reversing
   1.250 -   transition, it is also possible that it may reverse again, if interrupted;
   1.251 -   for example, if the transition reversing to state A was again interrupted
   1.252 -   by a property change to state B.
   1.253 -
   1.254 -  <p class=issue>Issue: This introduces the concept of reversing a timing
   1.255 -   function, which the spec has otherwise resisted doing, and also introduces
   1.256 -   a discontinuity between transitions that have almost completed (which get
   1.257 -   automatically reversed and thus have their timing function reversed) and
   1.258 -   transitions that have fully completed (where the reversal doesn't lead to
   1.259 -   the timing function being reversed). An alternative proposal that avoids
   1.260 -   this is to follow the normal timing function algorithm, except multiply
   1.261 -   the duration (and also shorten any negative delay) by the (output) value
   1.262 -   of the transition timing function of the incomplete transition at the time
   1.263 -   it was interrupted, and, to account for multiple reverses in sequence, to
   1.264 -   divide by the shortening applied to the transition being interrupted. For
   1.265 -   more details see this thread: <a
   1.266 -   href="http://lists.w3.org/Archives/Public/www-style/2009Nov/thread.html#msg302">November
   1.267 -   2009 part</a>, <a
   1.268 -   href="http://lists.w3.org/Archives/Public/www-style/2009Dec/thread.html#msg319">December
   1.269 -   2009 part</a>, <a
   1.270 -   href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January
   1.271 -   2010 part</a>. Also see: <a
   1.272 -   href="http://lists.w3.org/Archives/Public/public-fx/2012AprJun/0107.html">minutes
   1.273 -   2012-05-09</a> (and <a
   1.274 -   href="http://www.w3.org/Graphics/fx/track/actions/77">action</a>), <a
   1.275 -   href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0262.html">minutes
   1.276 -   2012-10-30</a>, <a href=transition-reversing-demo>reversing demo</a>.
   1.277 -   Working Group resolution from 2013-06-07 needs to be edited.
   1.278 -
   1.279 -  <h2 id=transition-events><span class=secno>6. </span><a
   1.280 +   the <a href="#start-value">start value</a> of the transition as
   1.281 +   <i>V</i><sub>start</sub>, using the <a href="#end-value">end value</a> of
   1.282 +   the transition as <i>V</i><sub>end</sub>, and using (current time - start
   1.283 +   time) / (end time - start time) as the input to the timing function.
   1.284 +
   1.285 +  <h2 id=transition-events><span class=secno>5. </span><a
   1.286     id=transition-events-> Transition Events </a></h2>
   1.287  
   1.288    <p> The completion of a CSS Transition generates a corresponding <a
   1.289 @@ -1299,7 +1312,7 @@
   1.290      </ul>
   1.291    </dl>
   1.292  
   1.293 -  <h2 id=animatable-types><span class=secno>7. </span><a
   1.294 +  <h2 id=animatable-types><span class=secno>6. </span><a
   1.295     id=animation-of-property-types-> Animation of property types </a></h2>
   1.296  
   1.297    <p> When interpolating between two values, <i>V</i><sub>start</sub> and
   1.298 @@ -1416,7 +1429,7 @@
   1.299     shorthand properties and the ‘<code class=css>all</code>’ value is
   1.300     applied to any properties (in the shorthand) that can be animated.
   1.301  
   1.302 -  <h2 id=animatable-properties><span class=secno>8. </span><a
   1.303 +  <h2 id=animatable-properties><span class=secno>7. </span><a
   1.304     id=animatable-properties-> Animatable properties </a></h2>
   1.305    <!--
   1.306        As resolved in
   1.307 @@ -1450,7 +1463,7 @@
   1.308     the property animates. Such definitions override those given in this
   1.309     specification.
   1.310  
   1.311 -  <h3 id=animatable-css><span class=secno>8.1. </span><a
   1.312 +  <h3 id=animatable-css><span class=secno>7.1. </span><a
   1.313     id=properties-from-css-> Properties from CSS </a></h3>
   1.314  
   1.315    <p> The following definitions define the animation behavior for properties
   1.316 @@ -1691,7 +1704,7 @@
   1.317       <td>as <a href="#animtype-integer">integer</a>
   1.318    </table>
   1.319  
   1.320 -  <h3 id=animatable-svg><span class=secno>8.2. </span><a
   1.321 +  <h3 id=animatable-svg><span class=secno>7.2. </span><a
   1.322     id=properties-from-svg-> Properties from SVG </a></h3>
   1.323  
   1.324    <p> All properties defined as animatable in the SVG specification, provided
   1.325 @@ -1738,7 +1751,7 @@
   1.326         </tr>
   1.327        </table> -->
   1.328  
   1.329 -  <h2 id=changes><span class=secno>9. </span>Changes since Working Draft of
   1.330 +  <h2 id=changes><span class=secno>8. </span>Changes since Working Draft of
   1.331     12 February 2013</h2>
   1.332  
   1.333    <p>The following are the substantive changes made since the <a
   1.334 @@ -1795,7 +1808,7 @@
   1.335     href="http://www.w3.org/TR/2013/WD-css3-transitions-20130212/ChangeLog">the
   1.336     ChangeLog</a>, and the above version control logs.
   1.337  
   1.338 -  <h2 id=acknowledgments><span class=secno>10. </span>Acknowledgments</h2>
   1.339 +  <h2 id=acknowledgments><span class=secno>9. </span>Acknowledgments</h2>
   1.340  
   1.341    <p>Thanks especially to the feedback from Tab Atkins, Carine Bournez, Aryeh
   1.342     Gregor, Vincent Hardy, Anne van Kesteren, Cameron McCormack, Alex
   1.343 @@ -1803,7 +1816,7 @@
   1.344     href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
   1.345     community.
   1.346  
   1.347 -  <h2 id=references><span class=secno>11. </span>References</h2>
   1.348 +  <h2 id=references><span class=secno>10. </span>References</h2>
   1.349  
   1.350    <h3 class=no-num id=normative-references>Normative references</h3>
   1.351    <!--begin-normative-->
   1.352 @@ -2022,6 +2035,22 @@
   1.353     <li>end time, <a href="#end-time"
   1.354      title="section 3."><strong>3.</strong></a>
   1.355  
   1.356 +   <li>end value, <a href="#end-value"
   1.357 +    title="section 3."><strong>3.</strong></a>
   1.358 +
   1.359 +   <li>new transition, <a href="#new-transition"
   1.360 +    title="section 3.1."><strong>3.1.</strong></a>
   1.361 +
   1.362 +   <li>old transition, <a href="#old-transition"
   1.363 +    title="section 3.1."><strong>3.1.</strong></a>
   1.364 +
   1.365 +   <li>reversing-adjusted start value, <a
   1.366 +    href="#reversing-adjusted-start-value"
   1.367 +    title="section 3."><strong>3.</strong></a>
   1.368 +
   1.369 +   <li>reversing shortening factor, <a href="#reversing-shortening-factor"
   1.370 +    title="section 3."><strong>3.</strong></a>
   1.371 +
   1.372     <li>&lt;single-transition&gt;, <a href="#single-transition"
   1.373      title="section 2.5."><strong>2.5.</strong></a>
   1.374  
   1.375 @@ -2036,6 +2065,9 @@
   1.376     <li>start time, <a href="#start-time"
   1.377      title="section 3."><strong>3.</strong></a>
   1.378  
   1.379 +   <li>start value, <a href="#start-value"
   1.380 +    title="section 3."><strong>3.</strong></a>
   1.381 +
   1.382     <li>style change event, <a href="#style-change-event"
   1.383      title="section 3."><strong>3.</strong></a>
   1.384  
   1.385 @@ -2049,23 +2081,23 @@
   1.386      title="section 2.2."><strong>2.2.</strong></a>
   1.387  
   1.388     <li>transitionend, <a href="#transitionend"
   1.389 -    title="section 6."><strong>6.</strong></a>
   1.390 +    title="section 5."><strong>5.</strong></a>
   1.391  
   1.392     <li>TransitionEvent, <a href="#Events-TransitionEvent"
   1.393 -    title="section 6."><strong>6.</strong></a>
   1.394 +    title="section 5."><strong>5.</strong></a>
   1.395      <ul>
   1.396       <li>elapsedTime, <a href="#Events-TransitionEvent-elapsedTime"
   1.397 -      title="section 6."><strong>6.</strong></a>
   1.398 +      title="section 5."><strong>5.</strong></a>
   1.399  
   1.400       <li>propertyName, <a href="#Events-TransitionEvent-propertyName"
   1.401 -      title="section 6."><strong>6.</strong></a>
   1.402 +      title="section 5."><strong>5.</strong></a>
   1.403  
   1.404       <li>pseudoElement, <a href="#Events-TransitionEvent-pseudoElement"
   1.405 -      title="section 6."><strong>6.</strong></a>
   1.406 +      title="section 5."><strong>5.</strong></a>
   1.407      </ul>
   1.408  
   1.409     <li>TransitionEventInit, <a href="#TransitionEventInit"
   1.410 -    title="section 6."><strong>6.</strong></a>
   1.411 +    title="section 5."><strong>5.</strong></a>
   1.412  
   1.413     <li>transition-property, <a href="#transition-property"
   1.414      title="section 2.1."><strong>2.1.</strong></a>

     2.1 --- a/css-transitions/Overview.src.html	Mon Nov 11 17:37:09 2013 +0800
     2.2 +++ b/css-transitions/Overview.src.html	Mon Nov 11 17:53:08 2013 +0800
     2.3 @@ -979,6 +979,10 @@
     2.4  
     2.5        <p class="issue">
     2.6          This wording needs to handle already-running transitions better!
     2.7 +        Need to cancel a transition that hasn't moved yet when we're
     2.8 +        resetting to its start value!  Define cancelling as not
     2.9 +        firing transition events.  And point to other occurrence of
    2.10 +        cancelling in reversing section.
    2.11        </p>
    2.12  
    2.13        <div class="note">
    2.14 @@ -1043,6 +1047,18 @@
    2.15          the matching transition delay.
    2.16          The <dfn>end time</dfn> of this transition is defined as
    2.17          the <span>start time</span> plus the matching transition duration.
    2.18 +        The <dfn>start value</dfn> of this transition is defined as
    2.19 +        the value of the transitioning property
    2.20 +        in the <span>before-change style</span>,
    2.21 +        and the <dfn>end value</dfn> of this transition is defined as
    2.22 +        the value of the transitioning property
    2.23 +        in the <span>after-change style</span>.
    2.24 +        Except in the cases described
    2.25 +        in the <a href="#reversing">section on reversing of
    2.26 +        transitions</a>,
    2.27 +        the <dfn>reversing-adjusted start value</dfn> is the same as
    2.28 +        the <span>start value</span>,
    2.29 +        and the <dfn>reversing shortening factor</dfn> is 1.
    2.30        </p>
    2.31  
    2.32        <p>
    2.33 @@ -1069,6 +1085,108 @@
    2.34          property.
    2.35        </p>
    2.36  
    2.37 +      <h3 id="reversing">
    2.38 +        Automatically reversing interrupted transitions
    2.39 +      </h3>
    2.40 +      <p>
    2.41 +        Many common transitions effects involve transitions between two states,
    2.42 +        such as the transition that occurs when the mouse pointer moves
    2.43 +        over a user interface element, and then later moves out of that element.
    2.44 +        With these effects, it is common for a running transition
    2.45 +        to be interrupted before it completes,
    2.46 +        and the property reset to the starting value of that transition.
    2.47 +        An example is a hover effect on an element,
    2.48 +        where a transition starts when the pointer enters the element,
    2.49 +        and then the pointer exits the element before the effect has completed.
    2.50 +        If the outgoing and incoming transitions
    2.51 +        are executed using their specified durations and timing functions,
    2.52 +        the resulting effect can be distractingly asymmetric
    2.53 +        because the second transition
    2.54 +        takes the full specified time to move a shortened distance.
    2.55 +        Instead, the expected behavior is that the second transition is shorter.
    2.56 +      </p>
    2.57 +
    2.58 +      <p>
    2.59 +        To meet this expectation,
    2.60 +        when a transition is started for a property on an element
    2.61 +        (henceforth, the <dfn>new transition</dfn>)
    2.62 +        that has a currently-running transition whose
    2.63 +        <span>reversing-adjusted start value</span> is the same as the
    2.64 +        <span>end value</span> of the new transition
    2.65 +        (henceforth, the <dfn>old transition</dfn>), implementations
    2.66 +        must cancel the old transition <span class="issue">link to
    2.67 +        definition above</span> and adjust the new transition as follows
    2.68 +        (prior to following the rules for computing the <span>combined
    2.69 +        duration</span>, <span>start time</span>, and <span>end
    2.70 +        time</span>):
    2.71 +      </p>
    2.72 +
    2.73 +      <ol>
    2.74 +
    2.75 +        <li>
    2.76 +          The <span>reversing-adjusted start value</span> of the new
    2.77 +          transition is instead the the <span>end value</span> of the
    2.78 +          old transition.
    2.79 +          <span class="note">Note: This represents the logical start state of
    2.80 +          the transition, and allows some calculations to ignore that
    2.81 +          the transition started before that state was reached, which
    2.82 +          in turn allows repeated reversals of the same transition to
    2.83 +          work correctly.</span>
    2.84 +        </li>
    2.85 +
    2.86 +        <li>
    2.87 +          The <span>reversing shortening factor</span> of the new
    2.88 +          transition is the absolute value, clamped to the range [0, 1],
    2.89 +          of the sum of:
    2.90 +          <ol>
    2.91 +            <li>the output of the timing function of the old transition
    2.92 +            at the time of the <span>style change event</span>,
    2.93 +            times the <span>reversing shortening factor</span> of the
    2.94 +            old transition</li>
    2.95 +            <li>1 minus the <span>reversing shortening factor</span> of
    2.96 +            the old transition.</li>
    2.97 +          </ol>
    2.98 +          <span class="note">Note: This represents the portion of the
    2.99 +          space between the <span>reversing-adjusted start value</span>
   2.100 +          and the <span>end value</span> that the old transition has
   2.101 +          traversed (in amounts of the value, not time), except with the
   2.102 +          absolute value and clamping to handle timing functions that
   2.103 +          have y1 or y2 outside the range [0, 1].</span>
   2.104 +        </li>
   2.105 +
   2.106 +        <li>
   2.107 +          The matching transition-duration for the new transition is
   2.108 +          multiplied by the
   2.109 +          <span>reversing shortening factor</span>.
   2.110 +        </li>
   2.111 +
   2.112 +        <li>
   2.113 +          If the matching transition-delay for the new transition is
   2.114 +          negative, it is also multiplied by the
   2.115 +          <span>reversing shortening factor</span>.
   2.116 +        </li>
   2.117 +
   2.118 +      </ol>
   2.119 +
   2.120 +      <p class="note">
   2.121 +        Note that these rules do not fully address the problem for
   2.122 +        transition patterns that involve more than two states.
   2.123 +      </p>
   2.124 +
   2.125 +      <p class="note">
   2.126 +        Note that these rules lead to the entire timing function of the
   2.127 +        new transition being used, rather than jumping into the middle
   2.128 +        of a timing function, which can create a jarring effect.
   2.129 +      </p>
   2.130 +
   2.131 +      <p class="note">
   2.132 +        This was one of several possibilities that was considered by the
   2.133 +        working group.  See the
   2.134 +        <a href="transition-reversing-demo">reversing demo</a>
   2.135 +        demonstrating a number of them, leading to a working group
   2.136 +        resolution made on 2013-06-07 and edits made on 2013-11-11.
   2.137 +      </p>
   2.138 +
   2.139        <h2 id="application">
   2.140          Application of transitions
   2.141        </h2>
   2.142 @@ -1113,8 +1231,7 @@
   2.143          <span>start time</span> of the transition
   2.144          (that is, during the delay phase of the transition),
   2.145          this value is a specified style that will compute
   2.146 -        to the <span>before-change style</span> in the
   2.147 -        <span>style change event</span> in which the transition was started.
   2.148 +        to the <span>start value</span> of the transition.
   2.149        </p>
   2.150  
   2.151        <p>
   2.152 @@ -1123,98 +1240,12 @@
   2.153          (that is, during the duration phase of the transition),
   2.154          this value is a specified style that will compute
   2.155          to the <a href="#animatable-types">result of interpolating the property</a>
   2.156 -        using the <span>before-change style</span> for the property as
   2.157 +        using the <span>start value</span> of the transition as
   2.158          <i>V</i><sub>start</sub>,
   2.159 -        using the <span>after-change style</span> for the property as
   2.160 +        using the <span>end value</span> of the transition as
   2.161          <i>V</i><sub>end</sub>,
   2.162          and using (current time - start time) / (end time - start time)
   2.163          as the input to the timing function.
   2.164 -        (The <span>before-change style</span> and <span>after-change style</span>
   2.165 -        <span>style change event</span> in which the transition was started.)
   2.166 -      </p>
   2.167 -
   2.168 -      <h2 id="reversing">
   2.169 -        Automatically reversing interrupted transitions
   2.170 -      </h2>
   2.171 -      <p>
   2.172 -        A common type of transition effect is when a running transition is
   2.173 -        interrupted and the property is reset to its original value. An
   2.174 -        example is a hover effect on an element, where the pointer enters and
   2.175 -        exits the element before the effect has completed. If the outgoing and
   2.176 -        incoming transitions are executed using their specified durations and
   2.177 -        timing functions, the resulting effect can be distractingly
   2.178 -        asymmetric. Instead, the expected behavior is that the new transition
   2.179 -        should be the reverse of what has already executed.
   2.180 -      </p>
   2.181 -      
   2.182 -      <p>
   2.183 -        If a running transition with duration T, executing so far for duration TE, 
   2.184 -        from state A, to state B, is interrupted by
   2.185 -        a property change that would start a new transition back to state A, and
   2.186 -        all the transition attributes are the same (duration, delay and timing function),
   2.187 -        then the new transition must reverse the effect. The new transition must:
   2.188 -      </p>
   2.189 -      
   2.190 -      <ol>
   2.191 -        <li>
   2.192 -          Use the B and A states as its "from" and "to" states respectively. It
   2.193 -          does not use the current value as its from state, due to the rules below.
   2.194 -        </li>
   2.195 -        <li>
   2.196 -          Execute with the same duration T, but starting as if the transition had
   2.197 -          already begun, without any transition delay, at the moment which would
   2.198 -          cause the new transition to finish in TE from the moment of interruption. In other
   2.199 -          words, the new transition will execute as if it started T-TE in the past.
   2.200 -        </li>
   2.201 -        <li>
   2.202 -          Use a timing function that is the portion of the curve traversed up
   2.203 -          to the moment of interruption, followed in the opposite direction (towards
   2.204 -          the starting point). This will make the transition appear as if it 
   2.205 -          is playing backwards.
   2.206 -        </li>
   2.207 -        <li>
   2.208 -          Ignore any transition delay.
   2.209 -        </li>
   2.210 -      </ol>
   2.211 -
   2.212 -      <p>
   2.213 -        For example, suppose there is a transition with a duration of two
   2.214 -        seconds. If this transition is interrupted after 0.5 seconds and the
   2.215 -        property value assigned to the original value, then the new transition
   2.216 -        effect will be the reverse of the original, as if it had begun
   2.217 -        1.5 seconds in the past.
   2.218 -      </p>
   2.219 -
   2.220 -      <p>
   2.221 -        Note that by using the defined from and to states for the reversing
   2.222 -        transition, it is also possible that it may reverse again, if
   2.223 -        interrupted; for example, if the transition reversing to state A was
   2.224 -        again interrupted by a property change to state B.
   2.225 -      </p>
   2.226 -
   2.227 -      <p class="issue">Issue:
   2.228 -        This introduces the concept of reversing a timing function,
   2.229 -        which the spec has otherwise resisted doing, and also introduces
   2.230 -        a discontinuity between transitions that have
   2.231 -        almost completed (which get automatically reversed and thus have
   2.232 -        their timing function reversed) and transitions that have fully
   2.233 -        completed (where the reversal doesn't lead to the timing
   2.234 -        function being reversed).  An alternative proposal that avoids
   2.235 -        this is to follow the normal timing function algorithm, except
   2.236 -        multiply the duration (and also shorten any negative delay) by
   2.237 -        the (output) value of the transition timing function of the
   2.238 -        incomplete transition at the time it was interrupted, and, to
   2.239 -        account for multiple reverses in sequence, to divide by the
   2.240 -        shortening applied to the transition being interrupted.  For
   2.241 -        more details see this thread:
   2.242 -        <a href="http://lists.w3.org/Archives/Public/www-style/2009Nov/thread.html#msg302">November 2009 part</a>,
   2.243 -        <a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/thread.html#msg319">December 2009 part</a>,
   2.244 -        <a href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January 2010 part</a>.
   2.245 -        Also see:
   2.246 -        <a href="http://lists.w3.org/Archives/Public/public-fx/2012AprJun/0107.html">minutes 2012-05-09</a> (and <a href="http://www.w3.org/Graphics/fx/track/actions/77">action</a>),
   2.247 -        <a href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0262.html">minutes 2012-10-30</a>,
   2.248 -        <a href="transition-reversing-demo">reversing demo</a>.
   2.249 -        Working Group resolution from 2013-06-07 needs to be edited.
   2.250        </p>
   2.251  
   2.252        <h2 id="transition-events"><a id="transition-events-">