Mercurial > drafts / file diff

     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>) &sdot; <i>V</i><sub>start</sub> +
    1.29 -          <i>p</i> &sdot; <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>) &sdot; <i>V</i><sub>start</sub> +
    1.56 +          <i>p</i> &sdot; <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>