Tue, 10 Sep 2013 14:37:08 +0200
[css-transitions] On second thought, revert the previous change.
css-transitions/Overview.html | file | annotate | diff | comparison | revisions | |
css-transitions/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-transitions/Overview.html Tue Sep 10 14:32:19 2013 +0200 1.2 +++ b/css-transitions/Overview.html Tue Sep 10 14:37:08 2013 +0200 1.3 @@ -1093,30 +1093,16 @@ 1.4 1.5 <p> If the current time is after the <a href="#start-time">start time</a> 1.6 of the transition (that is, during the duration phase of the transition), 1.7 - this value is a specified style that will compute to the result of 1.8 - interpolating the property using the <span>before-change style</span> for 1.9 - the property as <i>V</i><sub>start</sub>, using the <span>after-change 1.10 - style</span> for the property as <i>V</i><sub>end</sub>, and using 1.11 - (current time - start time) / (end time - start time) as the input to the 1.12 - timing function (see ‘<a href="#transition-timing-function"><code 1.13 - class=property>transition-timing-function</code></a>’). (The 1.14 + this value is a specified style that will compute to the <a 1.15 + href="#animatable-types">result of interpolating the property</a> using 1.16 + the <span>before-change style</span> for the property as 1.17 + <i>V</i><sub>start</sub>, using the <span>after-change style</span> for 1.18 + the property as <i>V</i><sub>end</sub>, and using (current time - start 1.19 + time) / (end time - start time) as the input to the timing function. (The 1.20 <span>before-change style</span> and <span>after-change style</span> <a 1.21 href="#style-change-event">style change event</a> in which the transition 1.22 was started.) 1.23 1.24 - <p> When interpolating between two values, <i>V</i><sub>start</sub> and 1.25 - <i>V</i><sub>end</sub>, interpolation is done using the output <i>p</i> of 1.26 - the timing function, which gives the portion of the value space that the 1.27 - interpolation has crossed. Thus the result of the interpolation is 1.28 - <i>V</i><sub>res</sub> = (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> + 1.29 - <i>p</i> ⋅ <i>V</i><sub>end</sub>. 1.30 - 1.31 - <p> However, if this value (<i>V</i><sub>res</sub>) is outside the allowed 1.32 - range of values for the property, then it is clamped to that range. This 1.33 - can occur if <i>p</i> is outside of the range 0 to 1, which can occur if a 1.34 - timing function is specified with a <i>y1</i> or <i>y2</i> that is outside 1.35 - the range 0 to 1. 1.36 - 1.37 <h2 id=reversing><span class=secno>5. </span> Automatically reversing 1.38 interrupted transitions</h2> 1.39 1.40 @@ -1307,6 +1293,19 @@ 1.41 <h2 id=animatable-types><span class=secno>7. </span><a 1.42 id=animation-of-property-types-> Animation of property types </a></h2> 1.43 1.44 + <p> When interpolating between two values, <i>V</i><sub>start</sub> and 1.45 + <i>V</i><sub>end</sub>, interpolation is done using the output <i>p</i> of 1.46 + the timing function, which gives the portion of the value space that the 1.47 + interpolation has crossed. Thus the result of the interpolation is 1.48 + <i>V</i><sub>res</sub> = (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> + 1.49 + <i>p</i> ⋅ <i>V</i><sub>end</sub>. 1.50 + 1.51 + <p> However, if this value (<i>V</i><sub>res</sub>) is outside the allowed 1.52 + range of values for the property, then it is clamped to that range. This 1.53 + can occur if <i>p</i> is outside of the range 0 to 1, which can occur if a 1.54 + timing function is specified with a <i>y1</i> or <i>y2</i> that is outside 1.55 + the range 0 to 1. 1.56 + 1.57 <p> The following describes how each property type undergoes transition or 1.58 animation. 1.59
2.1 --- a/css-transitions/Overview.src.html Tue Sep 10 14:32:19 2013 +0200 2.2 +++ b/css-transitions/Overview.src.html Tue Sep 10 14:37:08 2013 +0200 2.3 @@ -1118,38 +1118,17 @@ 2.4 <span>start time</span> of the transition 2.5 (that is, during the duration phase of the transition), 2.6 this value is a specified style that will compute 2.7 - to the result of interpolating the property 2.8 + to the <a href="#animatable-types">result of interpolating the property</a> 2.9 using the <span>before-change style</span> for the property as 2.10 <i>V</i><sub>start</sub>, 2.11 using the <span>after-change style</span> for the property as 2.12 <i>V</i><sub>end</sub>, 2.13 and using (current time - start time) / (end time - start time) 2.14 - as the input to the timing function (see 'transition-timing-function'). 2.15 + as the input to the timing function. 2.16 (The <span>before-change style</span> and <span>after-change style</span> 2.17 <span>style change event</span> in which the transition was started.) 2.18 </p> 2.19 2.20 - <p> 2.21 - When interpolating between two values, 2.22 - <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>, 2.23 - interpolation is done using the output <i>p</i> of the timing function, 2.24 - which gives the portion of the value space 2.25 - that the interpolation has crossed. 2.26 - Thus the result of the interpolation is 2.27 - <i>V</i><sub>res</sub> = 2.28 - (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> + 2.29 - <i>p</i> ⋅ <i>V</i><sub>end</sub>. 2.30 - </p> 2.31 - 2.32 - <p> 2.33 - However, if this value (<i>V</i><sub>res</sub>) 2.34 - is outside the allowed range of values for the property, 2.35 - then it is clamped to that range. 2.36 - This can occur if <i>p</i> is outside of the range 0 to 1, 2.37 - which can occur if a timing function is specified 2.38 - with a <i>y1</i> or <i>y2</i> that is outside the range 0 to 1. 2.39 - </p> 2.40 - 2.41 <h2 id="reversing"> 2.42 Automatically reversing interrupted transitions 2.43 </h2> 2.44 @@ -1345,6 +1324,27 @@ 2.45 </a></h2> 2.46 2.47 <p> 2.48 + When interpolating between two values, 2.49 + <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>, 2.50 + interpolation is done using the output <i>p</i> of the timing function, 2.51 + which gives the portion of the value space 2.52 + that the interpolation has crossed. 2.53 + Thus the result of the interpolation is 2.54 + <i>V</i><sub>res</sub> = 2.55 + (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> + 2.56 + <i>p</i> ⋅ <i>V</i><sub>end</sub>. 2.57 + </p> 2.58 + 2.59 + <p> 2.60 + However, if this value (<i>V</i><sub>res</sub>) 2.61 + is outside the allowed range of values for the property, 2.62 + then it is clamped to that range. 2.63 + This can occur if <i>p</i> is outside of the range 0 to 1, 2.64 + which can occur if a timing function is specified 2.65 + with a <i>y1</i> or <i>y2</i> that is outside the range 0 to 1. 2.66 + </p> 2.67 + 2.68 + <p> 2.69 The following describes how each property type undergoes transition or 2.70 animation. 2.71 </p>