Improve the example for how to specify styles for different forward/reverse behavior.

This addresses https://www.w3.org/Bugs/Public/show_bug.cgi?id=14611
without any technical fixes as proposed in
http://lists.w3.org/Archives/Public/www-style/2012Mar/0013.html and
resolved in the 2012 February 29 teleconference (minutes at
http://lists.w3.org/Archives/Public/www-style/2012Mar/0013.html ).

Author: dbaron

css3-transitions/Overview.html

@@ -177,7 +177,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
     transitions </a>
 
    <li><a href="#reversing"><span class=secno>4. </span> Automatically
-    reversing transitions </a>
+    reversing interrupted transitions </a>
 
    <li><a href="#transition-events-"><span class=secno>5. </span> Transition
     Events </a>
@@ -796,11 +796,35 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
    class=property>transition-delay</code></a>&rsquo; properties at the time
    the animatable property would first have its new computed value.
 
-  <div class=example>
+  <div class=example id=manual-reversing-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>This provides a way for authors to specify different values of the
+    &lsquo;<code class=css>transition-*</code>&rsquo; properties for the
+    &ldquo;forward&rdquo; and &ldquo;reverse&rdquo; transitions (but see <a
+    href="#reversing">below</a> for special reversing behavior when an
+    <em>incomplete</em> transition is interrupted). Authors can specify the
+    value of &lsquo;<a href="#transition-duration"><code
+    class=property>transition-duration</code></a>&rsquo;, &lsquo;<a
+    href="#transition-timing-function"><code
+    class=property>transition-timing-function</code></a>&rsquo;, or &lsquo;<a
+    href="#transition-delay"><code
+    class=property>transition-delay</code></a>&rsquo; in the same rule where
+    they specify the value that triggers the transition, or can change these
+    properties at the same time as they change the property that triggers the
+    transition. Since it's the new values of these &lsquo;<code
+    class=css>transition-*</code>&rsquo; properties that affect the
+    transition, these values will be used for the transitions <em>to</em> the
+    associated transitioning values. For example:</p>
+
+   <pre>li {
+  transition: background-color linear 1s;
+  background: blue;
+}
+li:hover {
+  background-color: green;
+  transition-duration: 2s; /* applies to the transition *to* the :hover state */
+}</pre>
 
    <p> When a list item with these style rules enters the :hover state, the
     computed &lsquo;<a href="#transition-duration"><code
@@ -847,7 +871,7 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
    another element that is transitioning the same property.
 
   <h2 id=reversing><span class=secno>4. </span> Automatically reversing
-   transitions</h2>
+   interrupted transitions</h2>
 
   <p> A common type of transition effect is when a running transition is
    interrupted and the property is reset to its original value. An example is

css3-transitions/Overview.src.html

@@ -758,12 +758,32 @@ <h2 id="starting">
         at the time the animatable property would first have its new
         computed value.
       </p>
-      <div class="example">
+      <div class="example" id="manual-reversing-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>This provides a way for authors to specify different values
+        of the 'transition-*' properties for the &ldquo;forward&rdquo;
+        and &ldquo;reverse&rdquo; transitions (but see <a
+        href="#reversing">below</a> for special reversing behavior when
+        an <em>incomplete</em> transition is interrupted).  Authors can
+        specify the value of 'transition-duration',
+        'transition-timing-function', or 'transition-delay' in the same
+        rule where they specify the value that triggers the transition,
+        or can change these properties at the same time as they change
+        the property that triggers the transition.  Since it's the new
+        values of these 'transition-*' properties that affect the
+        transition, these values will be used for the transitions
+        <em>to</em> the associated transitioning values.  For example:
+         </p>
+        <pre>li {
+  transition: background-color linear 1s;
+  background: blue;
+}
+li:hover {
+  background-color: green;
+  transition-duration: 2s; /* applies to the transition *to* the :hover state */
+}</pre>
         <p>
           When a list item with these style rules enters the :hover
           state, the computed 'transition-duration' at the time that
@@ -810,7 +830,7 @@ <h2 id="starting">
       </p>
 
       <h2 id="reversing">
-        Automatically reversing transitions
+        Automatically reversing interrupted transitions
       </h2>
       <p>
         A common type of transition effect is when a running transition is