css-transitions/Overview.src.html

changeset 9078
9f7a990bfc09
parent 9077
3379bf6d2b39
child 9079
bf51b9779673
     1.1 --- a/css-transitions/Overview.src.html	Tue Sep 10 11:30:26 2013 +0200
     1.2 +++ b/css-transitions/Overview.src.html	Tue Sep 10 11:30:26 2013 +0200
     1.3 @@ -988,16 +988,26 @@
     1.4          href="#transition-property">the definition of
     1.5          'transition-property'</a>) in the computed value of
     1.6          'transition-property'.
     1.7 -        Corresponding to this item there are
     1.8 -        computed values of 'transition-duration' and 'transition-delay'
     1.9 +        Corresponding to this item there is
    1.10 +        a <span>matching transition duration</span>,
    1.11 +        a <span>matching transition delay</span>, and
    1.12 +        a <span>matching transition timing function</span>
    1.13 +        in the computed values of
    1.14 +        'transition-duration', 'transition-delay', and 'transition-timing-function'
    1.15          (see <a href="#list-matching">the rules on matching lists</a>).
    1.16          Define the <dfn>combined duration</dfn> of the transition
    1.17 -        as the sum of max('transition-duration', ''0s'') and 'transition-delay'.
    1.18 +        as the sum of max(matching transition duration, ''0s'') and
    1.19 +        the matching transition-delay.
    1.20          When the combined duration is greater than ''0s'',
    1.21 -        then a transition starts based on the values of
    1.22 -        'transition-duration', 'transition-delay',
    1.23 -        and 'transition-timing-function';
    1.24 +        then a transition starts based on the values of the
    1.25 +        matching transition duration, the matching transition delay,
    1.26 +        and the matching transition-timing-function;
    1.27          in other cases transitions do not occur.
    1.28 +        The <dfn>start time</dfn> of this transition is defined as
    1.29 +        the time of the <span>style change event</span> plus
    1.30 +        the matching transition delay.
    1.31 +        The <dfn>end time</dfn> of this transition is defined as
    1.32 +        the <span>start time</span> plus the matching transition duration.
    1.33        </p>
    1.34  
    1.35        <p>
    1.36 @@ -1032,6 +1042,50 @@
    1.37          Working Group resolution from 2013-06-06 needs to be edited.
    1.38        </p>
    1.39  
    1.40 +      <h2 id="application">
    1.41 +        Application of transitions
    1.42 +      </h2>
    1.43 +
    1.44 +      <p>
    1.45 +        When a property on an element is undergoing a transition
    1.46 +        (that is, when or after the transition has started and before the
    1.47 +        <span>end time</span> of the transition)
    1.48 +        the transition adds a style to the CSS cascade
    1.49 +        at the level defined for CSS Transitions in [[CSS3CASCADE]].
    1.50 +      </p>
    1.51 +
    1.52 +      <p>
    1.53 +        Implementations must add this value to the cascade
    1.54 +        if and only if
    1.55 +        that property is not currently
    1.56 +        undergoing a CSS Animation ([[CSS3-ANIMATIONS]]) on the same element.
    1.57 +      </p>
    1.58 +
    1.59 +      <p>
    1.60 +        If the current time is at or before the
    1.61 +        <span>start time</span> of the transition
    1.62 +        (that is, during the delay phase of the transition),
    1.63 +        this value is a specified style that will compute
    1.64 +        to the <span>before-change style</span> in the
    1.65 +        <span>style change event</span> in which the transition was started.
    1.66 +      </p>
    1.67 +
    1.68 +      <p>
    1.69 +        If the current time is after the
    1.70 +        <span>start time</span> of the transition
    1.71 +        (that is, during the duration phase of the transition),
    1.72 +        this value is a specified style that will compute
    1.73 +        to the <a href="#animatable-types">result of interpolating the property</a>
    1.74 +        using the <span>before-change style</span> for the property as
    1.75 +        <i>V</i><sub>start</sub>,
    1.76 +        using the <span>after-change style</span> for the property as
    1.77 +        <i>V</i><sub>end</sub>,
    1.78 +        and using (current time - start time) / (end time - start time)
    1.79 +        as the input to the timing function.
    1.80 +        (The <span>before-change style</span> and <span>after-change style</span>
    1.81 +        <span>style change event</span> in which the transition was started.)
    1.82 +      </p>
    1.83 +
    1.84        <h2 id="reversing">
    1.85          Automatically reversing interrupted transitions
    1.86        </h2>
    1.87 @@ -1621,6 +1675,7 @@
    1.88    <li>Define the model for starting of transitions and their interaction with other animations more precisely:
    1.89      <ul>
    1.90        <li>Define the <span>before-change style</span> and <span>after-change style</span> used for the style comparison, using the new concept of a <span>style change event</span>.
    1.91 +      <li>Define that a CSS transition for a property does not affect computed style when a CSS Animation for the same property is running.
    1.92      </ul>
    1.93  </ul>
    1.94  

mercurial