Skip to content

Commit bcb2c7b

Browse files
fantasaifantasai
committed
Use better IDs, but add a name for compatibility with old ones.
1 parent 636e824 commit bcb2c7b

2 files changed

Lines changed: 62 additions & 65 deletions

File tree

‎css3-transitions/Overview.html‎

Lines changed: 42 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -153,25 +153,21 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
153153

154154
<li><a href="#transitions"><span class=secno>2. </span>Transitions</a>
155155
<ul class=toc>
156-
<li><a href="#the-transition-property-property-"><span class=secno>2.1.
157-
</span> The <code class=property>'transition-property'</code> Property
158-
</a>
156+
<li><a href="#the-transition-property"><span class=secno>2.1. </span>
157+
The <code class=property>'transition-property'</code> Property </a>
159158

160-
<li><a href="#the-transition-duration-property-"><span class=secno>2.2.
161-
</span> The <code class=property>'transition-duration'</code> Property
162-
</a>
159+
<li><a href="#the-transition-duration"><span class=secno>2.2. </span>
160+
The <code class=property>'transition-duration'</code> Property </a>
163161

164-
<li><a href="#transition-timing-function_tag"><span class=secno>2.3.
162+
<li><a href="#the-transition-timing-function"><span class=secno>2.3.
165163
</span> The <code class=property>'transition-timing-function'</code>
166164
Property </a>
167165

168-
<li><a href="#the-transition-delay-property-"><span class=secno>2.4.
169-
</span> The <code class=property>'transition-delay'</code> Property
170-
</a>
166+
<li><a href="#the-transition-delay"><span class=secno>2.4. </span> The
167+
<code class=property>'transition-delay'</code> Property </a>
171168

172-
<li><a href="#the-transition-shorthand-property-"><span class=secno>2.5.
173-
</span> The <code class=property>'transition'</code> Shorthand Property
174-
</a>
169+
<li><a href="#the-transition-shorthand"><span class=secno>2.5. </span>
170+
The <code class=property>'transition'</code> Shorthand Property </a>
175171
</ul>
176172

177173
<li><a href="#starting"><span class=secno>3. </span> Starting of
@@ -180,20 +176,20 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
180176
<li><a href="#reversing"><span class=secno>4. </span> Automatically
181177
reversing interrupted transitions </a>
182178

183-
<li><a href="#transition-events-"><span class=secno>5. </span> Transition
179+
<li><a href="#transition-events"><span class=secno>5. </span> Transition
184180
Events </a>
185181

186-
<li><a href="#animation-of-property-types-"><span class=secno>6. </span>
187-
Animation of property types </a>
182+
<li><a href="#animatable-types"><span class=secno>6. </span> Animation of
183+
property types </a>
188184

189-
<li><a href="#animatable-properties-"><span class=secno>7. </span>
185+
<li><a href="#animatable-properties"><span class=secno>7. </span>
190186
Animatable properties </a>
191187
<ul class=toc>
192-
<li><a href="#properties-from-css-"><span class=secno>7.1. </span>
193-
Properties from CSS </a>
188+
<li><a href="#animatable-css"><span class=secno>7.1. </span> Properties
189+
from CSS </a>
194190

195-
<li><a href="#properties-from-svg-"><span class=secno>7.2. </span>
196-
Properties from SVG </a>
191+
<li><a href="#animatable-svg"><span class=secno>7.2. </span> Properties
192+
from SVG </a>
197193
</ul>
198194

199195
<li><a href="#acknowledgments"><span class=secno>8.
@@ -321,9 +317,9 @@ <h2 id=transitions><span class=secno>2. </span>Transitions</h2>
321317
class=property>'width'</code> property of 1 second duration.</div>
322318
<!-- ======================================================================================================= -->
323319

324-
<h3 id=the-transition-property-property-><span class=secno>2.1. </span> The
325-
<a href="#transition-property"><code
326-
class=property>'transition-property'</code></a> Property</h3>
320+
<h3 id=the-transition-property><span class=secno>2.1. </span><a
321+
id=the-transition-property-property-> The <code
322+
class=property>'transition-property'</code> Property </a></h3>
327323

328324
<p> The <a href="#transition-property"><code
329325
class=property>'transition-property'</code></a> property specifies the
@@ -425,9 +421,9 @@ <h3 id=the-transition-property-property-><span class=secno>2.1. </span> The
425421
properties.</p>
426422
<!-- ======================================================================================================= -->
427423

428-
<h3 id=the-transition-duration-property-><span class=secno>2.2. </span> The
429-
<a href="#transition-duration"><code
430-
class=property>'transition-duration'</code></a> Property</h3>
424+
<h3 id=the-transition-duration><span class=secno>2.2. </span><a
425+
id=the-transition-duration-property-> The <code
426+
class=property>'transition-duration'</code> Property </a></h3>
431427

