Thu, 29 Mar 2012 14:37:26 -0700
Use better IDs, but add a name for compatibility with old ones.
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 Thu Mar 29 22:49:28 2012 +0200 1.2 +++ b/css3-transitions/Overview.html Thu Mar 29 14:37:26 2012 -0700 1.3 @@ -153,25 +153,21 @@ 1.4 1.5 <li><a href="#transitions"><span class=secno>2. </span>Transitions</a> 1.6 <ul class=toc> 1.7 - <li><a href="#the-transition-property-property-"><span class=secno>2.1. 1.8 - </span> The <code class=property>'transition-property'</code> Property 1.9 - </a> 1.10 + <li><a href="#the-transition-property"><span class=secno>2.1. </span> 1.11 + The <code class=property>'transition-property'</code> Property </a> 1.12 1.13 - <li><a href="#the-transition-duration-property-"><span class=secno>2.2. 1.14 - </span> The <code class=property>'transition-duration'</code> Property 1.15 - </a> 1.16 + <li><a href="#the-transition-duration"><span class=secno>2.2. </span> 1.17 + The <code class=property>'transition-duration'</code> Property </a> 1.18 1.19 - <li><a href="#transition-timing-function_tag"><span class=secno>2.3. 1.20 + <li><a href="#the-transition-timing-function"><span class=secno>2.3. 1.21 </span> The <code class=property>'transition-timing-function'</code> 1.22 Property </a> 1.23 1.24 - <li><a href="#the-transition-delay-property-"><span class=secno>2.4. 1.25 - </span> The <code class=property>'transition-delay'</code> Property 1.26 - </a> 1.27 + <li><a href="#the-transition-delay"><span class=secno>2.4. </span> The 1.28 + <code class=property>'transition-delay'</code> Property </a> 1.29 1.30 - <li><a href="#the-transition-shorthand-property-"><span class=secno>2.5. 1.31 - </span> The <code class=property>'transition'</code> Shorthand Property 1.32 - </a> 1.33 + <li><a href="#the-transition-shorthand"><span class=secno>2.5. </span> 1.34 + The <code class=property>'transition'</code> Shorthand Property </a> 1.35 </ul> 1.36 1.37 <li><a href="#starting"><span class=secno>3. </span> Starting of 1.38 @@ -180,20 +176,20 @@ 1.39 <li><a href="#reversing"><span class=secno>4. </span> Automatically 1.40 reversing interrupted transitions </a> 1.41 1.42 - <li><a href="#transition-events-"><span class=secno>5. </span> Transition 1.43 + <li><a href="#transition-events"><span class=secno>5. </span> Transition 1.44 Events </a> 1.45 1.46 - <li><a href="#animation-of-property-types-"><span class=secno>6. </span> 1.47 - Animation of property types </a> 1.48 + <li><a href="#animatable-types"><span class=secno>6. </span> Animation of 1.49 + property types </a> 1.50 1.51 - <li><a href="#animatable-properties-"><span class=secno>7. </span> 1.52 + <li><a href="#animatable-properties"><span class=secno>7. </span> 1.53 Animatable properties </a> 1.54 <ul class=toc> 1.55 - <li><a href="#properties-from-css-"><span class=secno>7.1. </span> 1.56 - Properties from CSS </a> 1.57 + <li><a href="#animatable-css"><span class=secno>7.1. </span> Properties 1.58 + from CSS </a> 1.59 1.60 - <li><a href="#properties-from-svg-"><span class=secno>7.2. </span> 1.61 - Properties from SVG </a> 1.62 + <li><a href="#animatable-svg"><span class=secno>7.2. </span> Properties 1.63 + from SVG </a> 1.64 </ul> 1.65 1.66 <li><a href="#acknowledgments"><span class=secno>8. 1.67 @@ -321,9 +317,9 @@ 1.68 class=property>'width'</code> property of 1 second duration.</div> 1.69 <!-- ======================================================================================================= --> 1.70 1.71 - <h3 id=the-transition-property-property-><span class=secno>2.1. </span> The 1.72 - <a href="#transition-property"><code 1.73 - class=property>'transition-property'</code></a> Property</h3> 1.74 + <h3 id=the-transition-property><span class=secno>2.1. </span><a 1.75 + id=the-transition-property-property-> The <code 1.76 + class=property>'transition-property'</code> Property </a></h3> 1.77 1.78 <p> The <a href="#transition-property"><code 1.79 class=property>'transition-property'</code></a> property specifies the 1.80 @@ -425,9 +421,9 @@ 1.81 properties.</p> 1.82 <!-- ======================================================================================================= --> 1.83 1.84 - <h3 id=the-transition-duration-property-><span class=secno>2.2. </span> The 1.85 - <a href="#transition-duration"><code 1.86 - class=property>'transition-duration'</code></a> Property</h3> 1.87 + <h3 id=the-transition-duration><span class=secno>2.2. </span><a 1.88 + id=the-transition-duration-property-> The <code 1.89 + class=property>'transition-duration'</code> Property </a></h3> 1.90 1.91 <p> The <a href="#transition-duration"><code 1.92 class=property>'transition-duration'</code></a> property defines the 1.93 @@ -486,9 +482,9 @@ 1.94 <!-- ======================================================================================================= 1.95 --> 1.96 1.97 - <h3 id="transition-timing-function_tag"><span class=secno>2.3. </span> The 1.98 - <a href="#transition-timing-function"><code 1.99 - class=property>'transition-timing-function'</code></a> Property</h3> 1.100 + <h3 id=the-transition-timing-function><span class=secno>2.3. </span><a 1.101 + id="transition-timing-function_tag"> The <code 1.102 + class=property>'transition-timing-function'</code> Property </a></h3> 1.103 1.104 <p> The <a href="#transition-timing-function"><code 1.105 class=property>'transition-timing-function'</code></a> property describes 1.106 @@ -643,9 +639,9 @@ 1.107 </dl> 1.108 <!-- ======================================================================================================= --> 1.109 1.110 - <h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The <a 1.111 - href="#transition-delay"><code 1.112 - class=property>'transition-delay'</code></a> Property</h3> 1.113 + <h3 id=the-transition-delay><span class=secno>2.4. </span><a 1.114 + id=the-transition-delay-property-> The <code 1.115 + class=property>'transition-delay'</code> Property </a></h3> 1.116 1.117 <p> The <a href="#transition-delay"><code 1.118 class=property>'transition-delay'</code></a> property defines when the 1.119 @@ -712,9 +708,9 @@ 1.120 </table> 1.121 <!-- ======================================================================================================= --> 1.122 1.123 - <h3 id=the-transition-shorthand-property-><span class=secno>2.5. </span> 1.124 - The <a href="#transition"><code class=property>'transition'</code></a> 1.125 - Shorthand Property</h3> 1.126 + <h3 id=the-transition-shorthand><span class=secno>2.5. </span><a 1.127 + id=the-transition-shorthand-property-> The <code 1.128 + class=property>'transition'</code> Shorthand Property </a></h3> 1.129 1.130 <p> The <a href="#transition"><code class=property>'transition'</code></a> 1.131 shorthand property combines the four properties described above into a 1.132 @@ -967,7 +963,8 @@ 1.133 href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January 1.134 2010 part</a>. 1.135 1.136 - <h2 id=transition-events-><span class=secno>5. </span> Transition Events</h2> 1.137 + <h2 id=transition-events><span class=secno>5. </span><a 1.138 + id=transition-events-> Transition Events </a></h2> 1.139 1.140 <p> The completion of a CSS Transition generates a corresponding <a 1.141 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>. 1.142 @@ -1141,8 +1138,8 @@ 1.143 </ul> 1.144 </dl> 1.145 1.146 - <h2 id=animation-of-property-types-><span class=secno>6. </span> Animation 1.147 - of property types</h2> 1.148 + <h2 id=animatable-types><span class=secno>6. </span><a 1.149 + id=animation-of-property-types-> Animation of property types </a></h2> 1.150 1.151 <p> The following describes how each property type undergoes transition or 1.152 animation. 1.153 @@ -1225,8 +1222,8 @@ 1.154 can result from cubic-bezier(). Clamping values to the allowed range is 1.155 probably the best solution. 1.156 1.157 - <h2 id=animatable-properties-><span class=secno>7. </span> Animatable 1.158 - properties</h2> 1.159 + <h2 id=animatable-properties><span class=secno>7. </span><a 1.160 + id=animatable-properties-> Animatable properties </a></h2> 1.161 <!-- 1.162 As resolved in 1.163 http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html 1.164 @@ -1249,8 +1246,8 @@ 1.165 the property animates. Such definitions override those given in this 1.166 specification. 1.167 1.168 - <h3 id=properties-from-css-><span class=secno>7.1. </span> Properties from 1.169 - CSS</h3> 1.170 + <h3 id=animatable-css><span class=secno>7.1. </span><a 1.171 + id=properties-from-css-> Properties from CSS </a></h3> 1.172 1.173 <table class=animatable-properties> 1.174 <tbody> 1.175 @@ -1498,8 +1495,8 @@ 1.176 column-rule-width, column-width, font-size-adjust, font-stretch, 1.177 marker-offset, text-decoration-color, transform, transform-origin. 1.178 1.179 - <h3 id=properties-from-svg-><span class=secno>7.2. </span> Properties from 1.180 - SVG</h3> 1.181 + <h3 id=animatable-svg><span class=secno>7.2. </span><a 1.182 + id=properties-from-svg-> Properties from SVG </a></h3> 1.183 1.184 <p> All properties defined as animatable in the SVG specification, provided 1.185 they are one of the property types listed above.</p>
2.1 --- a/css3-transitions/Overview.src.html Thu Mar 29 22:49:28 2012 +0200 2.2 +++ b/css3-transitions/Overview.src.html Thu Mar 29 14:37:26 2012 -0700 2.3 @@ -176,9 +176,9 @@ 2.4 </div> 2.5 2.6 <!-- ======================================================================================================= --> 2.7 - <h3> 2.8 + <h3 id=the-transition-property><a id=the-transition-property-property-> 2.9 The <code class="property">'transition-property'</code> Property 2.10 - </h3> 2.11 + </a></h3> 2.12 <p> 2.13 The <code class="property">'transition-property'</code> property specifies the name of the CSS property to which the transition is applied. 2.14 </p> 2.15 @@ -298,9 +298,9 @@ 2.16 </p> 2.17 2.18 <!-- ======================================================================================================= --> 2.19 - <h3> 2.20 + <h3 id=the-transition-duration><a id=the-transition-duration-property-> 2.21 The <code class="property">'transition-duration'</code> Property 2.22 - </h3> 2.23 + </a></h3> 2.24 <p> 2.25 The <code class="property">'transition-duration'</code> property defines the length of time that a transition takes. 2.26 </p> 2.27 @@ -379,9 +379,9 @@ 2.28 <!-- ======================================================================================================= 2.29 --> 2.30 2.31 - <h3 id="transition-timing-function_tag"> 2.32 + <h3 id="the-transition-timing-function"><a id=transition-timing-function_tag> 2.33 The <code class="property">'transition-timing-function'</code> Property 2.34 - </h3> 2.35 + </a></h3> 2.36 <p> 2.37 The <code class="property">'transition-timing-function'</code> property 2.38 describes how the intermediate values used during a transition will be 2.39 @@ -585,9 +585,9 @@ 2.40 exceed this range. 2.41 </dd> 2.42 </dl><!-- ======================================================================================================= --> 2.43 - <h3> 2.44 + <h3 id=the-transition-delay><a id=the-transition-delay-property-> 2.45 The <code class="property">'transition-delay'</code> Property 2.46 - </h3> 2.47 + </a></h3> 2.48 <p> 2.49 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.50 </p> 2.51 @@ -662,9 +662,9 @@ 2.52 </tr> 2.53 </tbody> 2.54 </table><!-- ======================================================================================================= --> 2.55 - <h3> 2.56 + <h3 id=the-transition-shorthand><a id=the-transition-shorthand-property-> 2.57 The <code class="property">'transition'</code> Shorthand Property 2.58 - </h3> 2.59 + </a></h3> 2.60 <p> 2.61 The <code class="property">'transition'</code> shorthand property combines the four properties described above into a single property. 2.62 </p> 2.63 @@ -926,9 +926,9 @@ 2.64 <a href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January 2010 part</a>. 2.65 </p> 2.66 2.67 - <h2> 2.68 + <h2 id=transition-events><a id=transition-events-> 2.69 Transition Events 2.70 - </h2> 2.71 + </a></h2> 2.72 <p> 2.73 The completion of a CSS Transition generates a corresponding <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>. 2.74 An event is fired for each property that undergoes a transition. 2.75 @@ -1107,9 +1107,9 @@ 2.76 </dd> 2.77 </dl> 2.78 2.79 - <h2 id="animation-of-property-types-"> 2.80 + <h2 id="animatable-types"><a id=animation-of-property-types-> 2.81 Animation of property types 2.82 - </h2> 2.83 + </a></h2> 2.84 2.85 <p> 2.86 The following describes how each property type undergoes transition or 2.87 @@ -1210,9 +1210,9 @@ 2.88 values that can result from cubic-bezier(). Clamping values to the 2.89 allowed range is probably the best solution.</p> 2.90 2.91 - <h2> 2.92 + <h2 id=animatable-properties><a id=animatable-properties-> 2.93 Animatable properties 2.94 - </h2> 2.95 + </a></h2> 2.96 2.97 <!-- 2.98 As resolved in 2.99 @@ -1237,9 +1237,9 @@ 2.100 the property animates. Such definitions override those given in 2.101 this specification.</p> 2.102 2.103 - <h3> 2.104 + <h3 id=animatable-css><a id=properties-from-css-> 2.105 Properties from CSS 2.106 - </h3> 2.107 + </a></h3> 2.108 2.109 <table class="animatable-properties"> 2.110 <tr> 2.111 @@ -1404,9 +1404,9 @@ 2.112 transform-origin. 2.113 </p> 2.114 2.115 - <h3> 2.116 + <h3 id=animatable-svg><a id=properties-from-svg-> 2.117 Properties from SVG 2.118 - </h3> 2.119 + </a></h3> 2.120 2.121 <p> 2.122 All properties defined as animatable in the SVG specification, provided