Mercurial > drafts / file diff

     1.1 --- a/css3-transitions/Overview.src.html	Thu Jul 12 14:50:44 2012 -0700
     1.2 +++ b/css3-transitions/Overview.src.html	Thu Jul 12 17:35:04 2012 -0700
     1.3 @@ -395,9 +395,13 @@
     1.4          a <a
     1.5          href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
     1.6          B&eacute;zier curve</a>. 
     1.7 -        The timing function takes as its input the current elapsed percentage of
     1.8 -        the transition duration and outputs a percentage that determines how
     1.9 -        close the transition is to its goal state.
    1.10 +        The timing function takes as its input
    1.11 +        the current elapsed percentage of the transition duration
    1.12 +        and outputs the percentage of the way the transition is
    1.13 +        from its start value to its end value.
    1.14 +        How this output is used is defined by
    1.15 +        the <a href="#animatable-types">interpolation rules</a>
    1.16 +        for the value type.
    1.17        </p>
    1.18        <p>
    1.19          A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
    1.20 @@ -1114,6 +1118,18 @@
    1.21        </a></h2>
    1.22  
    1.23        <p>
    1.24 +        When interpolating between two values,
    1.25 +        <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>,
    1.26 +        interpolation is done using the output <i>p</i> of the timing function,
    1.27 +        which gives the portion of the value space
    1.28 +        that the interpolation has crossed.
    1.29 +        Thus the result of the interpolation is
    1.30 +        <i>V</i><sub>res</sub> =
    1.31 +          (1 - <i>p</i>) &sdot; <i>V</i><sub>start</sub> +
    1.32 +          <i>p</i> &sdot; <i>V</i><sub>end</sub>.
    1.33 +      </p>
    1.34 +
    1.35 +      <p>
    1.36          The following describes how each property type undergoes transition or
    1.37          animation.
    1.38        </p>