Mercurial > drafts / changeset

     1.1 --- a/css3-transitions/Overview.html	Tue Mar 27 11:20:46 2012 -0700
     1.2 +++ b/css3-transitions/Overview.html	Tue Mar 27 11:22:14 2012 -0700
     1.3 @@ -177,7 +177,7 @@
     1.4      transitions </a>
     1.5  
     1.6     <li><a href="#reversing"><span class=secno>4. </span> Automatically
     1.7 -    reversing transitions </a>
     1.8 +    reversing interrupted transitions </a>
     1.9  
    1.10     <li><a href="#transition-events-"><span class=secno>5. </span> Transition
    1.11      Events </a>
    1.12 @@ -796,11 +796,35 @@
    1.13     class=property>transition-delay</code></a>&rsquo; properties at the time
    1.14     the animatable property would first have its new computed value.
    1.15  
    1.16 -  <div class=example>
    1.17 +  <div class=example id=manual-reversing-example>
    1.18     <p style="display:none"> Example(s):</p>
    1.19  
    1.20 -   <pre>li { transition: background-color linear 1s; background: blue; }
    1.21 -li:hover { transition-duration: 2s; background-color: green; }</pre>
    1.22 +   <p>This provides a way for authors to specify different values of the
    1.23 +    &lsquo;<code class=css>transition-*</code>&rsquo; properties for the
    1.24 +    &ldquo;forward&rdquo; and &ldquo;reverse&rdquo; transitions (but see <a
    1.25 +    href="#reversing">below</a> for special reversing behavior when an
    1.26 +    <em>incomplete</em> transition is interrupted). Authors can specify the
    1.27 +    value of &lsquo;<a href="#transition-duration"><code
    1.28 +    class=property>transition-duration</code></a>&rsquo;, &lsquo;<a
    1.29 +    href="#transition-timing-function"><code
    1.30 +    class=property>transition-timing-function</code></a>&rsquo;, or &lsquo;<a
    1.31 +    href="#transition-delay"><code
    1.32 +    class=property>transition-delay</code></a>&rsquo; in the same rule where
    1.33 +    they specify the value that triggers the transition, or can change these
    1.34 +    properties at the same time as they change the property that triggers the
    1.35 +    transition. Since it's the new values of these &lsquo;<code
    1.36 +    class=css>transition-*</code>&rsquo; properties that affect the
    1.37 +    transition, these values will be used for the transitions <em>to</em> the
    1.38 +    associated transitioning values. For example:</p>
    1.39 +
    1.40 +   <pre>li {
    1.41 +  transition: background-color linear 1s;
    1.42 +  background: blue;
    1.43 +}
    1.44 +li:hover {
    1.45 +  background-color: green;
    1.46 +  transition-duration: 2s; /* applies to the transition *to* the :hover state */
    1.47 +}</pre>
    1.48  
    1.49     <p> When a list item with these style rules enters the :hover state, the
    1.50      computed &lsquo;<a href="#transition-duration"><code
    1.51 @@ -847,7 +871,7 @@
    1.52     another element that is transitioning the same property.
    1.53  
    1.54    <h2 id=reversing><span class=secno>4. </span> Automatically reversing
    1.55 -   transitions</h2>
    1.56 +   interrupted transitions</h2>
    1.57  
    1.58    <p> A common type of transition effect is when a running transition is
    1.59     interrupted and the property is reset to its original value. An example is

     2.1 --- a/css3-transitions/Overview.src.html	Tue Mar 27 11:20:46 2012 -0700
     2.2 +++ b/css3-transitions/Overview.src.html	Tue Mar 27 11:22:14 2012 -0700
     2.3 @@ -758,12 +758,32 @@
     2.4          at the time the animatable property would first have its new
     2.5          computed value.
     2.6        </p>
     2.7 -      <div class="example">
     2.8 +      <div class="example" id="manual-reversing-example">
     2.9          <p style="display:none">
    2.10            Example(s):
    2.11          </p>
    2.12 -        <pre>li { transition: background-color linear 1s; background: blue; }
    2.13 -li:hover { transition-duration: 2s; background-color: green; }</pre>
    2.14 +        <p>This provides a way for authors to specify different values
    2.15 +        of the 'transition-*' properties for the &ldquo;forward&rdquo;
    2.16 +        and &ldquo;reverse&rdquo; transitions (but see <a
    2.17 +        href="#reversing">below</a> for special reversing behavior when
    2.18 +        an <em>incomplete</em> transition is interrupted).  Authors can
    2.19 +        specify the value of 'transition-duration',
    2.20 +        'transition-timing-function', or 'transition-delay' in the same
    2.21 +        rule where they specify the value that triggers the transition,
    2.22 +        or can change these properties at the same time as they change
    2.23 +        the property that triggers the transition.  Since it's the new
    2.24 +        values of these 'transition-*' properties that affect the
    2.25 +        transition, these values will be used for the transitions
    2.26 +        <em>to</em> the associated transitioning values.  For example:
    2.27 +         </p>
    2.28 +        <pre>li {
    2.29 +  transition: background-color linear 1s;
    2.30 +  background: blue;
    2.31 +}
    2.32 +li:hover {
    2.33 +  background-color: green;
    2.34 +  transition-duration: 2s; /* applies to the transition *to* the :hover state */
    2.35 +}</pre>
    2.36          <p>
    2.37            When a list item with these style rules enters the :hover
    2.38            state, the computed 'transition-duration' at the time that
    2.39 @@ -810,7 +830,7 @@
    2.40        </p>
    2.41  
    2.42        <h2 id="reversing">
    2.43 -        Automatically reversing transitions
    2.44 +        Automatically reversing interrupted transitions
    2.45        </h2>
    2.46        <p>
    2.47          A common type of transition effect is when a running transition is