changeset
Make better ids, and add a elements with the old ids for backwards compatibility (but no new links).
Thu, 29 Mar 2012 21:43:27 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Thu, 29 Mar 2012 21:43:27 -0700
- changeset 5338
- f7fce48e3b61
- parent 5337
- 93b3b5d20bf0
- child 5339
- d8c135bd7251
Make better ids, and add a elements with the old ids for backwards compatibility (but no new links).
| css3-animations/Overview.html | file | annotate | diff | comparison | revisions | |
| css3-animations/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-animations/Overview.html Thu Mar 29 19:28:39 2012 -0700 1.2 +++ b/css3-animations/Overview.html Thu Mar 29 21:43:27 2012 -0700 1.3 @@ -16,14 +16,14 @@ 1.4 1.5 <h1>CSS Animations</h1> 1.6 1.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 March 2012</h2> 1.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 March 2012</h2> 1.9 1.10 <dl> 1.11 <dt>This version: 1.12 1.13 <dd><a 1.14 - href="http://www.w3.org/TR/2012/ED-css3-animations-20120329/">http://dev.w3.org/csswg/css3-animations/</a> 1.15 - <!--http://www.w3.org/TR/2012/WD-css3-animations-20120329--> 1.16 + href="http://www.w3.org/TR/2012/ED-css3-animations-20120330/">http://dev.w3.org/csswg/css3-animations/</a> 1.17 + <!--http://www.w3.org/TR/2012/WD-css3-animations-20120330--> 1.18 1.19 <dt>Latest version: 1.20 1.21 @@ -148,49 +148,44 @@ 1.22 1.23 <li><a href="#keyframes"><span class=secno>3. </span>Keyframes</a> 1.24 <ul class=toc> 1.25 - <li><a href="#timing-functions-for-keyframes-"><span class=secno>3.1. 1.26 - </span> Timing functions for keyframes </a> 1.27 + <li><a href="#timing-functions"><span class=secno>3.1. </span> Timing 1.28 + functions for keyframes </a> 1.29 1.30 - <li><a href="#the-animation-name-property-"><span class=secno>3.2. 1.31 - </span> The <code class=property>'animation-name'</code> Property </a> 1.32 + <li><a href="#the-animation-name"><span class=secno>3.2. </span> The 1.33 + <code class=property>'animation-name'</code> Property </a> 1.34 1.35 - <li><a href="#the-animation-duration-property-"><span class=secno>3.3. 1.36 - </span> The <code class=property>'animation-duration'</code> Property 1.37 - </a> 1.38 + <li><a href="#the-animation-duration"><span class=secno>3.3. </span> The 1.39 + <code class=property>'animation-duration'</code> Property </a> 1.40 1.41 - <li><a href="#animation-timing-function_tag"><span class=secno>3.4. 1.42 + <li><a href="#the-animation-timing-function"><span class=secno>3.4. 1.43 </span> The <code class=property>'animation-timing-function'</code> 1.44 Property </a> 1.45 1.46 - <li><a href="#the-animation-iteration-count-property-"><span 1.47 - class=secno>3.5. </span> The <code 1.48 - class=property>'animation-iteration-count'</code> Property </a> 1.49 + <li><a href="#the-animation-iteration-count"><span class=secno>3.5. 1.50 + </span> The <code class=property>'animation-iteration-count'</code> 1.51 + Property </a> 1.52 1.53 - <li><a href="#the-animation-direction-property-"><span class=secno>3.6. 1.54 - </span> The <code class=property>'animation-direction'</code> Property 1.55 - </a> 1.56 + <li><a href="#the-animation-direction"><span class=secno>3.6. </span> 1.57 + The <code class=property>'animation-direction'</code> Property </a> 1.58 1.59 - <li><a href="#the-animation-play-state-property-"><span class=secno>3.7. 1.60 - </span> The <code class=property>'animation-play-state'</code> Property 1.61 - </a> 1.62 + <li><a href="#the-animation-play-state"><span class=secno>3.7. 1.63 + </span><span> The <code class=property>'animation-play-state'</code> 1.64 + Property </span></a> 1.65 1.66 - <li><a href="#the-animation-delay-property-"><span class=secno>3.8. 1.67 - </span> The <code class=property>'animation-delay'</code> Property </a> 1.68 - 1.69 + <li><a href="#the-animation-delay"><span class=secno>3.8. </span> The 1.70 + <code class=property>'animation-delay'</code> Property </a> 1.71 1.72 - <li><a href="#the-animation-fill-mode-property-"><span class=secno>3.9. 1.73 - </span> The <code class=property>'animation-fill-mode'</code> Property 1.74 - </a> 1.75 + <li><a href="#the-animation-fill-mode"><span class=secno>3.9. </span> 1.76 + The <code class=property>'animation-fill-mode'</code> Property </a> 1.77 1.78 - <li><a href="#the-animation-shorthand-property-"><span class=secno>3.10. 1.79 - </span> The <code class=property>'animation'</code> Shorthand Property 1.80 - </a> 1.81 + <li><a href="#the-animation"><span class=secno>3.10. </span> The <code 1.82 + class=property>'animation'</code> Shorthand Property </a> 1.83 </ul> 1.84 1.85 - <li><a href="#animation-events-"><span class=secno>4. </span> Animation 1.86 + <li><a href="#animation-events"><span class=secno>4. </span> Animation 1.87 Events </a> 1.88 1.89 - <li><a href="#dom-interfaces-"><span class=secno>5. </span> DOM Interfaces 1.90 + <li><a href="#dom-interfaces"><span class=secno>5. </span> DOM Interfaces 1.91 </a> 1.92 1.93 <li><a href="#acknowledgments"><span class=secno>6. 1.94 @@ -441,8 +436,9 @@ 1.95 </pre> 1.96 <!-- ======================================================================================================= --> 1.97 1.98 - <h3 id=timing-functions-for-keyframes-><span class=secno>3.1. </span> 1.99 - Timing functions for keyframes</h3> 1.100 + <h3 id=timing-functions><span class=secno>3.1. </span><a 1.101 + id="id=timing-functions-for-keyframes-"> Timing functions for keyframes 1.102 + </a></h3> 1.103 1.104 <p> A keyframe style rule may also declare the timing function that is to 1.105 be used as the animation moves to the next keyframe. 1.106 @@ -496,9 +492,9 @@ 1.107 <!-- ======================================================================================================= --> 1.108 <!-- ======================================================================================================= --> 1.109 1.110 - <h3 id=the-animation-name-property-><span class=secno>3.2. </span> The <a 1.111 - href="#animation-name"><code class=property>'animation-name'</code></a> 1.112 - Property</h3> 1.113 + <h3 id=the-animation-name><span class=secno>3.2. </span><a 1.114 + id=the-animation-name-property-> The <code 1.115 + class=property>'animation-name'</code> Property </a></h3> 1.116 1.117 <p> The <a href="#animation-name"><code 1.118 class=property>'animation-name'</code></a> property defines a list of 1.119 @@ -606,9 +602,9 @@ 1.120 --> 1.121 <!-- ======================================================================================================= --> 1.122 1.123 - <h3 id=the-animation-duration-property-><span class=secno>3.3. </span> The 1.124 - <a href="#animation-duration"><code 1.125 - class=property>'animation-duration'</code></a> Property</h3> 1.126 + <h3 id=the-animation-duration><span class=secno>3.3. </span><a 1.127 + id=the-animation-duration-property-> The <code 1.128 + class=property>'animation-duration'</code> Property </a></h3> 1.129 1.130 <p> The <a href="#animation-duration"><code 1.131 class=property>'animation-duration'</code></a> property defines the length 1.132 @@ -670,9 +666,9 @@ 1.133 instantaneous. Also, animation events are still fired.</p> 1.134 <!-- ======================================================================================================= --> 1.135 1.136 - <h3 id="animation-timing-function_tag"><span class=secno>3.4. </span> The 1.137 - <a href="#animation-timing-function"><code 1.138 - class=property>'animation-timing-function'</code></a> Property</h3> 1.139 + <h3 id=the-animation-timing-function><span class=secno>3.4. </span><a 1.140 + id="animation-timing-function_tag"> The <code 1.141 + class=property>'animation-timing-function'</code> Property </a></h3> 1.142 1.143 <p> The <a href="#animation-timing-function"><code 1.144 class=property>'animation-timing-function'</code></a> property describes 1.145 @@ -743,9 +739,9 @@ 1.146 specified for the animation is used.</p> 1.147 <!-- ======================================================================================================= --> 1.148 1.149 - <h3 id=the-animation-iteration-count-property-><span class=secno>3.5. 1.150 - </span> The <a href="#animation-iteration-count"><code 1.151 - class=property>'animation-iteration-count'</code></a> Property</h3> 1.152 + <h3 id=the-animation-iteration-count><span class=secno>3.5. </span><a 1.153 + id=the-animation-iteration-count-property-> The <code 1.154 + class=property>'animation-iteration-count'</code> Property </a></h3> 1.155 1.156 <p> The <a href="#animation-iteration-count"><code 1.157 class=property>'animation-iteration-count'</code></a> property defines the 1.158 @@ -805,9 +801,9 @@ 1.159 </table> 1.160 <!-- ======================================================================================================= --> 1.161 1.162 - <h3 id=the-animation-direction-property-><span class=secno>3.6. </span> The 1.163 - <a href="#animation-direction"><code 1.164 - class=property>'animation-direction'</code></a> Property</h3> 1.165 + <h3 id=the-animation-direction><span class=secno>3.6. </span><a 1.166 + id=the-animation-direction-property-> The <code 1.167 + class=property>'animation-direction'</code> Property </a></h3> 1.168 1.169 <p> The <a href="#animation-direction"><code 1.170 class=property>'animation-direction'</code></a> property defines whether 1.171 @@ -884,9 +880,10 @@ 1.172 </dl> 1.173 <!-- ======================================================================================================= --> 1.174 1.175 - <h3 id=the-animation-play-state-property-><span class=secno>3.7. </span> 1.176 - The <a href="#animation-play-state"><code 1.177 - class=property>'animation-play-state'</code></a> Property</h3> 1.178 + <h3 id=the-animation-play-state><span class=secno>3.7. </span><span 1.179 + id=the-animation-play-state-property-> The <a 1.180 + href="#animation-play-state"><code 1.181 + class=property>'animation-play-state'</code></a> Property </span></h3> 1.182 1.183 <p> The <a href="#animation-play-state"><code 1.184 class=property>'animation-play-state'</code></a> property defines whether 1.185 @@ -943,9 +940,9 @@ 1.186 </table> 1.187 <!-- ======================================================================================================= --> 1.188 1.189 - <h3 id=the-animation-delay-property-><span class=secno>3.8. </span> The <a 1.190 - href="#animation-delay"><code class=property>'animation-delay'</code></a> 1.191 - Property</h3> 1.192 + <h3 id=the-animation-delay><span class=secno>3.8. </span><a 1.193 + id=the-animation-delay-property-> The <code 1.194 + class=property>'animation-delay'</code> Property </a></h3> 1.195 1.196 <p> The <a href="#animation-delay"><code 1.197 class=property>'animation-delay'</code></a> property defines when the 1.198 @@ -1010,9 +1007,9 @@ 1.199 </table> 1.200 <!-- ======================================================================================================= --> 1.201 1.202 - <h3 id=the-animation-fill-mode-property-><span class=secno>3.9. </span> The 1.203 - <a href="#animation-fill-mode"><code 1.204 - class=property>'animation-fill-mode'</code></a> Property</h3> 1.205 + <h3 id=the-animation-fill-mode><span class=secno>3.9. </span><a 1.206 + id=the-animation-fill-mode-property-> The <code 1.207 + class=property>'animation-fill-mode'</code> Property </a></h3> 1.208 1.209 <p> The <a href="#animation-fill-mode"><code 1.210 class=property>'animation-fill-mode'</code></a> property defines what 1.211 @@ -1103,9 +1100,9 @@ 1.212 </table> 1.213 <!-- ======================================================================================================= --> 1.214 1.215 - <h3 id=the-animation-shorthand-property-><span class=secno>3.10. </span> 1.216 - The <a href="#animation"><code class=property>'animation'</code></a> 1.217 - Shorthand Property</h3> 1.218 + <h3 id=the-animation><span class=secno>3.10. </span><a 1.219 + id=the-animation-shorthand-property-> The <code 1.220 + class=property>'animation'</code> Shorthand Property </a></h3> 1.221 1.222 <p> The <a href="#animation"><code class=property>'animation'</code></a> 1.223 shorthand property combines seven of the animation properties into a 1.224 @@ -1169,7 +1166,8 @@ 1.225 </table> 1.226 <!-- ======================================================================================================= --> 1.227 1.228 - <h2 id=animation-events-><span class=secno>4. </span> Animation Events</h2> 1.229 + <h2 id=animation-events><span class=secno>4. </span><a 1.230 + id=animation-events-> Animation Events </a></h2> 1.231 1.232 <p> Several animation related events are available through the <a 1.233 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event 1.234 @@ -1358,7 +1356,8 @@ 1.235 </dl> 1.236 <!-- ======================================================================================================= --> 1.237 1.238 - <h2 id=dom-interfaces-><span class=secno>5. </span> DOM Interfaces</h2> 1.239 + <h2 id=dom-interfaces><span class=secno>5. </span><a id=dom-interfaces-> 1.240 + DOM Interfaces </a></h2> 1.241 1.242 <p> CSS animation is exposed to the CSSOM through a pair of new interfaces 1.243 describing the keyframes.
2.1 --- a/css3-animations/Overview.src.html Thu Mar 29 19:28:39 2012 -0700 2.2 +++ b/css3-animations/Overview.src.html Thu Mar 29 21:43:27 2012 -0700 2.3 @@ -96,7 +96,7 @@ 2.4 An animation can also delay its start time. 2.5 </p> 2.6 2.7 - <h2>Animations</h2> 2.8 + <h2 id="animations">Animations</h2> 2.9 2.10 <p> 2.11 CSS Animations affect computed property values. During the execution of an animation, the 2.12 @@ -295,9 +295,9 @@ 2.13 {T}{O} {return TO_SYM;} 2.14 </pre> 2.15 <!-- ======================================================================================================= --> 2.16 - <h3> 2.17 + <h3 id="timing-functions"><a id="id=timing-functions-for-keyframes-"> 2.18 Timing functions for keyframes 2.19 - </h3> 2.20 + </a></h3> 2.21 <p> 2.22 A keyframe style rule may also declare the timing function that is to be used as the animation moves to the next keyframe. 2.23 </p> 2.24 @@ -342,9 +342,9 @@ 2.25 </p><!-- ======================================================================================================= --> 2.26 2.27 <!-- ======================================================================================================= --> 2.28 - <h3> 2.29 + <h3 id="the-animation-name"><a id="the-animation-name-property-"> 2.30 The <code class="property">'animation-name'</code> Property 2.31 - </h3> 2.32 + </a></h3> 2.33 <p> 2.34 The <code class="property">'animation-name'</code> property defines a 2.35 list of animations that apply. Each name is used to select the keyframe at-rule 2.36 @@ -480,9 +480,9 @@ 2.37 2.38 2.39 <!-- ======================================================================================================= --> 2.40 - <h3> 2.41 + <h3 id="the-animation-duration"><a id="the-animation-duration-property-"> 2.42 The <code class="property">'animation-duration'</code> Property 2.43 - </h3> 2.44 + </a></h3> 2.45 <p> 2.46 The <code class="property">'animation-duration'</code> property defines the length of time that an animation takes to complete one cycle. 2.47 </p> 2.48 @@ -567,9 +567,9 @@ 2.49 </p> 2.50 2.51 <!-- ======================================================================================================= --> 2.52 - <h3 id="animation-timing-function_tag"> 2.53 + <h3 id="the-animation-timing-function"><a id="animation-timing-function_tag"> 2.54 The <code class="property">'animation-timing-function'</code> Property 2.55 - </h3> 2.56 + </a></h3> 2.57 <p> 2.58 The <code class="property">'animation-timing-function'</code> property describes how the animation will progress over one cycle of its duration. See the <code class="property">'transition-timing-function'</code> property [[!CSS3-TRANSITIONS]] for a complete description of timing function calculation. 2.59 </p> 2.60 @@ -648,9 +648,9 @@ 2.61 </p> 2.62 2.63 <!-- ======================================================================================================= --> 2.64 - <h3> 2.65 + <h3 id="the-animation-iteration-count"><a id="the-animation-iteration-count-property-"> 2.66 The <code class="property">'animation-iteration-count'</code> Property 2.67 - </h3> 2.68 + </a></h3> 2.69 <p> 2.70 The <code class="property">'animation-iteration-count'</code> property defines the number of times 2.71 an animation cycle is played. The default value is one, meaning the animation will play from 2.72 @@ -728,9 +728,9 @@ 2.73 </tr> 2.74 </tbody> 2.75 </table><!-- ======================================================================================================= --> 2.76 - <h3> 2.77 + <h3 id="the-animation-direction"><a id="the-animation-direction-property-"> 2.78 The <code class="property">'animation-direction'</code> Property 2.79 - </h3> 2.80 + </a></h3> 2.81 <p> 2.82 The <code class="property">'animation-direction'</code> property defines whether or not the animation should play in reverse on some or all cycles. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation. 2.83 </p> 2.84 @@ -813,9 +813,9 @@ 2.85 <dd>The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.</dd> 2.86 </dl> 2.87 <!-- ======================================================================================================= --> 2.88 - <h3> 2.89 + <h3 id="the-animation-play-state"><span id="the-animation-play-state-property-"> 2.90 The <code class="property">'animation-play-state'</code> Property 2.91 - </h3> 2.92 + </a></h3> 2.93 2.94 <p> 2.95 The <code class="property">'animation-play-state'</code> property defines whether the animation is running or paused. A running animation can be paused by setting this property to <code class="css">'paused'</code>. To continue running a paused animation this property can be set to <code class="css">'running'</code>. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation. 2.96 @@ -888,9 +888,9 @@ 2.97 </tr> 2.98 </tbody> 2.99 </table><!-- ======================================================================================================= --> 2.100 - <h3> 2.101 + <h3 id="the-animation-delay"><a id="the-animation-delay-property-"> 2.102 The <code class="property">'animation-delay'</code> Property 2.103 - </h3> 2.104 + </a></h3> 2.105 <p> 2.106 The <code class="property">'animation-delay'</code> property defines 2.107 when the animation will start. It allows an animation to begin 2.108 @@ -977,9 +977,9 @@ 2.109 </tr> 2.110 </tbody> 2.111 </table><!-- ======================================================================================================= --> 2.112 - <h3> 2.113 + <h3 id="the-animation-fill-mode"><a id="the-animation-fill-mode-property-"> 2.114 The <code class="property">'animation-fill-mode'</code> Property 2.115 - </h3> 2.116 + </a></h3> 2.117 <p> 2.118 The <code class="property">'animation-fill-mode'</code> property defines 2.119 what values are applied by the animation outside the time it is executing. 2.120 @@ -1084,9 +1084,9 @@ 2.121 </tr> 2.122 </tbody> 2.123 </table><!-- ======================================================================================================= --> 2.124 - <h3> 2.125 + <h3 id="the-animation"><a id="the-animation-shorthand-property-"> 2.126 The <code class="property">'animation'</code> Shorthand Property 2.127 - </h3> 2.128 + </a></h3> 2.129 <p> 2.130 The <code class="property">'animation'</code> shorthand property 2.131 combines seven of the animation properties into a single property. 2.132 @@ -1182,9 +1182,9 @@ 2.133 </tr> 2.134 </tbody> 2.135 </table><!-- ======================================================================================================= --> 2.136 - <h2> 2.137 + <h2 id="animation-events"><a id="animation-events-"> 2.138 Animation Events 2.139 - </h2> 2.140 + </a></h2> 2.141 <p> 2.142 Several animation related events are available through the <a 2.143 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event 2.144 @@ -1374,9 +1374,9 @@ 2.145 </dd> 2.146 </dl> 2.147 <!-- ======================================================================================================= --> 2.148 - <h2> 2.149 + <h2 id="dom-interfaces"><a id="dom-interfaces-"> 2.150 DOM Interfaces 2.151 - </h2> 2.152 + </a></h2> 2.153 <p> 2.154 CSS animation is exposed to the CSSOM through a pair of new interfaces 2.155 describing the keyframes.
