Tue, 10 Sep 2013 14:32:19 +0200
[css-transitions] Move paragraphs about how to interpolate values to the new (and now more appropriate) section on how transitions apply.
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:06:36 2013 +0200 1.2 +++ b/css-transitions/Overview.html Tue Sep 10 14:32:19 2013 +0200 1.3 @@ -1093,16 +1093,30 @@ 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 <a 1.8 - href="#animatable-types">result of interpolating the property</a> using 1.9 - the <span>before-change style</span> for the property as 1.10 - <i>V</i><sub>start</sub>, using the <span>after-change style</span> for 1.11 - the property as <i>V</i><sub>end</sub>, and using (current time - start 1.12 - time) / (end time - start time) as the input to the timing function. (The 1.13 + this value is a specified style that will compute to the result of 1.14 + interpolating the property using the <span>before-change style</span> for 1.15 + the property as <i>V</i><sub>start</sub>, using the <span>after-change 1.16 + style</span> for the property as <i>V</i><sub>end</sub>, and using 1.17 + (current time - start time) / (end time - start time) as the input to the 1.18 + timing function (see ‘<a href="#transition-timing-function"><code 1.19 + class=property>transition-timing-function</code></a>’). (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 @@ -1293,19 +1307,6 @@ 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:06:36 2013 +0200 2.2 +++ b/css-transitions/Overview.src.html Tue Sep 10 14:32:19 2013 +0200 2.3 @@ -1118,17 +1118,38 @@ 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 <a href="#animatable-types">result of interpolating the property</a> 2.8 + to the result of interpolating the property 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. 2.15 + as the input to the timing function (see 'transition-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 @@ -1324,27 +1345,6 @@ 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>