8000 Make better ids, and add a elements with the old ids for backwards co… · simonwuelker/csswg-drafts@1820231 · GitHub
Skip to content

Commit 1820231

Browse files
dbarondbaron
committed
Make better ids, and add a elements with the old ids for backwards compatibility (but no new links).
1 parent 5de9017 commit 1820231

2 files changed

Lines changed: 86 additions & 87 deletions

File tree

‎css3-animations/Overview.html‎

Lines changed: 61 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@
1616

1717
<h1>CSS Animations</h1>
1818

19-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 March 2012</h2>
19+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 March 2012</h2>
2020

2121
<dl>
2222
<dt>This version:
2323

2424
<dd><a
25-
href="http://www.w3.org/TR/2012/ED-css3-animations-20120329/">http://dev.w3.org/csswg/css3-animations/</a>
26-
<!--http://www.w3.org/TR/2012/WD-css3-animations-20120329-->
25+
href="http://www.w3.org/TR/2012/ED-css3-animations-20120330/">http://dev.w3.org/csswg/css3-animations/</a>
26+
<!--http://www.w3.org/TR/2012/WD-css3-animations-20120330-->
2727

2828
<dt>Latest version:
2929

@@ -148,49 +148,44 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
148148

149149
<li><a href="#keyframes"><span class=secno>3. </span>Keyframes</a>
150150
<ul class=toc>
151-
<li><a href="#timing-functions-for-keyframes-"><span class=secno>3.1.
152-
</span> Timing functions for keyframes </a>
151+
<li><a href="#timing-functions"><span class=secno>3.1. </span> Timing
152+
functions for keyframes </a>
153153

154-
<li><a href="#the-animation-name-property-"><span class=secno>3.2.
155-
</span> The <code class=property>'animation-name'</code> Property </a>
154+
<li><a href="#the-animation-name"><span class=secno>3.2. </span> The
155+
<code class=property>'animation-name'</code> Property </a>
156156

157-
<li><a href="#the-animation-duration-property-"><span class=secno>3.3.
158-
</span> The <code class=property>'animation-duration'</code> Property
159-
</a>
157+
<li><a href="#the-animation-duration"><span class=secno>3.3. </span> The
158+
<code class=property>'animation-duration'</code> Property </a>
160159

161-
<li><a href="#animation-timing-function_tag"><span class=secno>3.4.
160+
<li><a href="#the-animation-timing-function"><span class=secno>3.4.
162161
</span> The <code class=property>'animation-timing-function'</code>
163162
Property </a>
164163

165-
<li><a href="#the-animation-iteration-count-property-"><span
166-
class=secno>3.5. </span> The <code
167-
class=property>'animation-iteration-count'</code> Property </a>
164+
<li><a href="#the-animation-iteration-count"><span class=secno>3.5.
165+
</span> The <code class=property>'animation-iteration-count'</code>
166+
Property </a>
168167

169-
<li><a href="#the-animation-direction-property-"><span class=secno>3.6.
170-
</span> The <code class=property>'animation-direction'</code> Property
171-
</a>
168+
<li><a href="#the-animation-direction"><span class=secno>3.6. </span>
169+
The <code class=property>'animation-direction'</code> Property </a>
172170

173-
<li><a href="#the-animation-play-state-property-"><span class=secno>3.7.
174-
</span> The <code class=property>'animation-play-state'</code> Property
175-
</a>
171+
<li><a href="#the-animation-play-state"><span class=secno>3.7.
172+
</span><span> The <code class=property>'animation-play-state'</code>
173+
Property </span></a>
176174

177-
<li><a href="#the-animation-delay-property-"><span class=secno>3.8.
178-
</span> The <code class=property>'animation-delay'</code> Property </a>
179-
175+
<li><a href="#the-animation-delay"><span class=secno>3.8. </span> The
176+
<code class=property>'animation-delay'</code> Property </a>
180177

181-
<li><a href="#the-animation-fill-mode-property-"><span class=secno>3.9.
182-
</span> The <code class=property>'animation-fill-mode'</code> Property
183-
</a>
178+
<li><a href="#the-animation-fill-mode"><span class=secno>3.9. </span>
179+
The <code class=property>'animation-fill-mode'</code> Property </a>
184180

185-
<li><a href="#the-animation-shorthand-property-"><span class=secno>3.10.
186-
</span> The <code class=property>'animation'</code> Shorthand Property
187-
</a>
181+
<li><a href="#the-animation"><span class=secno>3.10. </span> The <code
182+
class=property>'animation'</code> Shorthand Property </a>
188183
</ul>
189184

