[css-transitions] Move paragraphs about how to interpolate values to the new (and now more appropriate) section on how transitions apply.

Author: dbaron

css-transitions/Overview.html

@@ -1093,16 +1093,30 @@ <h2 id=application><span class=secno>4. </span> Application of transitions</h2>
 
   <p> If the current time is after the <a href="#start-time">start time</a>
    of the transition (that is, during the duration phase of the transition),
-   this value is a specified style that will compute to the <a
-   href="#animatable-types">result of interpolating the property</a> using
-   the <span>before-change style</span> for the property as
-   <i>V</i><sub>start</sub>, using the <span>after-change style</span> for
-   the property as <i>V</i><sub>end</sub>, and using (current time - start
-   time) / (end time - start time) as the input to the timing function. (The
+   this value is a specified style that will compute to the result of
+   interpolating the property using the <span>before-change style</span> for
+   the property as <i>V</i><sub>start</sub>, using the <span>after-change
+   style</span> for the property as <i>V</i><sub>end</sub>, and using
+   (current time - start time) / (end time - start time) as the input to the
+   timing function (see ‘<a href="#transition-timing-function"><code
+   class=property>transition-timing-function</code></a>’). (The
    <span>before-change style</span> and <span>after-change style</span> <a
    href="#style-change-event">style change event</a> in which the transition
    was started.)
 
+  <p> When interpolating between two values, <i>V</i><sub>start</sub> and
+   <i>V</i><sub>end</sub>, interpolation is done using the output <i>p</i> of
+   the timing function, which gives the portion of the value space that the
+   interpolation has crossed. Thus the result of the interpolation is
+   <i>V</i><sub>res</sub> = (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> +
+   <i>p</i> ⋅ <i>V</i><sub>end</sub>.
+
+  <p> However, if this value (<i>V</i><sub>res</sub>) is outside the allowed
+   range of values for the property, then it is clamped to that range. This
+   can occur if <i>p</i> is outside of the range 0 to 1, which can occur if a
+   timing function is specified with a <i>y1</i> or <i>y2</i> that is outside
+   the range 0 to 1.
+
   <h2 id=reversing><span class=secno>5. </span> Automatically reversing
    interrupted transitions</h2>
 
@@ -1293,19 +1307,6 @@ <h2 id=transition-events><span class=secno>6. </span><a
   <h2 id=animatable-types><span class=secno>7. </span><a
    id=animation-of-property-types-> Animation of property types </a></h2>
 
-  <p> When interpolating between two values, <i>V</i><sub>start</sub> and
-   <i>V</i><sub>end</sub>, interpolation is done using the output <i>p</i> of
-   the timing function, which gives the portion of the value space that the
-   interpolation has crossed. Thus the result of the interpolation is
-   <i>V</i><sub>res</sub> = (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> +
-   <i>p</i> ⋅ <i>V</i><sub>end</sub>.
-
-  <p> However, if this value (<i>V</i><sub>res</sub>) is outside the allowed
-   range of values for the property, then it is clamped to that range. This
-   can occur if <i>p</i> is outside of the range 0 to 1, which can occur if a
-   timing function is specified with a <i>y1</i> or <i>y2</i> that is outside
-   the range 0 to 1.
-
   <p> The following describes how each property type undergoes transition or
    animation.
 

css-transitions/Overview.src.html

@@ -1118,17 +1118,38 @@ <h2 id="application">
         <span>start time</span> of the transition
         (that is, during the duration phase of the transition),
         this value is a specified style that will compute
-        to the <a href="#animatable-types">result of interpolating the property</a>
+        to the result of interpolating the property
         using the <span>before-change style</span> for the property as
         <i>V</i><sub>start</sub>,
         using the <span>after-change style</span> for the property as
         <i>V</i><sub>end</sub>,
         and using (current time - start time) / (end time - start time)
-        as the input to the timing function.
+        as the input to the timing function (see 'transition-timing-function').
         (The <span>before-change style</span> and <span>after-change style</span>
         <span>style change event</span> in which the transition was started.)
       </p>
 
+      <p>
+        When interpolating between two values,
+        <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>,
+        interpolation is done using the output <i>p</i> of the timing function,
+        which gives the portion of the value space
+        that the interpolation has crossed.
+        Thus the result of the interpolation is
+        <i>V</i><sub>res</sub> =
+          (1 - <i>p</i>) &sdot; <i>V</i><sub>start</sub> +
+          <i>p</i> &sdot; <i>V</i><sub>end</sub>.
+      </p>
+
+      <p>
+        However, if this value (<i>V</i><sub>res</sub>)
+        is outside the allowed range of values for the property,
+        then it is clamped to that range.
+        This can occur if <i>p</i> is outside of the range 0 to 1,
+        which can occur if a timing function is specified
+        with a <i>y1</i> or <i>y2</i> that is outside the range 0 to 1.
+      </p>
+
       <h2 id="reversing">
         Automatically reversing interrupted transitions
       </h2>
@@ -1323,27 +1344,6 @@ <h2 id="animatable-types"><a id="animation-of-property-types-">
         Animation of property types
       </a></h2>
 
-      <p>
-        When interpolating between two values,
-        <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>,
-        interpolation is done using the output <i>p</i> of the timing function,
-        which gives the portion of the value space
-        that the interpolation has crossed.
-        Thus the result of the interpolation is
-        <i>V</i><sub>res</sub> =
-          (1 - <i>p</i>) &sdot; <i>V</i><sub>start</sub> +
-          <i>p</i> &sdot; <i>V</i><sub>end</sub>.
-      </p>
-
-      <p>
-        However, if this value (<i>V</i><sub>res</sub>)
-        is outside the allowed range of values for the property,
-        then it is clamped to that range.
-        This can occur if <i>p</i> is outside of the range 0 to 1,
-        which can occur if a timing function is specified
-        with a <i>y1</i> or <i>y2</i> that is outside the range 0 to 1.
-      </p>
-
       <p>
         The following describes how each property type undergoes transition or
         animation.