Mercurial > drafts / changeset

     1.1 --- a/css3-transitions/Overview.html	Thu Jul 12 14:50:44 2012 -0700
     1.2 +++ b/css3-transitions/Overview.html	Thu Jul 12 17:35:04 2012 -0700
     1.3 @@ -498,8 +498,10 @@
     1.4    <p> Timing functions are either defined as a stepping function or a <a
     1.5     href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
     1.6     Bézier curve</a>. The timing function takes as its input the current
     1.7 -   elapsed percentage of the transition duration and outputs a percentage
     1.8 -   that determines how close the transition is to its goal state.
     1.9 +   elapsed percentage of the transition duration and outputs the percentage
    1.10 +   of the way the transition is from its start value to its end value. How
    1.11 +   this output is used is defined by the <a
    1.12 +   href="#animatable-types">interpolation rules</a> for the value type.
    1.13  
    1.14    <p> A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
    1.15     function is defined by a number that divides the domain of operation into
    1.16 @@ -1140,6 +1142,13 @@
    1.17    <h2 id=animatable-types><span class=secno>6. </span><a
    1.18     id=animation-of-property-types-> Animation of property types </a></h2>
    1.19  
    1.20 +  <p> When interpolating between two values, <i>V</i><sub>start</sub> and
    1.21 +   <i>V</i><sub>end</sub>, interpolation is done using the output <i>p</i> of
    1.22 +   the timing function, which gives the portion of the value space that the
    1.23 +   interpolation has crossed. Thus the result of the interpolation is
    1.24 +   <i>V</i><sub>res</sub> = (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> +
    1.25 +   <i>p</i> ⋅ <i>V</i><sub>end</sub>.
    1.26 +
    1.27    <p> The following describes how each property type undergoes transition or
    1.28     animation.
    1.29  

     2.1 --- a/css3-transitions/Overview.src.html	Thu Jul 12 14:50:44 2012 -0700
     2.2 +++ b/css3-transitions/Overview.src.html	Thu Jul 12 17:35:04 2012 -0700
     2.3 @@ -395,9 +395,13 @@
     2.4          a <a
     2.5          href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
     2.6          B&eacute;zier curve</a>. 
     2.7 -        The timing function takes as its input the current elapsed percentage of
     2.8 -        the transition duration and outputs a percentage that determines how
     2.9 -        close the transition is to its goal state.
    2.10 +        The timing function takes as its input
    2.11 +        the current elapsed percentage of the transition duration
    2.12 +        and outputs the percentage of the way the transition is
    2.13 +        from its start value to its end value.
    2.14 +        How this output is used is defined by
    2.15 +        the <a href="#animatable-types">interpolation rules</a>
    2.16 +        for the value type.
    2.17        </p>
    2.18        <p>
    2.19          A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
    2.20 @@ -1114,6 +1118,18 @@
    2.21        </a></h2>
    2.22  
    2.23        <p>
    2.24 +        When interpolating between two values,
    2.25 +        <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>,
    2.26 +        interpolation is done using the output <i>p</i> of the timing function,
    2.27 +        which gives the portion of the value space
    2.28 +        that the interpolation has crossed.
    2.29 +        Thus the result of the interpolation is
    2.30 +        <i>V</i><sub>res</sub> =
    2.31 +          (1 - <i>p</i>) &sdot; <i>V</i><sub>start</sub> +
    2.32 +          <i>p</i> &sdot; <i>V</i><sub>end</sub>.
    2.33 +      </p>
    2.34 +
    2.35 +      <p>
    2.36          The following describes how each property type undergoes transition or
    2.37          animation.
    2.38        </p>