432428
<p> The <a href="#transition-duration"><code
433429
class=property>'transition-duration'</code></a> property defines the
@@ -486,9 +482,9 @@ <h3 id=the-transition-duration-property-><span class=secno>2.2. </span> The
486482
<!-- =======================================================================================================
487483
-->
488484

489-
<h3 id="transition-timing-function_tag"><span class=secno>2.3. </span> The
490-
<a href="#transition-timing-function"><code
491-
class=property>'transition-timing-function'</code></a> Property</h3>
485+
<h3 id=the-transition-timing-function><span class=secno>2.3. </span><a
486+
id="transition-timing-function_tag"> The <code
487+
class=property>'transition-timing-function'</code> Property </a></h3>
492488

493489
<p> The <a href="#transition-timing-function"><code
494490
class=property>'transition-timing-function'</code></a> property describes
@@ -643,9 +639,9 @@ <h3 id="transition-timing-function_tag"><span class=secno>2.3. </span> The
643639
</dl>
644640
<!-- ======================================================================================================= -->
645641

646-
<h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The <a
647-
href="#transition-delay"><code
648-
class=property>'transition-delay'</code></a> Property</h3>
642+
<h3 id=the-transition-delay><span class=secno>2.4. </span><a
643+
id=the-transition-delay-property-> The <code
644+
class=property>'transition-delay'</code> Property </a></h3>
649645

650646
<p> The <a href="#transition-delay"><code
651647
class=property>'transition-delay'</code></a> property defines when the
@@ -712,9 +708,9 @@ <h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The <a
712708
</table>
713709
<!-- ======================================================================================================= -->
714710

715-
<h3 id=the-transition-shorthand-property-><span class=secno>2.5. </span>
716-
The <a href="#transition"><code class=property>'transition'</code></a>
717-
Shorthand Property</h3>
711+
<h3 id=the-transition-shorthand><span class=secno>2.5. </span><a
712+
id=the-transition-shorthand-property-> The <code
713+
class=property>'transition'</code> Shorthand Property </a></h3>
718714

719715
<p> The <a href="#transition"><code class=property>'transition'</code></a>
720716
shorthand property combines the four properties described above into a
@@ -967,7 +963,8 @@ <h2 id=reversing><span class=secno>4. </span> Automatically reversing
967963
href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January
968964
2010 part</a>.
969965

970-
<h2 id=transition-events-><span class=secno>5. </span> Transition Events</h2>
966+
<h2 id=transition-events><span class=secno>5. </span><a
967+
id=transition-events-> Transition Events </a></h2>
971968

972969
<p> The completion of a CSS Transition generates a corresponding <a
973970
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>.
@@ -1141,8 +1138,8 @@ <h2 id=transition-events-><span class=secno>5. </span> Transition Events</h2>
11411138
</ul>
11421139
</dl>
11431140

1144-
<h2 id=animation-of-property-types-><span class=secno>6. </span> Animation
1145-
of property types</h2>
1141+
<h2 id=animatable-types><span class=secno>6. </span><a
1142+
id=animation-of-property-types-> Animation of property types </a></h2>
11461143

11471144
<p> The following describes how each property type undergoes transition or
11481145
animation.
@@ -1225,8 +1222,8 @@ <h2 id=animation-of-property-types-><span class=secno>6. </span> Animation
12251222
can result from cubic-bezier(). Clamping values to the allowed range is
12261223
probably the best solution.
12271224

1228-
<h2 id=animatable-properties-><span class=secno>7. </span> Animatable
1229-
properties</h2>
1225+
<h2 id=animatable-properties><span class=secno>7. </span><a
1226+
id=animatable-properties-> Animatable properties </a></h2>
12301227
<!--
12311228
As resolved in
12321229
http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html
@@ -1249,8 +1246,8 @@ <h2 id=animatable-properties-><span class=secno>7. </span> Animatable
12491246
the property animates. Such definitions override those given in this
12501247
specification.
12511248

1252-
<h3 id=properties-from-css-><span class=secno>7.1. </span> Properties from
1253-
CSS</h3>
1249+
<h3 id=animatable-css><span class=secno>7.1. </span><a
1250+
id=properties-from-css-> Properties from CSS </a></h3>
12541251

12551252
<table class=animatable-properties>
12561253
<tbody>
@@ -1498,8 +1495,8 @@ <h3 id=properties-from-css-><span class=secno>7.1. </span> Properties from
14981495
column-rule-width, column-width, font-size-adjust, font-stretch,
14991496
marker-offset, text-decoration-color, transform, transform-origin.
15001497

