Sun, 03 Feb 2013 23:37:13 -0700
[css3-transitions] Clean up excess code elements to make the formatting more consistent (and generated by the preprocessor).
css3-transitions/Overview.html | file | annotate | diff | comparison | revisions | |
css3-transitions/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-transitions/Overview.html Sun Feb 03 23:33:13 2013 -0700 1.2 +++ b/css3-transitions/Overview.html Sun Feb 03 23:37:13 2013 -0700 1.3 @@ -166,23 +166,23 @@ 1.4 <li><a href="#transitions"><span class=secno>2. </span>Transitions</a> 1.5 <ul class=toc> 1.6 <li><a href="#transition-property-property"><span class=secno>2.1. 1.7 - </span> The <code class=property>'transition-property'</code> Property 1.8 - </a> 1.9 + </span> The ‘<code class=property>transition-property</code>’ 1.10 + Property </a> 1.11 1.12 <li><a href="#transition-duration-property"><span class=secno>2.2. 1.13 - </span> The <code class=property>'transition-duration'</code> Property 1.14 - </a> 1.15 + </span> The ‘<code class=property>transition-duration</code>’ 1.16 + Property </a> 1.17 1.18 <li><a href="#transition-timing-function-property"><span 1.19 - class=secno>2.3. </span> The <code 1.20 - class=property>'transition-timing-function'</code> Property </a> 1.21 + class=secno>2.3. </span> The ‘<code 1.22 + class=property>transition-timing-function</code>’ Property </a> 1.23 1.24 <li><a href="#transition-delay-property"><span class=secno>2.4. </span> 1.25 - The <code class=property>'transition-delay'</code> Property </a> 1.26 + The ‘<code class=property>transition-delay</code>’ Property </a> 1.27 1.28 <li><a href="#transition-shorthand-property"><span class=secno>2.5. 1.29 - </span> The <code class=property>'transition'</code> Shorthand Property 1.30 - </a> 1.31 + </span> The ‘<code class=property>transition</code>’ Shorthand 1.32 + Property </a> 1.33 </ul> 1.34 1.35 <li><a href="#starting"><span class=secno>3. </span> Starting of 1.36 @@ -242,16 +242,17 @@ 1.37 used to animate smoothly from the old state to the new state over time. 1.38 1.39 <p> For example, suppose that transitions of one second have been defined 1.40 - on the <code class=property>'left'</code> and <code 1.41 - class=property>'background-color'</code> properties. The following diagram 1.42 - illustrates the effect of updating those properties on an element, in this 1.43 - case moving it to the right and changing the background from red to blue. 1.44 - This assumes other transition parameters still have their default values. 1.45 + on the ‘<code class=property>left</code>’ and ‘<code 1.46 + class=property>background-color</code>’ properties. The following 1.47 + diagram illustrates the effect of updating those properties on an element, 1.48 + in this case moving it to the right and changing the background from red 1.49 + to blue. This assumes other transition parameters still have their default 1.50 + values. 1.51 1.52 <div class=figure> <img alt="" src=transition1.png></div> 1.53 1.54 - <p class=caption> Transitions of <code class=property>'left'</code> and 1.55 - <code class=property>'background-color'</code> 1.56 + <p class=caption> Transitions of ‘<code class=property>left</code>’ and 1.57 + ‘<code class=property>background-color</code>’ 1.58 1.59 <p> Transitions are a presentational effect. The computed value of a 1.60 property transitions over time from the old value to the new value. 1.61 @@ -274,8 +275,8 @@ 1.62 transition-duration: 2s; 1.63 } 1.64 </pre> 1.65 - The above example defines a transition on the <code 1.66 - class=property>'opacity'</code> property that, when a new value is 1.67 + The above example defines a transition on the ‘<code 1.68 + class=property>opacity</code>’ property that, when a new value is 1.69 assigned to it, will cause a smooth change between the old value and the 1.70 new value over a period of two seconds.</div> 1.71 1.72 @@ -294,7 +295,7 @@ 1.73 } 1.74 1.75 </pre> 1.76 - This will cause the <code class=property>'opacity'</code> property to 1.77 + This will cause the ‘<code class=property>opacity</code>’ property to 1.78 transition over a period of two seconds and the left property to 1.79 transition over a period of four seconds.</div> 1.80 1.81 @@ -325,20 +326,20 @@ 1.82 transition-duration: 2s, 1s; 1.83 } 1.84 </pre> 1.85 - The above example defines a transition on the <code 1.86 - class=property>'opacity'</code> property of 2 seconds duration, a 1.87 - transition on the <code class=property>'left'</code> property of 1 second 1.88 - duration, a transition on the <code class=property>'top'</code> property 1.89 - of 2 seconds duration and a transition on the <code 1.90 - class=property>'width'</code> property of 1 second duration.</div> 1.91 + The above example defines a transition on the ‘<code 1.92 + class=property>opacity</code>’ property of 2 seconds duration, a 1.93 + transition on the ‘<code class=property>left</code>’ property of 1 1.94 + second duration, a transition on the ‘<code class=property>top</code>’ 1.95 + property of 2 seconds duration and a transition on the ‘<code 1.96 + class=property>width</code>’ property of 1 second duration.</div> 1.97 <!-- ======================================================================================================= --> 1.98 1.99 <h3 id=transition-property-property><span class=secno>2.1. </span><a 1.100 - id=the-transition-property-property-> The <code 1.101 - class=property>'transition-property'</code> Property </a></h3> 1.102 + id=the-transition-property-property-> The ‘<code 1.103 + class=property>transition-property</code>’ Property </a></h3> 1.104 1.105 - <p> The <a href="#transition-property"><code 1.106 - class=property>'transition-property'</code></a> property specifies the 1.107 + <p> The ‘<a href="#transition-property"><code 1.108 + class=property>transition-property</code></a>’ property specifies the 1.109 name of the CSS property to which the transition is applied. 1.110 1.111 <div class=issue> We may ultimately want to support a keypath syntax for 1.112 @@ -458,11 +459,11 @@ 1.113 <!-- ======================================================================================================= --> 1.114 1.115 <h3 id=transition-duration-property><span class=secno>2.2. </span><a 1.116 - id=the-transition-duration-property-> The <code 1.117 - class=property>'transition-duration'</code> Property </a></h3> 1.118 + id=the-transition-duration-property-> The ‘<code 1.119 + class=property>transition-duration</code>’ Property </a></h3> 1.120 1.121 - <p> The <a href="#transition-duration"><code 1.122 - class=property>'transition-duration'</code></a> property defines the 1.123 + <p> The ‘<a href="#transition-duration"><code 1.124 + class=property>transition-duration</code></a>’ property defines the 1.125 length of time that a transition takes. 1.126 1.127 <table class=propdef> 1.128 @@ -522,19 +523,19 @@ 1.129 <p> This property specifies how long the transition from the old value to 1.130 the new value should take. By default the value is ‘<code 1.131 class=css>0s</code>’, meaning that the transition is immediate (i.e. 1.132 - there will be no animation). A negative value for <a 1.133 + there will be no animation). A negative value for ‘<a 1.134 href="#transition-duration"><code 1.135 - class=property>transition-duration</code></a> renders the declaration 1.136 + class=property>transition-duration</code></a>’ renders the declaration 1.137 invalid.</p> 1.138 <!-- ======================================================================================================= 1.139 --> 1.140 1.141 <h3 id=transition-timing-function-property><span class=secno>2.3. </span><a 1.142 - id="transition-timing-function_tag"> The <code 1.143 - class=property>'transition-timing-function'</code> Property </a></h3> 1.144 + id="transition-timing-function_tag"> The ‘<code 1.145 + class=property>transition-timing-function</code>’ Property </a></h3> 1.146 1.147 - <p> The <a href="#transition-timing-function"><code 1.148 - class=property>'transition-timing-function'</code></a> property describes 1.149 + <p> The ‘<a href="#transition-timing-function"><code 1.150 + class=property>transition-timing-function</code></a>’ property describes 1.151 how the intermediate values used during a transition will be calculated. 1.152 It allows for a transition to change speed over its duration. These 1.153 effects are commonly called <em>easing</em> functions. In either case, a 1.154 @@ -565,13 +566,14 @@ 1.155 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic 1.156 Bézier curve</a> is defined by four control points, P<sub>0</sub> through 1.157 P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> are always 1.158 - set to (0,0) and (1,1). The <a href="#transition-timing-function"><code 1.159 - class=property>'transition-timing-function'</code></a> property is used to 1.160 - specify the values for points P<sub>1</sub> and P<sub>2</sub>. These can 1.161 - be set to preset values using the keywords listed below, or can be set to 1.162 - specific values using the <code class=css>'cubic-bezier'</code> function. 1.163 - In the <code class=css>'cubic-bezier'</code> function, P<sub>1</sub> and 1.164 - P<sub>2</sub> are each specified by both an X and Y value. 1.165 + set to (0,0) and (1,1). The ‘<a href="#transition-timing-function"><code 1.166 + class=property>transition-timing-function</code></a>’ property is used 1.167 + to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These 1.168 + can be set to preset values using the keywords listed below, or can be set 1.169 + to specific values using the ‘<code class=css>cubic-bezier</code>’ 1.170 + function. In the ‘<code class=css>cubic-bezier</code>’ function, 1.171 + P<sub>1</sub> and P<sub>2</sub> are each specified by both an X and Y 1.172 + value. 1.173 1.174 <div class=figure> <img 1.175 alt="The Bézier timing function is a smooth curve from point P0 = (0,0) to point P3 = (1,1). The length and orientation of the line segment P0-P1 determines the tangent and the curvature of the curve at P0 and the line segment P2-P3 does the same at P3." 1.176 @@ -699,28 +701,28 @@ 1.177 <!-- ======================================================================================================= --> 1.178 1.179 <h3 id=transition-delay-property><span class=secno>2.4. </span><a 1.180 - id=the-transition-delay-property-> The <code 1.181 - class=property>'transition-delay'</code> Property </a></h3> 1.182 + id=the-transition-delay-property-> The ‘<code 1.183 + class=property>transition-delay</code>’ Property </a></h3> 1.184 1.185 - <p> The <a href="#transition-delay"><code 1.186 - class=property>'transition-delay'</code></a> property defines when the 1.187 + <p> The ‘<a href="#transition-delay"><code 1.188 + class=property>transition-delay</code></a>’ property defines when the 1.189 transition will start. It allows a transition to begin execution some some 1.190 - period of time from when it is applied. A <a 1.191 + period of time from when it is applied. A ‘<a 1.192 href="#transition-delay"><code 1.193 - class=property>'transition-delay'</code></a> value of ‘<code 1.194 + class=property>transition-delay</code></a>’ value of ‘<code 1.195 class=css>0s</code>’ means the transition will execute as soon as the 1.196 property is changed. Otherwise, the value specifies an offset from the 1.197 moment the property is changed, and the transition will delay execution by 1.198 that offset. 1.199 1.200 - <p> If the value for <a href="#transition-delay"><code 1.201 - class=property>'transition-delay'</code></a> is a negative time offset 1.202 + <p> If the value for ‘<a href="#transition-delay"><code 1.203 + class=property>transition-delay</code></a>’ is a negative time offset 1.204 then the transition will execute the moment the property is changed, but 1.205 will appear to have begun execution at the specified offset. That is, the 1.206 transition will appear to begin part-way through its play cycle. In the 1.207 - case where a transition has implied starting values and a negative <a 1.208 + case where a transition has implied starting values and a negative ‘<a 1.209 href="#transition-delay"><code 1.210 - class=property>'transition-delay'</code></a>, the starting values are 1.211 + class=property>transition-delay</code></a>’, the starting values are 1.212 taken from the moment the property is changed. 1.213 1.214 <table class=propdef> 1.215 @@ -779,12 +781,12 @@ 1.216 <!-- ======================================================================================================= --> 1.217 1.218 <h3 id=transition-shorthand-property><span class=secno>2.5. </span><a 1.219 - id=the-transition-shorthand-property-> The <code 1.220 - class=property>'transition'</code> Shorthand Property </a></h3> 1.221 + id=the-transition-shorthand-property-> The ‘<code 1.222 + class=property>transition</code>’ Shorthand Property </a></h3> 1.223 1.224 - <p> The <a href="#transition"><code class=property>'transition'</code></a> 1.225 - shorthand property combines the four properties described above into a 1.226 - single property. 1.227 + <p> The ‘<a href="#transition"><code 1.228 + class=property>transition</code></a>’ shorthand property combines the 1.229 + four properties described above into a single property. 1.230 1.231 <table class=propdef> 1.232 <tbody> 1.233 @@ -1295,8 +1297,8 @@ 1.234 number of items, each item in the list is interpolated using the rules 1.235 above. Otherwise the interpolation is determined by the property rules. 1.236 If the property extends its list by repeating values, then this repeated 1.237 - form will be used in the interpolation (<code 1.238 - class=property>'background-position'</code> is an example of a property 1.239 + form will be used in the interpolation (‘<code 1.240 + class=property>background-position</code>’ is an example of a property 1.241 that would transition between lists of different lengths). If the 1.242 property does not allow extending its list, then no interpolation will 1.243 occur.
2.1 --- a/css3-transitions/Overview.src.html Sun Feb 03 23:33:13 2013 -0700 2.2 +++ b/css3-transitions/Overview.src.html Sun Feb 03 23:37:13 2013 -0700 2.3 @@ -95,14 +95,14 @@ 2.4 Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time. 2.5 </p> 2.6 <p> 2.7 - For example, suppose that transitions of one second have been defined on the <code class="property">'left'</code> and 2.8 - <code class="property">'background-color'</code> properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values. 2.9 + For example, suppose that transitions of one second have been defined on the 'left' and 2.10 + 'background-color' properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values. 2.11 </p> 2.12 <div class="figure"> 2.13 <img src="transition1.png" alt=""> 2.14 </div> 2.15 <p class="caption"> 2.16 - Transitions of <code class="property">'left'</code> and <code class="property">'background-color'</code> 2.17 + Transitions of 'left' and 'background-color' 2.18 </p> 2.19 <p> 2.20 Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property. 2.21 @@ -123,7 +123,7 @@ 2.22 transition-property: opacity; 2.23 transition-duration: 2s; 2.24 } 2.25 - </pre>The above example defines a transition on the <code class="property">'opacity'</code> property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds. 2.26 + </pre>The above example defines a transition on the 'opacity' property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds. 2.27 </div> 2.28 <p> 2.29 Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example: 2.30 @@ -138,7 +138,7 @@ 2.31 transition-duration: 2s, 4s; 2.32 } 2.33 2.34 - </pre>This will cause the <code class="property">'opacity'</code> property to transition over a period of two seconds and the left property to transition over a period of four seconds. 2.35 + </pre>This will cause the 'opacity' property to transition over a period of two seconds and the left property to transition over a period of four seconds. 2.36 </div> 2.37 2.38 <p id="list-matching"> 2.39 @@ -168,20 +168,20 @@ 2.40 transition-property: opacity, left, top, width; 2.41 transition-duration: 2s, 1s; 2.42 } 2.43 - </pre>The above example defines a transition on the <code class="property">'opacity'</code> property of 2 seconds duration, a 2.44 - transition on the <code class="property">'left'</code> property of 1 2.45 - second duration, a transition on the <code class="property">'top'</code> property of 2 seconds duration and a 2.46 - transition on the <code class="property">'width'</code> property of 1 2.47 + </pre>The above example defines a transition on the 'opacity' property of 2 seconds duration, a 2.48 + transition on the 'left' property of 1 2.49 + second duration, a transition on the 'top' property of 2 seconds duration and a 2.50 + transition on the 'width' property of 1 2.51 second duration. 2.52 2.53 </div> 2.54 2.55 <!-- ======================================================================================================= --> 2.56 <h3 id="transition-property-property"><a id="the-transition-property-property-"> 2.57 - The <code class="property">'transition-property'</code> Property 2.58 + The 'transition-property' Property 2.59 </a></h3> 2.60 <p> 2.61 - The <code class="property">'transition-property'</code> property specifies the name of the CSS property to which the transition is applied. 2.62 + The 'transition-property' property specifies the name of the CSS property to which the transition is applied. 2.63 </p> 2.64 <div class="issue"> 2.65 We may ultimately want to support a keypath syntax for this property. A keypath syntax would enable different transitions to be specified for components of a property. For example the blur of a shadow could have a different transition than the color of a shadow. 2.66 @@ -326,10 +326,10 @@ 2.67 2.68 <!-- ======================================================================================================= --> 2.69 <h3 id="transition-duration-property"><a id="the-transition-duration-property-"> 2.70 - The <code class="property">'transition-duration'</code> Property 2.71 + The 'transition-duration' Property 2.72 </a></h3> 2.73 <p> 2.74 - The <code class="property">'transition-duration'</code> property defines the length of time that a transition takes. 2.75 + The 'transition-duration' property defines the length of time that a transition takes. 2.76 </p> 2.77 <table class="propdef"> 2.78 <tbody> 2.79 @@ -416,17 +416,17 @@ 2.80 </tbody> 2.81 </table> 2.82 <p> 2.83 - This property specifies how long the transition from the old value to the new value should take. By default the value is ''0s'', meaning that the transition is immediate (i.e. there will be no animation). A negative value for <code class="property">transition-duration</code> renders the declaration invalid. 2.84 + This property specifies how long the transition from the old value to the new value should take. By default the value is ''0s'', meaning that the transition is immediate (i.e. there will be no animation). A negative value for 'transition-duration' renders the declaration invalid. 2.85 </p> 2.86 2.87 <!-- ======================================================================================================= 2.88 --> 2.89 2.90 <h3 id="transition-timing-function-property"><a id="transition-timing-function_tag"> 2.91 - The <code class="property">'transition-timing-function'</code> Property 2.92 + The 'transition-timing-function' Property 2.93 </a></h3> 2.94 <p> 2.95 - The <code class="property">'transition-timing-function'</code> property 2.96 + The 'transition-timing-function' property 2.97 describes how the intermediate values used during a transition will be 2.98 calculated. It allows for a transition to change speed over its 2.99 duration. These effects are commonly called <em>easing</em> functions. 2.100 @@ -477,11 +477,11 @@ 2.101 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic 2.102 Bézier curve</a> is defined by four control points, P<sub>0</sub> 2.103 through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> 2.104 - are always set to (0,0) and (1,1). The <code class="property">'transition-timing-function'</code> property is used 2.105 + are always set to (0,0) and (1,1). The 'transition-timing-function' property is used 2.106 to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These 2.107 can be set to preset values using the keywords listed below, or can be 2.108 - set to specific values using the <code class="css">'cubic-bezier'</code> function. 2.109 - In the <code class="css">'cubic-bezier'</code> function, P<sub>1</sub> and 2.110 + set to specific values using the ''cubic-bezier'' function. 2.111 + In the ''cubic-bezier'' function, P<sub>1</sub> and 2.112 P<sub>2</sub> are each specified by both an X and Y value. 2.113 </p> 2.114 <div class="figure"> 2.115 @@ -652,13 +652,13 @@ 2.116 </dd> 2.117 </dl><!-- ======================================================================================================= --> 2.118 <h3 id="transition-delay-property"><a id="the-transition-delay-property-"> 2.119 - The <code class="property">'transition-delay'</code> Property 2.120 + The 'transition-delay' Property 2.121 </a></h3> 2.122 <p> 2.123 - The <code class="property">'transition-delay'</code> property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A <code class="property">'transition-delay'</code> value of ''0s'' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset. 2.124 + The 'transition-delay' property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A 'transition-delay' value of ''0s'' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset. 2.125 </p> 2.126 <p> 2.127 - If the value for <code class="property">'transition-delay'</code> is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative <code class="property">'transition-delay'</code>, the starting values are taken from the moment the property is changed. 2.128 + If the value for 'transition-delay' is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative 'transition-delay', the starting values are taken from the moment the property is changed. 2.129 </p> 2.130 <table class="propdef"> 2.131 <tbody> 2.132 @@ -745,10 +745,10 @@ 2.133 </tbody> 2.134 </table><!-- ======================================================================================================= --> 2.135 <h3 id="transition-shorthand-property"><a id="the-transition-shorthand-property-"> 2.136 - The <code class="property">'transition'</code> Shorthand Property 2.137 + The 'transition' Shorthand Property 2.138 </a></h3> 2.139 <p> 2.140 - The <code class="property">'transition'</code> shorthand property combines the four properties described above into a single property. 2.141 + The 'transition' shorthand property combines the four properties described above into a single property. 2.142 </p> 2.143 <table class="propdef"> 2.144 <tbody> 2.145 @@ -1330,7 +1330,7 @@ 2.146 same number of items, each item in the list is interpolated using the 2.147 rules above. Otherwise the interpolation is determined by the property 2.148 rules. If the property extends its list by repeating values, then this 2.149 - repeated form will be used in the interpolation (<code class="property">'background-position'</code> 2.150 + repeated form will be used in the interpolation ('background-position' 2.151 is an example of a property that would transition between lists of different lengths). If 2.152 the property does not allow extending its list, then no interpolation 2.153 will occur.