css3-transitions/Overview.src.html

changeset 6736
096a42f389d8
parent 6734
7102ca089dc3
child 6739
f4ccc8c2ecf0
     1.1 --- a/css3-transitions/Overview.src.html	Thu Sep 20 10:33:20 2012 -0700
     1.2 +++ b/css3-transitions/Overview.src.html	Thu Sep 20 10:37:35 2012 -0700
     1.3 @@ -14,6 +14,7 @@
     1.4        padding: 0.2em 1em;
     1.5        border: 1px solid black;
     1.6      }
     1.7 +    div.prod { margin: 1em 2em; }
     1.8    </style>
     1.9    <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
    1.10  </head>
    1.11 @@ -200,7 +201,7 @@
    1.12                <em>Value:</em>
    1.13              </td>
    1.14              <td>
    1.15 -              none | [ all | &lt;IDENT&gt; ] [ ',' [ all | &lt;IDENT&gt; ] ]*
    1.16 +              none | &lt;single-transition-property&gt; [ ',' &lt;single-transition-property&gt; ]*
    1.17              </td>
    1.18            </tr>
    1.19            <tr>
    1.20 @@ -270,6 +271,10 @@
    1.21          </tbody>
    1.22        </table>
    1.23  
    1.24 +      <div class="prod">
    1.25 +        <dfn>&lt;single-transition-property&gt;</dfn> = all | &lt;IDENT&gt;
    1.26 +      </div>
    1.27 +
    1.28        <p>
    1.29          A value of 'none' means that no property will transition.
    1.30          Otherwise, a list of properties to be transitioned, or the
    1.31 @@ -498,7 +503,7 @@
    1.32                <em>Value:</em>
    1.33              </td>
    1.34              <td>
    1.35 -              [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(&lt;integer&gt;[, [ start | end ] ]?) | cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;) ] [, [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(&lt;number&gt;[, [ start | end ] ]?) | cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;) ] ]*
    1.36 +              &lt;single-transition-timing-function&gt; [ ',' &lt;single-transition-timing-function&gt; ]*
    1.37              </td>
    1.38            </tr>
    1.39            <tr>
    1.40 @@ -567,6 +572,9 @@
    1.41            </tr>
    1.42          </tbody>
    1.43        </table>
    1.44 +      <div class="prod">
    1.45 +        <dfn>&lt;single-transition-timing-function&gt;</dfn> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(&lt;integer&gt;[, [ start | end ] ]?) | cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)
    1.46 +      </div>
    1.47        <p>
    1.48          The timing functions have the following definitions.
    1.49        </p>
    1.50 @@ -736,16 +744,6 @@
    1.51        <p>
    1.52          The <code class="property">'transition'</code> shorthand property combines the four properties described above into a single property.
    1.53        </p>
    1.54 -      <p>
    1.55 -        Note that order is important in this property. The first value that can be
    1.56 -        parsed as a time is assigned to the transition-duration. The second value that
    1.57 -        can be parsed as a time is assigned to transition-delay.
    1.58 -      </p>
    1.59 -      <p class="issue">
    1.60 -        An alternative proposal is to accept the font shorthand approach of
    1.61 -        using a "/" character between the values of the same type. e.g. 2s/4s would
    1.62 -        mean a duration of 2 seconds and a delay of 4 seconds.
    1.63 -      </p>
    1.64        <table class="propdef">
    1.65          <tbody>
    1.66            <tr>
    1.67 @@ -761,7 +759,7 @@
    1.68                <em>Value:</em>
    1.69              </td>
    1.70              <td>
    1.71 -              [&lt;'transition-property'&gt; || &lt;'transition-duration'&gt; || &lt;'transition-timing-function'&gt; || &lt;'transition-delay'&gt; [, [&lt;'transition-property'&gt; || &lt;'transition-duration'&gt; || &lt;'transition-timing-function'&gt; || &lt;'transition-delay'&gt;]]*
    1.72 +              &lt;single-transition&gt; [ ',' &lt;single-transition&gt; ]*
    1.73              </td>
    1.74            </tr>
    1.75            <tr>
    1.76 @@ -831,6 +829,31 @@
    1.77          </tbody>
    1.78        </table>
    1.79  
    1.80 +      <div class="prod">
    1.81 +        <dfn>&lt;single-transition&gt;</dfn> = [ none | &lt;single-transition-property&gt; ] || &lt;time&gt; || &lt;single-transition-timing-function&gt; || &lt;time&gt;
    1.82 +      </div>
    1.83 +
    1.84 +      <p>
    1.85 +        Note that order is important within the items in this property:
    1.86 +        the first value that can be parsed as a time is assigned to the
    1.87 +        transition-duration,
    1.88 +        and the second value that can be parsed as a time is assigned to
    1.89 +        transition-delay.
    1.90 +      </p>
    1.91 +
    1.92 +      <p class="issue">
    1.93 +        An alternative proposal is to accept the font shorthand approach of
    1.94 +        using a "/" character between the values of the same type. e.g. 2s/4s would
    1.95 +        mean a duration of 2 seconds and a delay of 4 seconds.
    1.96 +      </p>
    1.97 +
    1.98 +      <p>
    1.99 +        If there is more than one &lt;single-transition&gt; in the shorthand,
   1.100 +        and any of the transitions has
   1.101 +        ''none'' as the &lt;single-transition-property&gt;,
   1.102 +        then the declaration is invalid.
   1.103 +      </p>
   1.104 +
   1.105        <h2 id="starting">
   1.106          Starting of transitions
   1.107        </h2>
   1.108 @@ -1573,6 +1596,7 @@
   1.109  
   1.110  <p>Thanks especially to the feedback from
   1.111  Tab Atkins,
   1.112 +Carine Bournez,
   1.113  Aryeh Gregor,
   1.114  Vincent Hardy,
   1.115  Cameron McCormack,

mercurial