@@ -101,14 +101,17 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
101101</pre>
102102</dl>
103103
104- <h2 id="introduction">Introduction</h2>
104+ Introduction {#introduction}
105+ ============================
105106
106107 <p><em> This section is not normative.</em>
107108 <p>
108109 This document introduces new CSS features to enable <em> implicit transitions</em> , which describe how CSS properties can be made to change smoothly from one value to another over a given duration.
109110 </p>
110111
111- <h2 id="transitions"><span id="transitions-">Transitions</span></h2>
112+ <span id="transitions-"> Transitions</span> {#transitions}
113+ =========================================================
114+
112115 <p>
113116 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.
114117 </p>
@@ -204,10 +207,9 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
204207 ([[WCAG20]] ).
205208 </p>
206209
207- <!-- ======================================================================================================= -->
208- <h3 id="transition-property-property"><span id="the-transition-property-property-">
209- The 'transition-property' Property
210- </span></h3>
210+ <span id="the-transition-property-property-"> The 'transition-property' Property</span> {#transition-property-property}
211+ ----------------------------------------------------------------------------------------------------------------------
212+
211213 <p>
212214 The 'transition-property' property specifies the name of the CSS property to which the transition is applied.
213215 </p>
@@ -282,10 +284,9 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
282284 covers all properties.
283285 </p>
284286
285- <!-- ======================================================================================================= -->
286- <h3 id="transition-duration-property"><span id="the-transition-duration-property-">
287- The 'transition-duration' Property
288- </span></h3>
287+ <span id="the-transition-duration-property-"> The 'transition-duration' Property</span> {#transition-duration-property}
288+ ----------------------------------------------------------------------------------------------------------------------
289+
289290 <p>
290291 The 'transition-duration' property defines the length of time that a transition takes.
291292 </p>
@@ -305,12 +306,9 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
305306 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.
306307 </p>
307308
308- <!-- =======================================================================================================
309- -->
309+ <span id="transition-timing-function_tag"> The 'transition-timing-function' Property </span> {#transition-timing-function-property}
310+ ---------------------------------------------------------------------------------------------------------------------------------
310311
311- <h3 id="transition-timing-function-property"><span id="transition-timing-function_tag">
312- The 'transition-timing-function' Property
313- </span></h3>
314312 <p>
315313 The 'transition-timing-function' property
316314 describes how the intermediate values used during a transition will be
@@ -446,10 +444,11 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
446444 in the range [0, 1] or the definition is invalid. The y values can
447445 exceed this range.
448446 </dd>
449- </dl> <!-- ======================================================================================================= -->
450- <h3 id="transition-delay-property"><span id="the-transition-delay-property-">
451- The 'transition-delay' Property
452- </span></h3>
447+ </dl>
448+
449+ <span id="the-transition-delay-property-"> The 'transition-delay' Property</span> {#transition-delay-property}
450+ -------------------------------------------------------------------------------------------------------------
451+
453452 <p>
454453 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.
455454 </p>
@@ -467,10 +466,11 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
467466 Media : interactive
468467 Computed value : Same as specified value.
469468 Canonical order : <abbr title="follows order of property value definition">per grammar</abbr>
470- </pre> <!-- ======================================================================================================= -->
471- <h3 id="transition-shorthand-property"><span id="the-transition-shorthand-property-">
472- The 'transition' Shorthand Property
473- </span></h3>
469+ </pre>
470+
471+ <span id="the-transition-shorthand-property-"> The 'transition' Shorthand Property</span> {#transition-shorthand-property}
472+ -------------------------------------------------------------------------------------------------------------------------
473+
474474 <p>
475475 The 'transition' shorthand property combines the four properties described above into a single property.
476476 </p>
@@ -506,9 +506,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
506506 then the declaration is invalid.
507507 </p>
508508
509- <h2 id="starting">
510- Starting of transitions
511- </h2>
509+ Starting of transitions {#starting}
510+ ===================================
512511
513512 <p>
514513 Implementations must maintain a set of
@@ -999,9 +998,9 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
999998 style for declarative animations.
1000999 </p>
10011000
1002- <h3 id=" reversing">
1003- Faster reversing of interrupted transitions
1004- </h3>
1001+ Faster reversing of interrupted transitions {# reversing}
1002+ --------------------------------------------------------
1003+
10051004 <div class="note">
10061005
10071006 <p>
@@ -1051,9 +1050,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
10511050
10521051 </div>
10531052
1054- <h2 id="application">
1055- Application of transitions
1056- </h2>
1053+ Application of transitions {#application}
1054+ =========================================
10571055
10581056 <p>
10591057 When a property on an element is undergoing a transition
@@ -1113,7 +1111,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
11131111 as the input to the timing function.
11141112 </p>
11151113
1116- <h2 id="complete">Completion of transitions</h2>
1114+ Completion of transitions {#complete}
1115+ =====================================
11171116
11181117 <p>
11191118 <a>Running transitions</a>
@@ -1139,9 +1138,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
11391138 layout data.)</span>
11401139 </p>
11411140
1142- <h2 id="transition-events"><span id="transition-events-">
1143- Transition Events
1144- </span></h2>
1141+ <span id="transition-events-"> Transition Events</span> {#transition-events}
1142+ ===========================================================================
11451143 <p>
11461144 The completion of a CSS Transition generates a corresponding <a href="https://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a> .
11471145 An event is <a>dispatched</a> to the element
@@ -1246,9 +1244,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
12461244 </dd>
12471245 </dl>
12481246
1249- <h2 id="animatable-types"><span id="animation-of-property-types-">
1250- Animation of property types
1251- </span></h2>
1247+ <span id="animation-of-property-types-"> Animation of property types</span> {#animatable-types}
1248+ ==============================================================================================
12521249
12531250 <p>
12541251 Some property types can be interpolated,
@@ -1257,7 +1254,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
12571254 step from one value to the other.
12581255 </p>
12591256
1260- <h3 id="interpolated-types">Animation of interpolated property types</h3>
1257+ Animation of interpolated property types {#interpolated-types}
1258+ --------------------------------------------------------------
12611259
12621260 <p>
12631261 When interpolating between two values,
@@ -1404,7 +1402,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
14041402 of shorthand properties and the ''all'' value is applied to any
14051403 properties (in the shorthand) that can be animated.</p>
14061404
1407- <h3 id="step-types">Animation in steps of other property types</h3>
1405+ Animation in steps of other property types {#step-types}
1406+ --------------------------------------------------------
14081407
14091408 <p>
14101409 When interpolating between two values that cannot be interpolated,
@@ -1428,9 +1427,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
14281427 and/or restricting it to step timing functions.
14291428 </p>
14301429
1431- <h2 id="animatable-properties"><span id="animatable-properties-">
1432- Animatable properties
1433- </span></h2>
1430+ <span id="animatable-properties-"> Animatable properties</span> {#animatable-properties}
1431+ =======================================================================================
14341432
14351433 <!--
14361434 As resolved in
@@ -1479,9 +1477,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
14791477 and the "no" value renamed to "discrete" or "in steps".
14801478 </p>
14811479
1482- <h3 id="animatable-css"><span id="properties-from-css-">
1483- Properties from CSS
1484- </span></h3>
1480+ <span id="properties-from-css-"> Properties from CSS</span> {#animatable-css}
1481+ ----------------------------------------------------------------------------
14851482
14861483 <p>
14871484 The following definitions define the animation behavior for
@@ -1627,9 +1624,8 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
16271624 </tr>
16281625 </table>
16291626
1630- <h3 id="animatable-svg"><span id="properties-from-svg-">
1631- Properties from SVG
1632- </span></h3>
1627+ <span id="properties-from-svg-"> Properties from SVG</span> {#animatable-svg}
1628+ ----------------------------------------------------------------------------
16331629
16341630 <p>
16351631 All properties defined as animatable in the SVG specification, provided
@@ -1770,7 +1766,8 @@ The cascade also allows users to disable transitions entirely
17701766by overriding the transition properties.
17711767
17721768
1773- <h2 id="changes">Changes since Working Draft of 19 November 2013</h2>
1769+ Changes since Working Draft of 19 November 2013 {#changes}
1770+ ==========================================================
17741771
17751772<p> The following are the substantive changes made since the
17761773<a href="https://www.w3.org/TR/2013/WD-css3-transitions-20131119/">Working Draft
@@ -1797,7 +1794,8 @@ dated 19 November 2013</a>:</p>
17971794 <li> For more details on these changes, see the version control change logs, which are split in three parts because of file renaming: <a href="https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.bs">change log since 2015 January 26</a> , <a href="https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.src.html">change log from 2013 March 28 to 2015 January 26</a> , <a href="https://hg.csswg.org/drafts/log/tip/css3-transitions/Overview.src.html">change log before 2013 March 28</a> .
17981795</ol>
17991796
1800- <h2 id="acknowledgments">Acknowledgments</h2>
1797+ Acknowledgments {#acknowledgments}
1798+ ==================================
18011799
18021800<p> Thanks especially to the feedback from
18031801Tab Atkins,
0 commit comments