190-
<li><a href="#animation-events-"><span class=secno>4. </span> Animation
185+
<li><a href="#animation-events"><span class=secno>4. </span> Animation
191186
Events </a>
192187

193-
<li><a href="#dom-interfaces-"><span class=secno>5. </span> DOM Interfaces
188+
<li><a href="#dom-interfaces"><span class=secno>5. </span> DOM Interfaces
194189
</a>
195190

196191
<li><a href="#acknowledgments"><span class=secno>6.
@@ -441,8 +436,9 @@ <h2 id=keyframes><span class=secno>3. </span>Keyframes</h2>
441436
</pre>
442437
<!-- ======================================================================================================= -->
443438

444-
<h3 id=timing-functions-for-keyframes-><span class=secno>3.1. </span>
445-
Timing functions for keyframes</h3>
439+
<h3 id=timing-functions><span class=secno>3.1. </span><a
440+
id="id=timing-functions-for-keyframes-"> Timing functions for keyframes
441+
</a></h3>
446442

447443
<p> A keyframe style rule may also declare the timing function that is to
448444
be used as the animation moves to the next keyframe.
@@ -496,9 +492,9 @@ <h3 id=timing-functions-for-keyframes-><span class=secno>3.1. </span>
496492
<!-- ======================================================================================================= -->
497493
<!-- ======================================================================================================= -->
498494

499-
<h3 id=the-animation-name-property-><span class=secno>3.2. </span> The <a
500-
href="#animation-name"><code class=property>'animation-name'</code></a>
501-
Property</h3>
495+
<h3 id=the-animation-name><span class=secno>3.2. </span><a
496+
id=the-animation-name-property-> The <code
497+
class=property>'animation-name'</code> Property </a></h3>
502498

503499
<p> The <a href="#animation-name"><code
504500
class=property>'animation-name'</code></a> property defines a list of
@@ -606,9 +602,9 @@ <h3 id=the-animation-name-property-><span class=secno>3.2. </span> The <a
606602
-->
607603
<!-- ======================================================================================================= -->
608604

609-
<h3 id=the-animation-duration-property-><span class=secno>3.3. </span> The
610-
<a href="#animation-duration"><code
611-
class=property>'animation-duration'</code></a> Property</h3>
605+
<h3 id=the-animation-duration><span class=secno>3.3. </span><a
606+
id=the-animation-duration-property-> The <code
607+
class=property>'animation-duration'</code> Property </a></h3>
612608

613609
<p> The <a href="#animation-duration"><code
614610
class=property>'animation-duration'</code></a> property defines the length
@@ -670,9 +666,9 @@ <h3 id=the-animation-duration-property-><span class=secno>3.3. </span> The
670666
instantaneous. Also, animation events are still fired.</p>
671667
<!-- ================================================================================================== 6724 ===== -->
672668

673-
<h3 id="animation-timing-function_tag"><span class=secno>3.4. </span> The
674-
<a href="#animation-timing-function"><code
675-
class=property>'animation-timing-function'</code></a> Property</h3>
669+
<h3 id=the-animation-timing-function><span class=secno>3.4. </span><a
670+
id="animation-timing-function_tag"> The <code
671+
class=property>'animation-timing-function'</code> Property </a></h3>
676672

677673
<p> The <a href="#animation-timing-function"><code
678674
class=property>'animation-timing-function'</code></a> property describes
@@ -743,9 +739,9 @@ <h3 id="animation-timing-function_tag"><span class=secno>3.4. </span> The
743739
specified for the animation is used.</p>
744740
<!-- ======================================================================================================= -->
745741

746-
<h3 id=the-animation-iteration-count-property-><span class=secno>3.5.
747-
</span> The <a href="#animation-iteration-count"><code
748-
class=property>'animation-iteration-count'</code></a> Property</h3>
742+
<h3 id=the-animation-iteration-count><span class=secno>3.5. </span><a
743+
id=the-animation-iteration-count-property-> The <code
744+
class=property>'animation-iteration-count'</code> Property </a></h3>
749745

750746
<p> The <a href="#animation-iteration-count"><code
751747
class=property>'animation-iteration-count'</code></a> property defines the
@@ -805,9 +801,9 @@ <h3 id=the-animation-iteration-count-property-><span class=secno>3.5.
805801
</table>
806802
<!-- ======================================================================================================= -->
807803

