1.1 --- a/css-transitions/Overview.src.html Tue Sep 10 14:32:19 2013 +0200 1.2 +++ b/css-transitions/Overview.src.html Tue Sep 10 14:37:08 2013 +0200 1.3 @@ -1118,38 +1118,17 @@ 1.4 <span>start time</span> of the transition 1.5 (that is, during the duration phase of the transition), 1.6 this value is a specified style that will compute 1.7 - to the result of interpolating the property 1.8 + to the <a href="#animatable-types">result of interpolating the property</a> 1.9 using the <span>before-change style</span> for the property as 1.10 <i>V</i><sub>start</sub>, 1.11 using the <span>after-change style</span> for the property as 1.12 <i>V</i><sub>end</sub>, 1.13 and using (current time - start time) / (end time - start time) 1.14 - as the input to the timing function (see 'transition-timing-function'). 1.15 + as the input to the timing function. 1.16 (The <span>before-change style</span> and <span>after-change style</span> 1.17 <span>style change event</span> in which the transition was started.) 1.18 </p> 1.19 1.20 - <p> 1.21 - When interpolating between two values, 1.22 - <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>, 1.23 - interpolation is done using the output <i>p</i> of the timing function, 1.24 - which gives the portion of the value space 1.25 - that the interpolation has crossed. 1.26 - Thus the result of the interpolation is 1.27 - <i>V</i><sub>res</sub> = 1.28 - (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> + 1.29 - <i>p</i> ⋅ <i>V</i><sub>end</sub>. 1.30 - </p> 1.31 - 1.32 - <p> 1.33 - However, if this value (<i>V</i><sub>res</sub>) 1.34 - is outside the allowed range of values for the property, 1.35 - then it is clamped to that range. 1.36 - This can occur if <i>p</i> is outside of the range 0 to 1, 1.37 - which can occur if a timing function is specified 1.38 - with a <i>y1</i> or <i>y2</i> that is outside the range 0 to 1. 1.39 - </p> 1.40 - 1.41 <h2 id="reversing"> 1.42 Automatically reversing interrupted transitions 1.43 </h2> 1.44 @@ -1345,6 +1324,27 @@ 1.45 </a></h2> 1.46 1.47 <p> 1.48 + When interpolating between two values, 1.49 + <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>, 1.50 + interpolation is done using the output <i>p</i> of the timing function, 1.51 + which gives the portion of the value space 1.52 + that the interpolation has crossed. 1.53 + Thus the result of the interpolation is 1.54 + <i>V</i><sub>res</sub> = 1.55 + (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> + 1.56 + <i>p</i> ⋅ <i>V</i><sub>end</sub>. 1.57 + </p> 1.58 + 1.59 + <p> 1.60 + However, if this value (<i>V</i><sub>res</sub>) 1.61 + is outside the allowed range of values for the property, 1.62 + then it is clamped to that range. 1.63 + This can occur if <i>p</i> is outside of the range 0 to 1, 1.64 + which can occur if a timing function is specified 1.65 + with a <i>y1</i> or <i>y2</i> that is outside the range 0 to 1. 1.66 + </p> 1.67 + 1.68 + <p> 1.69 The following describes how each property type undergoes transition or 1.70 animation. 1.71 </p>