Mercurial > drafts / changeset

     1.1 --- a/css-transitions/Overview.html	Tue Sep 10 11:30:26 2013 +0200
     1.2 +++ b/css-transitions/Overview.html	Tue Sep 10 11:30:26 2013 +0200
     1.3 @@ -196,32 +196,35 @@
     1.4     <li><a href="#starting"><span class=secno>3. </span> Starting of
     1.5      transitions </a>
     1.6  
     1.7 -   <li><a href="#reversing"><span class=secno>4. </span> Automatically
     1.8 +   <li><a href="#application"><span class=secno>4. </span> Application of
     1.9 +    transitions </a>
    1.10 +
    1.11 +   <li><a href="#reversing"><span class=secno>5. </span> Automatically
    1.12      reversing interrupted transitions </a>
    1.13  
    1.14 -   <li><a href="#transition-events"><span class=secno>5. </span> Transition
    1.15 +   <li><a href="#transition-events"><span class=secno>6. </span> Transition
    1.16      Events </a>
    1.17  
    1.18 -   <li><a href="#animatable-types"><span class=secno>6. </span> Animation of
    1.19 +   <li><a href="#animatable-types"><span class=secno>7. </span> Animation of
    1.20      property types </a>
    1.21  
    1.22 -   <li><a href="#animatable-properties"><span class=secno>7. </span>
    1.23 +   <li><a href="#animatable-properties"><span class=secno>8. </span>
    1.24      Animatable properties </a>
    1.25      <ul class=toc>
    1.26 -     <li><a href="#animatable-css"><span class=secno>7.1. </span> Properties
    1.27 +     <li><a href="#animatable-css"><span class=secno>8.1. </span> Properties
    1.28        from CSS </a>
    1.29  
    1.30 -     <li><a href="#animatable-svg"><span class=secno>7.2. </span> Properties
    1.31 +     <li><a href="#animatable-svg"><span class=secno>8.2. </span> Properties
    1.32        from SVG </a>
    1.33      </ul>
    1.34  
    1.35 -   <li><a href="#changes"><span class=secno>8. </span>Changes since Working
    1.36 +   <li><a href="#changes"><span class=secno>9. </span>Changes since Working
    1.37      Draft of 12 February 2013</a>
    1.38  
    1.39 -   <li><a href="#acknowledgments"><span class=secno>9.
    1.40 +   <li><a href="#acknowledgments"><span class=secno>10.
    1.41      </span>Acknowledgments</a>
    1.42  
    1.43 -   <li><a href="#references"><span class=secno>10. </span>References</a>
    1.44 +   <li><a href="#references"><span class=secno>11. </span>References</a>
    1.45      <ul class=toc>
    1.46       <li class=no-num><a href="#normative-references">Normative
    1.47        references</a>
    1.48 @@ -990,24 +993,27 @@
    1.49     definition of ‘<code class=property>transition-property</code>’</a>)
    1.50     in the computed value of ‘<a href="#transition-property"><code
    1.51     class=property>transition-property</code></a>’. Corresponding to this
    1.52 -   item there are computed values of ‘<a href="#transition-duration"><code
    1.53 -   class=property>transition-duration</code></a>’ and ‘<a
    1.54 -   href="#transition-delay"><code
    1.55 -   class=property>transition-delay</code></a>’ (see <a
    1.56 -   href="#list-matching">the rules on matching lists</a>). Define the <dfn
    1.57 -   id=combined-duration>combined duration</dfn> of the transition as the sum
    1.58 -   of max(‘<a href="#transition-duration"><code
    1.59 -   class=property>transition-duration</code></a>’, ‘<code
    1.60 -   class=css>0s</code>’) and ‘<a href="#transition-delay"><code
    1.61 -   class=property>transition-delay</code></a>’. When the combined duration
    1.62 -   is greater than ‘<code class=css>0s</code>’, then a transition starts
    1.63 -   based on the values of ‘<a href="#transition-duration"><code
    1.64 +   item there is a <span>matching transition duration</span>, a
    1.65 +   <span>matching transition delay</span>, and a <span>matching transition
    1.66 +   timing function</span> in the computed values of ‘<a
    1.67 +   href="#transition-duration"><code
    1.68     class=property>transition-duration</code></a>’, ‘<a
    1.69     href="#transition-delay"><code
    1.70     class=property>transition-delay</code></a>’, and ‘<a
    1.71     href="#transition-timing-function"><code
    1.72 -   class=property>transition-timing-function</code></a>’; in other cases
    1.73 -   transitions do not occur.
    1.74 +   class=property>transition-timing-function</code></a>’ (see <a
    1.75 +   href="#list-matching">the rules on matching lists</a>). Define the <dfn
    1.76 +   id=combined-duration>combined duration</dfn> of the transition as the sum
    1.77 +   of max(matching transition duration, ‘<code class=css>0s</code>’) and
    1.78 +   the matching transition-delay. When the combined duration is greater than
    1.79 +   ‘<code class=css>0s</code>’, then a transition starts based on the
    1.80 +   values of the matching transition duration, the matching transition delay,
    1.81 +   and the matching transition-timing-function; in other cases transitions do
    1.82 +   not occur. The <dfn id=start-time>start time</dfn> of this transition is
    1.83 +   defined as the time of the <a href="#style-change-event">style change
    1.84 +   event</a> plus the matching transition delay. The <dfn id=end-time>end
    1.85 +   time</dfn> of this transition is defined as the <a
    1.86 +   href="#start-time">start time</a> plus the matching transition duration.
    1.87  
    1.88    <p> Once the transition of a property has started, it must continue running
    1.89     based on the original timing function, duration, and delay, even if the
    1.90 @@ -1038,7 +1044,40 @@
    1.91     of issues and proposed model</a>. Working Group resolution from 2013-06-06
    1.92     needs to be edited.
    1.93  
    1.94 -  <h2 id=reversing><span class=secno>4. </span> Automatically reversing
    1.95 +  <h2 id=application><span class=secno>4. </span> Application of transitions</h2>
    1.96 +
    1.97 +  <p> When a property on an element is undergoing a transition (that is, when
    1.98 +   or after the transition has started and before the <a href="#end-time">end
    1.99 +   time</a> of the transition) the transition adds a style to the CSS cascade
   1.100 +   at the level defined for CSS Transitions in <a href="#CSS3CASCADE"
   1.101 +   rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>.
   1.102 +
   1.103 +  <p> Implementations must add this value to the cascade if and only if that
   1.104 +   property is not currently undergoing a CSS Animation (<a
   1.105 +   href="#CSS3-ANIMATIONS"
   1.106 +   rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>) on the
   1.107 +   same element.
   1.108 +
   1.109 +  <p> If the current time is at or before the <a href="#start-time">start
   1.110 +   time</a> of the transition (that is, during the delay phase of the
   1.111 +   transition), this value is a specified style that will compute to the
   1.112 +   <span>before-change style</span> in the <a
   1.113 +   href="#style-change-event">style change event</a> in which the transition
   1.114 +   was started.
   1.115 +
   1.116 +  <p> If the current time is after the <a href="#start-time">start time</a>
   1.117 +   of the transition (that is, during the duration phase of the transition),
   1.118 +   this value is a specified style that will compute to the <a
   1.119 +   href="#animatable-types">result of interpolating the property</a> using
   1.120 +   the <span>before-change style</span> for the property as
   1.121 +   <i>V</i><sub>start</sub>, using the <span>after-change style</span> for
   1.122 +   the property as <i>V</i><sub>end</sub>, and using (current time - start
   1.123 +   time) / (end time - start time) as the input to the timing function. (The
   1.124 +   <span>before-change style</span> and <span>after-change style</span> <a
   1.125 +   href="#style-change-event">style change event</a> in which the transition
   1.126 +   was started.)
   1.127 +
   1.128 +  <h2 id=reversing><span class=secno>5. </span> Automatically reversing
   1.129     interrupted transitions</h2>
   1.130  
   1.131    <p> A common type of transition effect is when a running transition is
   1.132 @@ -1110,7 +1149,7 @@
   1.133     2012-10-30</a>, <a href=transition-reversing-demo>reversing demo</a>.
   1.134     Working Group resolution from 2013-06-07 needs to be edited.
   1.135  
   1.136 -  <h2 id=transition-events><span class=secno>5. </span><a
   1.137 +  <h2 id=transition-events><span class=secno>6. </span><a
   1.138     id=transition-events-> Transition Events </a></h2>
   1.139  
   1.140    <p> The completion of a CSS Transition generates a corresponding <a
   1.141 @@ -1225,7 +1264,7 @@
   1.142      </ul>
   1.143    </dl>
   1.144  
   1.145 -  <h2 id=animatable-types><span class=secno>6. </span><a
   1.146 +  <h2 id=animatable-types><span class=secno>7. </span><a
   1.147     id=animation-of-property-types-> Animation of property types </a></h2>
   1.148  
   1.149    <p> When interpolating between two values, <i>V</i><sub>start</sub> and
   1.150 @@ -1342,7 +1381,7 @@
   1.151     shorthand properties and the ‘<code class=css>all</code>’ value is
   1.152     applied to any properties (in the shorthand) that can be animated.
   1.153  
   1.154 -  <h2 id=animatable-properties><span class=secno>7. </span><a
   1.155 +  <h2 id=animatable-properties><span class=secno>8. </span><a
   1.156     id=animatable-properties-> Animatable properties </a></h2>
   1.157    <!--
   1.158        As resolved in
   1.159 @@ -1375,7 +1414,7 @@
   1.160     the property animates. Such definitions override those given in this
   1.161     specification.
   1.162  
   1.163 -  <h3 id=animatable-css><span class=secno>7.1. </span><a
   1.164 +  <h3 id=animatable-css><span class=secno>8.1. </span><a
   1.165     id=properties-from-css-> Properties from CSS </a></h3>
   1.166  
   1.167    <p> The following definitions define the animation behavior for properties
   1.168 @@ -1616,7 +1655,7 @@
   1.169       <td>as <a href="#animtype-integer">integer</a>
   1.170    </table>
   1.171  
   1.172 -  <h3 id=animatable-svg><span class=secno>7.2. </span><a
   1.173 +  <h3 id=animatable-svg><span class=secno>8.2. </span><a
   1.174     id=properties-from-svg-> Properties from SVG </a></h3>
   1.175  
   1.176    <p> All properties defined as animatable in the SVG specification, provided
   1.177 @@ -1663,7 +1702,7 @@
   1.178         </tr>
   1.179        </table> -->
   1.180  
   1.181 -  <h2 id=changes><span class=secno>8. </span>Changes since Working Draft of
   1.182 +  <h2 id=changes><span class=secno>9. </span>Changes since Working Draft of
   1.183     12 February 2013</h2>
   1.184  
   1.185    <p>The following are the substantive changes made since the <a
   1.186 @@ -1694,6 +1733,9 @@
   1.187       <li>Define the <span>before-change style</span> and <span>after-change
   1.188        style</span> used for the style comparison, using the new concept of a
   1.189        <a href="#style-change-event">style change event</a>.
   1.190 +
   1.191 +     <li>Define that a CSS transition for a property does not affect computed
   1.192 +      style when a CSS Animation for the same property is running.
   1.193      </ul>
   1.194    </ul>
   1.195  
   1.196 @@ -1708,7 +1750,7 @@
   1.197     href="http://www.w3.org/TR/2013/WD-css3-transitions-20130212/ChangeLog">the
   1.198     ChangeLog</a>, and the above version control logs.
   1.199  
   1.200 -  <h2 id=acknowledgments><span class=secno>9. </span>Acknowledgments</h2>
   1.201 +  <h2 id=acknowledgments><span class=secno>10. </span>Acknowledgments</h2>
   1.202  
   1.203    <p>Thanks especially to the feedback from Tab Atkins, Carine Bournez, Aryeh
   1.204     Gregor, Vincent Hardy, Anne van Kesteren, Cameron McCormack, Alex
   1.205 @@ -1716,7 +1758,7 @@
   1.206     href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
   1.207     community.
   1.208  
   1.209 -  <h2 id=references><span class=secno>10. </span>References</h2>
   1.210 +  <h2 id=references><span class=secno>11. </span>References</h2>
   1.211  
   1.212    <h3 class=no-num id=normative-references>Normative references</h3>
   1.213    <!--begin-normative-->
   1.214 @@ -1766,6 +1808,16 @@
   1.215     </dd>
   1.216     <!---->
   1.217  
   1.218 +   <dt id=CSS3CASCADE>[CSS3CASCADE]
   1.219 +
   1.220 +   <dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr. <a
   1.221 +    href="http://www.w3.org/TR/2013/WD-css3-cascade-20130103/"><cite>CSS
   1.222 +    Cascading and Inheritance Level 3.</cite></a> 3 January 2013. W3C Working
   1.223 +    Draft. (Work in progress.) URL: <a
   1.224 +    href="http://www.w3.org/TR/2013/WD-css3-cascade-20130103/">http://www.w3.org/TR/2013/WD-css3-cascade-20130103/</a>
   1.225 +   </dd>
   1.226 +   <!---->
   1.227 +
   1.228     <dt id=CSS3COLOR>[CSS3COLOR]
   1.229  
   1.230     <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
   1.231 @@ -1916,6 +1968,9 @@
   1.232     <li>combined duration, <a href="#combined-duration"
   1.233      title="section 3."><strong>3.</strong></a>
   1.234  
   1.235 +   <li>end time, <a href="#end-time"
   1.236 +    title="section 3."><strong>3.</strong></a>
   1.237 +
   1.238     <li>&lt;single-transition&gt;, <a href="#single-transition"
   1.239      title="section 2.5."><strong>2.5.</strong></a>
   1.240  
   1.241 @@ -1927,6 +1982,9 @@
   1.242      href="#single-transition-timing-function"
   1.243      title="section 2.3."><strong>2.3.</strong></a>
   1.244  
   1.245 +   <li>start time, <a href="#start-time"
   1.246 +    title="section 3."><strong>3.</strong></a>
   1.247 +
   1.248     <li>style change event, <a href="#style-change-event"
   1.249      title="section 3."><strong>3.</strong></a>
   1.250  
   1.251 @@ -1940,23 +1998,23 @@
   1.252      title="section 2.2."><strong>2.2.</strong></a>
   1.253  
   1.254     <li>transitionend, <a href="#transitionend"
   1.255 -    title="section 5."><strong>5.</strong></a>
   1.256 +    title="section 6."><strong>6.</strong></a>
   1.257  
   1.258     <li>TransitionEvent, <a href="#Events-TransitionEvent"
   1.259 -    title="section 5."><strong>5.</strong></a>
   1.260 +    title="section 6."><strong>6.</strong></a>
   1.261      <ul>
   1.262       <li>elapsedTime, <a href="#Events-TransitionEvent-elapsedTime"
   1.263 -      title="section 5."><strong>5.</strong></a>
   1.264 +      title="section 6."><strong>6.</strong></a>
   1.265  
   1.266       <li>propertyName, <a href="#Events-TransitionEvent-propertyName"
   1.267 -      title="section 5."><strong>5.</strong></a>
   1.268 +      title="section 6."><strong>6.</strong></a>
   1.269  
   1.270       <li>pseudoElement, <a href="#Events-TransitionEvent-pseudoElement"
   1.271 -      title="section 5."><strong>5.</strong></a>
   1.272 +      title="section 6."><strong>6.</strong></a>
   1.273      </ul>
   1.274  
   1.275     <li>TransitionEventInit, <a href="#TransitionEventInit"
   1.276 -    title="section 5."><strong>5.</strong></a>
   1.277 +    title="section 6."><strong>6.</strong></a>
   1.278  
   1.279     <li>transition-property, <a href="#transition-property"
   1.280      title="section 2.1."><strong>2.1.</strong></a>

     2.1 --- a/css-transitions/Overview.src.html	Tue Sep 10 11:30:26 2013 +0200
     2.2 +++ b/css-transitions/Overview.src.html	Tue Sep 10 11:30:26 2013 +0200
     2.3 @@ -988,16 +988,26 @@
     2.4          href="#transition-property">the definition of
     2.5          'transition-property'</a>) in the computed value of
     2.6          'transition-property'.
     2.7 -        Corresponding to this item there are
     2.8 -        computed values of 'transition-duration' and 'transition-delay'
     2.9 +        Corresponding to this item there is
    2.10 +        a <span>matching transition duration</span>,
    2.11 +        a <span>matching transition delay</span>, and
    2.12 +        a <span>matching transition timing function</span>
    2.13 +        in the computed values of
    2.14 +        'transition-duration', 'transition-delay', and 'transition-timing-function'
    2.15          (see <a href="#list-matching">the rules on matching lists</a>).
    2.16          Define the <dfn>combined duration</dfn> of the transition
    2.17 -        as the sum of max('transition-duration', ''0s'') and 'transition-delay'.
    2.18 +        as the sum of max(matching transition duration, ''0s'') and
    2.19 +        the matching transition-delay.
    2.20          When the combined duration is greater than ''0s'',
    2.21 -        then a transition starts based on the values of
    2.22 -        'transition-duration', 'transition-delay',
    2.23 -        and 'transition-timing-function';
    2.24 +        then a transition starts based on the values of the
    2.25 +        matching transition duration, the matching transition delay,
    2.26 +        and the matching transition-timing-function;
    2.27          in other cases transitions do not occur.
    2.28 +        The <dfn>start time</dfn> of this transition is defined as
    2.29 +        the time of the <span>style change event</span> plus
    2.30 +        the matching transition delay.
    2.31 +        The <dfn>end time</dfn> of this transition is defined as
    2.32 +        the <span>start time</span> plus the matching transition duration.
    2.33        </p>
    2.34  
    2.35        <p>
    2.36 @@ -1032,6 +1042,50 @@
    2.37          Working Group resolution from 2013-06-06 needs to be edited.
    2.38        </p>
    2.39  
    2.40 +      <h2 id="application">
    2.41 +        Application of transitions
    2.42 +      </h2>
    2.43 +
    2.44 +      <p>
    2.45 +        When a property on an element is undergoing a transition
    2.46 +        (that is, when or after the transition has started and before the
    2.47 +        <span>end time</span> of the transition)
    2.48 +        the transition adds a style to the CSS cascade
    2.49 +        at the level defined for CSS Transitions in [[CSS3CASCADE]].
    2.50 +      </p>
    2.51 +
    2.52 +      <p>
    2.53 +        Implementations must add this value to the cascade
    2.54 +        if and only if
    2.55 +        that property is not currently
    2.56 +        undergoing a CSS Animation ([[CSS3-ANIMATIONS]]) on the same element.
    2.57 +      </p>
    2.58 +
    2.59 +      <p>
    2.60 +        If the current time is at or before the
    2.61 +        <span>start time</span> of the transition
    2.62 +        (that is, during the delay phase of the transition),
    2.63 +        this value is a specified style that will compute
    2.64 +        to the <span>before-change style</span> in the
    2.65 +        <span>style change event</span> in which the transition was started.
    2.66 +      </p>
    2.67 +
    2.68 +      <p>
    2.69 +        If the current time is after the
    2.70 +        <span>start time</span> of the transition
    2.71 +        (that is, during the duration phase of the transition),
    2.72 +        this value is a specified style that will compute
    2.73 +        to the <a href="#animatable-types">result of interpolating the property</a>
    2.74 +        using the <span>before-change style</span> for the property as
    2.75 +        <i>V</i><sub>start</sub>,
    2.76 +        using the <span>after-change style</span> for the property as
    2.77 +        <i>V</i><sub>end</sub>,
    2.78 +        and using (current time - start time) / (end time - start time)
    2.79 +        as the input to the timing function.
    2.80 +        (The <span>before-change style</span> and <span>after-change style</span>
    2.81 +        <span>style change event</span> in which the transition was started.)
    2.82 +      </p>
    2.83 +
    2.84        <h2 id="reversing">
    2.85          Automatically reversing interrupted transitions
    2.86        </h2>
    2.87 @@ -1621,6 +1675,7 @@
    2.88    <li>Define the model for starting of transitions and their interaction with other animations more precisely:
    2.89      <ul>
    2.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>.
    2.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.
    2.92      </ul>
    2.93  </ul>
    2.94