808-
<h3 id=the-animation-direction-property-><span class=secno>3.6. </span> The
809-
<a href="#animation-direction"><code
810-
class=property>'animation-direction'</code></a> Property</h3>
804+
<h3 id=the-animation-direction><span class=secno>3.6. </span><a
805+
id=the-animation-direction-property-> The <code
806+
class=property>'animation-direction'</code> Property </a></h3>
811807

812808
<p> The <a href="#animation-direction"><code
813809
class=property>'animation-direction'</code></a> property defines whether
@@ -884,9 +880,10 @@ <h3 id=the-animation-direction-property-><span class=secno>3.6. </span> The
884880
</dl>
885881
<!-- ======================================================================================================= -->
886882

887-
<h3 id=the-animation-play-state-property-><span class=secno>3.7. </span>
888-
The <a href="#animation-play-state"><code
889-
class=property>'animation-play-state'</code></a> Property</h3>
883+
<h3 id=the-animation-play-state><span class=secno>3.7. </span><span
884+
id=the-animation-play-state-property-> The <a
885+
href="#animation-play-state"><code
886+
class=property>'animation-play-state'</code></a> Property </span></h3>
890887

891888
<p> The <a href="#animation-play-state"><code
892889
class=property>'animation-play-state'</code></a> property defines whether
@@ -943,9 +940,9 @@ <h3 id=the-animation-play-state-property-><span class=secno>3.7. </span>
943940
</table>
944941
<!-- ======================================================================================================= -->
945942

946-
<h3 id=the-animation-delay-property-><span class=secno>3.8. </span> The <a
947-
href="#animation-delay"><code class=property>'animation-delay'</code></a>
948-
Property</h3>
943+
<h3 id=the-animation-delay><span class=secno>3.8. </span><a
944+
id=the-animation-delay-property-> The <code
945+
class=property>'animation-delay'</code> Property </a></h3>
949946

950947
<p> The <a href="#animation-delay"><code
951948
class=property>'animation-delay'</code></a> property defines when the
@@ -1010,9 +1007,9 @@ <h3 id=the-animation-delay-property-><span class=secno>3.8. </span> The <a
10101007
</table>
10111008
<!-- ======================================================================================================= -->
10121009

1013-
<h3 id=the-animation-fill-mode-property-><span class=secno>3.9. </span> The
1014-
<a href="#animation-fill-mode"><code
1015-
class=property>'animation-fill-mode'</code></a> Property</h3>
1010+
<h3 id=the-animation-fill-mode><span class=secno>3.9. </span><a
1011+
id=the-animation-fill-mode-property-> The <code
1012+
class=property>'animation-fill-mode'</code> Property </a></h3>
10161013

10171014
<p> The <a href="#animation-fill-mode"><code
10181015
class=property>'animation-fill-mode'</code></a> property defines what
@@ -1103,9 +1100,9 @@ <h3 id=the-animation-fill-mode-property-><span class=secno>3.9. </span> The
11031100
</table>
11041101
<!-- ======================================================================================================= -->
11051102

1106-
<h3 id=the-animation-shorthand-property-><span class=secno>3.10. </span>
1107-
The <a href="#animation"><code class=property>'animation'</code></a>
1108-
Shorthand Property</h3>
1103+
<h3 id=the-animation><span class=secno>3.10. </span><a
1104+
id=the-animation-shorthand-property-> The <code
1105+
class=property>'animation'</code> Shorthand Property </a></h3>
11091106

11101107
<p> The <a href="#animation"><code class=property>'animation'</code></a>
11111108
shorthand property combines seven of the animation properties into a
@@ -1169,7 +1166,8 @@ <h3 id=the-animation-shorthand-property-><span class=secno>3.10. </span>
11691166
</table>
11701167
<!-- ======================================================================================================= -->
11711168

1172-
<h2 id=animation-events-><span class=secno>4. </span> Animation Events</h2>
1169+
<h2 id=animation-events><span class=secno>4. </span><a
1170+
id=animation-events-> Animation Events </a></h2>
11731171

11741172
<p> Several animation related events are available through the <a
11751173
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event
@@ -1358,7 +1356,8 @@ <h2 id=animation-events-><span class=secno>4. </span> Animation Events</h2>
13581356
</dl>
13591357
<!-- ======================================================================================================= -->
13601358

1361-
<h2 id=dom-interfaces-><span class=secno>5. </span> DOM Interfaces</h2>
1359+
<h2 id=dom-interfaces><span class=secno>5. </span><a id=dom-interfaces->
1360+
DOM Interfaces </a></h2>
13621361

13631362
<p> CSS animation is exposed to the CSSOM through a pair of new interfaces
13641363
describing the keyframes.

0 commit comments

Comments
 (0)