1501-
<h3 id=properties-from-svg-><span class=secno>7.2. </span> Properties from
1502-
SVG</h3>
1498+
<h3 id=animatable-svg><span class=secno>7.2. </span><a
1499+
id=properties-from-svg-> Properties from SVG </a></h3>
15031500

15041501
<p> All properties defined as animatable in the SVG specification, provided
15051502
they are one of the property types listed above.</p>

‎css3-transitions/Overview.src.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -176,9 +176,9 @@ <h2 id="transitions">Transitions</h2>
176176
</div>
177177

178178
<!-- ======================================================================================================= -->
179-
<h3>
179+
<h3 id=the-transition-property><a id=the-transition-property-property->
180180
The <code class="property">'transition-property'</code> Property
181-
</h3>
181+
</a></h3>
182182
<p>
183183
The <code class="property">'transition-property'</code> property specifies the name of the CSS property to which the transition is applied.
184184
</p>
@@ -298,9 +298,9 @@ <h3>
298298
</p>
299299

300300
<!-- ======================================================================================================= -->
301-
<h3>
301+
<h3 id=the-transition-duration><a id=the-transition-duration-property->
302302
The <code class="property">'transition-duration'</code> Property
303-
</h3>
303+
</a></h3>
304304
<p>
305305
The <code class="property">'transition-duration'</code> property defines the length of time that a transition takes.
306306
</p>
@@ -379,9 +379,9 @@ <h3>
379379
<!-- =======================================================================================================
380380
-->
381381

382-
<h3 id="transition-timing-function_tag">
382+
<h3 id="the-transition-timing-function"><a id=transition-timing-function_tag>
383383
The <code class="property">'transition-timing-function'</code> Property
384-
</h3>
384+
</a></h3>
385385
<p>
386386
The <code class="property">'transition-timing-function'</code> property
387387
describes how the intermediate values used during a transition will be
@@ -585,9 +585,9 @@ <h3 id="transition-timing-function_tag">
585585
exceed this range.
586586
</dd>
587587
</dl><!-- ======================================================================================================= -->
588-
<h3>
588+
<h3 id=the-transition-delay><a id=the-transition-delay-property->
589589
The <code class="property">'transition-delay'</code> Property
590-
</h3>
590+
</a></h3>
591591
<p>
592592
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.
593593
</p>
@@ -662,9 +662,9 @@ <h3>
662662
</tr>
663663
</tbody>
664664
</table><!-- ======================================================================================================= -->
665-
<h3>
665+
<h3 id=the-transition-shorthand><a id=the-transition-shorthand-property->
666666
The <code class="property">'transition'</code> Shorthand Property
667-
</h3>
667+
</a></h3>
668668
<p>
669669
The <code class="property">'transition'</code> shorthand property combines the four properties described above into a single property.
670670
</p>
@@ -926,9 +926,9 @@ <h2 id="reversing">
926926
<a href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January 2010 part</a>.
927927
</p>
928928

929-
<h2>
929+
<h2 id=transition-events><a id=transition-events->
930930
Transition Events
931-
</h2>
931+
</a></h2>
932932
<p>
933933
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>.
934934
An event is fired for each property that undergoes a transition.
@@ -1107,9 +1107,9 @@ <h2>
11071107
</dd>
11081108
</dl>
11091109

1110-
<h2 id="animation-of-property-types-">
1110+
<h2 id="animatable-types"><a id=animation-of-property-types->
11111111
Animation of property types
1112-
</h2>
1112+
</a></h2>
11131113

11141114
<p>
11151115
The following describes how each property type undergoes transition or
@@ -1210,9 +1210,9 @@ <h2 id="animation-of-property-types-">
12101210
values that can result from cubic-bezier(). Clamping values to the
12111211
allowed range is probably the best solution.</p>
12121212

1213-
<h2>
1213+
<h2 id=animatable-properties><a id=animatable-properties->
12141214
Animatable properties
1215-
</h2>
1215+
</a></h2>
12161216

12171217
<!--
12181218
As resolved in
@@ -1237,9 +1237,9 @@ <h2>
12371237
the property animates. Such definitions override those given in
12381238
this specification.</p>
12391239

1240-
<h3>
1240+
<h3 id=animatable-css><a id=properties-from-css->
12411241
Properties from CSS
1242-
</h3>
1242+
</a></h3>
12431243

12441244
<table class="animatable-properties">
12451245
<tr>
@@ -1404,9 +1404,9 @@ <h3>
14041404
transform-origin.
14051405
</p>
14061406

1407-
<h3>
1407+
<h3 id=animatable-svg><a id=properties-from-svg->
14081408
Properties from SVG
1409-
</h3>
1409+
</a></h3>
14101410

14111411
<p>
14121412
All properties defined as animatable in the SVG specification, provided

0 commit comments

Comments
 (0)