- From: David Baron via cvs-syncmail <cvsmail@w3.org>
- Date: Sun, 27 Mar 2011 06:28:44 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transitions
In directory hutz:/tmp/cvs-serv28842
Modified Files:
Overview.html Overview.src.html
Log Message:
Give an example in the 'Starting of transitions' section. The discussion in http://meyerweb.com/eric/thoughts/2011/03/24/inconsistent-transitions/ suggests an example is needed here.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transitions/Overview.html,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -d -r1.17 -r1.18
--- Overview.html 26 Mar 2011 23:06:45 -0000 1.17
+++ Overview.html 27 Mar 2011 06:28:42 -0000 1.18
@@ -29,14 +29,14 @@
<h1>CSS Transitions</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 March 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 March 2011</h2>
<dl>
<dt>This version:
- <dd> <a href="http://www.w3.org/TR/2011/ED-css3-transitions-20110326">
+ <dd> <a href="http://www.w3.org/TR/2011/ED-css3-transitions-20110327">
http://dev.w3.org/csswg/css3-transitions/</a>
- <!--http://www.w3.org/TR/2011/WD-css3-transitions-20110326-->
+ <!--http://www.w3.org/TR/2011/WD-css3-transitions-20110327-->
<dt>Latest version:
@@ -794,13 +794,33 @@
class=property>transition-timing-function</code></a>’, and ‘<a
href="#transition-delay"><code
class=property>transition-delay</code></a>’ properties at the time
- the animatable property would first have its new computed value. Since
- this specification does not define when computed values change, and thus
- what changes to computed values are considered simultaneous, authors
- should be aware that changing any of the transition properties a small
- amount of time after making a change that might transition can result in
- behavior that varies between implementations, since the changes might be
- considered simultaneous in some implementations but not others.
+ the animatable property would first have its new computed value.
+
+ <div class=example>
+ <p style="display:none"> Example(s):</p>
+
+ <pre>li { transition: background-color linear 1s; background: blue; }
+li:hover { transition-duration: 2s; background-color: green; }</pre>
+
+ <p> When a list item with these style rules enters the :hover state, the
+ computed ‘<a href="#transition-duration"><code
+ class=property>transition-duration</code></a>’ at the time that
+ ‘<code class=property>background-color</code>’ would have its
+ new value (‘<code class=property>green</code>’) is
+ ‘<code class=css>2s</code>’, so the transition from
+ ‘<code class=property>blue</code>’ to ‘<code
+ class=property>green</code>’ takes 2 seconds. However, when the
+ list item leaves the :hover state, the transition from ‘<code
+ class=property>green</code>’ to ‘<code
+ class=property>blue</code>’ takes 1 second.</p>
+ </div>
+
+ <p> Since this specification does not define when computed values change,
+ and thus what changes to computed values are considered simultaneous,
+ authors should be aware that changing any of the transition properties a
+ small amount of time after making a change that might transition can
+ result in behavior that varies between implementations, since the changes
+ might be considered simultaneous in some implementations but not others.
<p class=note>Say something about simulaneity
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transitions/Overview.src.html,v
retrieving revision 1.18
retrieving revision 1.19
diff -u -d -r1.18 -r1.19
--- Overview.src.html 26 Mar 2011 23:06:45 -0000 1.18
+++ Overview.src.html 27 Mar 2011 06:28:42 -0000 1.19
@@ -743,7 +743,25 @@
the values of the 'transition-property', 'transition-duration',
'transition-timing-function', and 'transition-delay' properties
at the time the animatable property would first have its new
- computed value. Since this specification does not define
+ computed value.
+ </p>
+ <div class="example">
+ <p style="display:none">
+ Example(s):
+ </p>
+ <pre>li { transition: background-color linear 1s; background: blue; }
+li:hover { transition-duration: 2s; background-color: green; }</pre>
+ <p>
+ When a list item with these style rules enters the :hover
+ state, the computed 'transition-duration' at the time that
+ 'background-color' would have its new value ('green') is '2s',
+ so the transition from 'blue' to 'green' takes 2 seconds.
+ However, when the list item leaves the :hover state, the
+ transition from 'green' to 'blue' takes 1 second.
+ </p>
+ </div>
+ <p>
+ Since this specification does not define
when computed values change, and thus what changes to
computed values are considered simultaneous,
authors should be aware that changing any of the transition
Received on Sunday, 27 March 2011 06:28:47 UTC