2929
3030 < h1 > CSS Transitions Module Level 3</ h1 >
3131
32- < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 24 November
33- 2009</ h2 >
32+ < h2 class ="no-num no-toc " id =longstatus-date > Editor's Draft 9 March 2010</ h2 >
3433
3534 < dl >
3635 < dt > This version:
3736
38- < dd > < a href ="http://www.w3.org/TR/2009 /ED-css3-transitions-20091124 ">
37+ < dd > < a href ="http://www.w3.org/TR/2010 /ED-css3-transitions-20100309 ">
3938 http://dev.w3.org/csswg/css3-transitions/</ a >
40- <!--http://www.w3.org/TR/2009 /WD-css3-transitions-20091124 -->
39+ <!--http://www.w3.org/TR/2010 /WD-css3-transitions-20100309 -->
4140
4241 < dt > Latest version:
4342
@@ -66,13 +65,13 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 November
6665 <!--begin-copyright-->
6766 < p class =copyright > < a
6867 href ="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright "
69- rel =license > Copyright</ a > © 2009 < a
68+ rel =license > Copyright</ a > © 2010 < a
7069 href ="http://www.w3.org/ "> < acronym title ="World Wide Web
7170 Consortium "> W3C</ acronym > </ a > < sup > ®</ sup > (< a
7271 href ="http://www.csail.mit.edu/ "> < acronym title ="Massachusetts Institute
73- of Technology "> MIT</ acronym > </ a > , < a
74- href =" http://www.ercim.org/ " > < acronym title ="European Research Consortium
75- for Informatics and Mathematics "> ERCIM</ acronym > </ a > , < a
72+ of Technology "> MIT</ acronym > </ a > , < a href =" http://www.ercim.eu/ " > < acronym
73+ title ="European Research Consortium for Informatics and
74+ Mathematics "> ERCIM</ acronym > </ a > , < a
7675 href ="http://www.keio.ac.jp/ "> Keio</ a > ), All Rights Reserved. W3C < a
7776 href ="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer "> liability</ a > ,
7877 < a
@@ -99,10 +98,12 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
9998
10099 < p > The (< a
101100 href ="http://lists.w3.org/Archives/Public/www-style/ "> archived</ a > ) public
102- mailing list < a href ="mailto:www-style@w3.org "> www-style@w3.org</ a > (see
103- < a href ="http://www.w3.org/Mail/Request "> instructions</ a > ) is preferred
104- for discussion of this specification. When sending e-mail, please put the
105- text “css3-transitions” in the subject, preferably like this:
101+ mailing list < a
102+ href ="mailto:www-style@w3.org?Subject=%5Bcss3-transitions%5D%20PUT%20SUBJECT%20HERE ">
103+ www-style@w3.org</ a > (see < a
104+ href ="http://www.w3.org/Mail/Request "> instructions</ a > ) is preferred for
105+ discussion of this specification. When sending e-mail, please put the text
106+ “css3-transitions” in the subject, preferably like this:
106107 “[<!----> css3-transitions<!----> ] < em > …summary of
107108 comment…</ em > ”
108109
@@ -129,55 +130,55 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
129130 <!--begin-toc-->
130131
131132 < ul class =toc >
132- < li > < a href ="#introduction "> < span class =secno > 1 </ span > Introduction</ a >
133+ < li > < a href ="#introduction "> < span class =secno > 1. </ span > Introduction</ a >
133134
134- < li > < a href ="#transitions- "> < span class =secno > 2 </ span > Transitions </ a >
135+ < li > < a href ="#transitions- "> < span class =secno > 2. </ span > Transitions </ a >
135136 < ul class =toc >
136- < li > < a href ="#the-transition-property-property- "> < span class =secno > 2.1
137+ < li > < a href ="#the-transition-property-property- "> < span class =secno > 2.1.
137138 </ span > The < span class =prop-name > ‘< code
138139 class =property > transition-property</ code > ’</ span > Property </ a >
139140
140- < li > < a href ="#the-transition-duration-property- "> < span class =secno > 2.2
141+ < li > < a href ="#the-transition-duration-property- "> < span class =secno > 2.2.
141142 </ span > The < span class =prop-name > ‘< code
142143 class =property > transition-duration</ code > ’</ span > Property </ a >
143144
144- < li > < a href ="#transition-timing-function_tag "> < span class =secno > 2.3
145+ < li > < a href ="#transition-timing-function_tag "> < span class =secno > 2.3.
145146 </ span > The < span class =prop-name > ‘< code
146147 class =property > transition-timing-function</ code > ’</ span > Property
147148 </ a >
148149
149- < li > < a href ="#the-transition-delay-property- "> < span class =secno > 2.4
150+ < li > < a href ="#the-transition-delay-property- "> < span class =secno > 2.4.
150151 </ span > The < span class =prop-name > ‘< code
151152 class =property > transition-delay</ code > ’</ span > Property </ a >
152153
153- < li > < a href ="#the-transition-shorthand-property- "> < span class =secno > 2.5
154+ < li > < a href ="#the-transition-shorthand-property- "> < span class =secno > 2.5.
154155 </ span > The < span class =prop-name > ‘< code
155156 class =property > transition</ code > ’</ span > Shorthand Property </ a >
156157 </ ul >
157158
158- < li > < a href ="#starting "> < span class =secno > 3 </ span > Starting of
159+ < li > < a href ="#starting "> < span class =secno > 3. </ span > Starting of
159160 transitions </ a >
160161
161- < li > < a href ="#reversing "> < span class =secno > 4 </ span > Automatically
162+ < li > < a href ="#reversing "> < span class =secno > 4. </ span > Automatically
162163 reversing transitions </ a >
163164
164- < li > < a href ="#transition-events- "> < span class =secno > 5 </ span > Transition
165+ < li > < a href ="#transition-events- "> < span class =secno > 5. </ span > Transition
165166 Events </ a >
166167
167- < li > < a href ="#animation-of-property-types- "> < span class =secno > 6 </ span >
168+ < li > < a href ="#animation-of-property-types- "> < span class =secno > 6. </ span >
168169 Animation of property types </ a >
169170
170- < li > < a href ="#animatable-properties- "> < span class =secno > 7 </ span >
171+ < li > < a href ="#animatable-properties- "> < span class =secno > 7. </ span >
171172 Animatable properties </ a >
172173 < ul class =toc >
173- < li > < a href ="#properties-from-css- "> < span class =secno > 7.1 </ span >
174+ < li > < a href ="#properties-from-css- "> < span class =secno > 7.1. </ span >
174175 Properties from CSS </ a >
175176
176- < li > < a href ="#properties-from-svg- "> < span class =secno > 7.2 </ span >
177+ < li > < a href ="#properties-from-svg- "> < span class =secno > 7.2. </ span >
177178 Properties from SVG </ a >
178179 </ ul >
179180
180- < li > < a href ="#references "> < span class =secno > 8 </ span > References</ a >
181+ < li > < a href ="#references "> < span class =secno > 8. </ span > References</ a >
181182 < ul class =toc >
182183 < li class =no-num > < a href ="#normative-references "> Normative
183184 references</ a >
@@ -191,15 +192,15 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
191192 </ ul >
192193 <!--end-toc-->
193194
194- < h2 id =introduction > < span class =secno > 1 </ span > Introduction</ h2 >
195+ < h2 id =introduction > < span class =secno > 1. </ span > Introduction</ h2 >
195196
196197 < p > < em > This section is not normative.</ em >
197198
198199 < p > This document introduces new CSS features to enable < em > implicit
199200 transitions</ em > , which describe how CSS properties can be made to change
200201 smoothly from one value to another over a given duration.
201202
202- < h2 id =transitions- > < span class =secno > 2 </ span > Transitions</ h2 >
203+ < h2 id =transitions- > < span class =secno > 2. </ span > Transitions</ h2 >
203204
204205 < p > Normally when the value of a CSS property changes, the rendered result
205206 is instantly updated, with the affected elements immediately changing from
@@ -300,7 +301,7 @@ <h2 id=transitions-><span class=secno>2 </span> Transitions</h2>
300301 property of 1 second duration.</ div >
301302 <!-- ======================================================================================================= -->
302303
303- < h3 id =the-transition-property-property- > < span class =secno > 2.1 </ span > The
304+ < h3 id =the-transition-property-property- > < span class =secno > 2.1. </ span > The
304305 < span class =prop-name > ‘< code class =property > < a
305306 href ="#transition-property "> transition-property</ a > </ code > ’</ span >
306307 Property</ h3 >
@@ -407,7 +408,7 @@ <h3 id=the-transition-property-property-><span class=secno>2.1 </span> The
407408 corresponding to the < em > last</ em > occurrence of the property.</ p >
408409 <!-- ======================================================================================================= -->
409410
410- < h3 id =the-transition-duration-property- > < span class =secno > 2.2 </ span > The
411+ < h3 id =the-transition-duration-property- > < span class =secno > 2.2. </ span > The
411412 < span class =prop-name > ‘< code class =property > < a
412413 href ="#transition-duration "> transition-duration</ a > </ code > ’</ span >
413414 Property</ h3 >
@@ -468,7 +469,7 @@ <h3 id=the-transition-duration-property-><span class=secno>2.2 </span> The
468469 <!-- =======================================================================================================
469470 -->
470471
471- < h3 id ="transition-timing-function_tag "> < span class =secno > 2.3 </ span > The
472+ < h3 id ="transition-timing-function_tag "> < span class =secno > 2.3. </ span > The
472473 < span class =prop-name > ‘< code class =property > < a
473474 href ="#transition-timing-function "> transition-timing-function</ a > </ code > ’</ span >
474475 Property</ h3 >
@@ -595,7 +596,7 @@ <h3 id="transition-timing-function_tag"><span class=secno>2.3 </span> The
595596 </ dl >
596597 <!-- ======================================================================================================= -->
597598
598- < h3 id =the-transition-delay-property- > < span class =secno > 2.4 </ span > The
599+ < h3 id =the-transition-delay-property- > < span class =secno > 2.4. </ span > The
599600 < span class =prop-name > ‘< code class =property > < a
600601 href ="#transition-delay "> transition-delay</ a > </ code > ’</ span >
601602 Property</ h3 >
@@ -666,8 +667,8 @@ <h3 id=the-transition-delay-property-><span class=secno>2.4 </span> The
666667 </ table >
667668 <!-- ======================================================================================================= -->
668669
669- < h3 id =the-transition-shorthand-property- > < span class =secno > 2.5 </ span > The
670- < span class =prop-name > ‘< code class =property > < a
670+ < h3 id =the-transition-shorthand-property- > < span class =secno > 2.5. </ span >
671+ The < span class =prop-name > ‘< code class =property > < a
671672 href ="#transition "> transition</ a > </ code > ’</ span > Shorthand Property</ h3 >
672673
673674 < p > The < span class =prop-name > ‘< code class =property > < a
@@ -740,7 +741,7 @@ <h3 id=the-transition-shorthand-property-><span class=secno>2.5 </span> The
740741 < td > Same as specified value.
741742 </ table >
742743
743- < h2 id =starting > < span class =secno > 3 </ span > Starting of transitions</ h2 >
744+ < h2 id =starting > < span class =secno > 3. </ span > Starting of transitions</ h2 >
744745
745746 < p > When the value of an animatable property changes, implementations must
746747 decide what transitions to start based on the values of the ‘< code
@@ -781,7 +782,7 @@ <h2 id=starting><span class=secno>3 </span> Starting of transitions</h2>
781782 value changes because it is inherited (directly or indirectly) from
782783 another element that is transitioning the same property.
783784
784- < h2 id =reversing > < span class =secno > 4 </ span > Automatically reversing
785+ < h2 id =reversing > < span class =secno > 4. </ span > Automatically reversing
785786 transitions</ h2 >
786787
787788 < p > A common type of transition effect is when a running transition is
@@ -829,7 +830,7 @@ <h2 id=reversing><span class=secno>4 </span> Automatically reversing
829830 for example, if the transition reversing to state A was again interrupted
830831 by a property change to state B.
831832
832- < h2 id =transition-events- > < span class =secno > 5 </ span > Transition Events</ h2 >
833+ < h2 id =transition-events- > < span class =secno > 5. </ span > Transition Events</ h2 >
833834
834835 < p > The completion of a CSS Transition generates a corresponding < a
835836 href ="http://www.w3.org/TR/DOM-Level-2-Events/events.html "> DOM Event</ a > .
@@ -972,7 +973,7 @@ <h2 id=transition-events-><span class=secno>5 </span> Transition Events</h2>
972973 </ ul >
973974 </ dl >
974975
975- < h2 id =animation-of-property-types- > < span class =secno > 6 </ span > Animation
976+ < h2 id =animation-of-property-types- > < span class =secno > 6. </ span > Animation
976977 of property types</ h2 >
977978
978979 < p > The following describes how each property type undergoes transition or
@@ -1030,10 +1031,10 @@ <h2 id=animation-of-property-types-><span class=secno>6 </span> Animation
10301031 property was individually specified.
10311032 </ ul >
10321033
1033- < h2 id =animatable-properties- > < span class =secno > 7 </ span > Animatable
1034+ < h2 id =animatable-properties- > < span class =secno > 7. </ span > Animatable
10341035 properties</ h2 >
10351036
1036- < h3 id =properties-from-css- > < span class =secno > 7.1 </ span > Properties from
1037+ < h3 id =properties-from-css- > < span class =secno > 7.1. </ span > Properties from
10371038 CSS</ h3 >
10381039
10391040 < table >
@@ -1048,11 +1049,6 @@ <h3 id=properties-from-css-><span class=secno>7.1 </span> Properties from
10481049
10491050 < td > color
10501051
1051- < tr >
1052- < td > background-image
1053-
1054- < td > only gradients
1055-
10561052 < tr >
10571053 < td > background-position
10581054
@@ -1294,7 +1290,7 @@ <h3 id=properties-from-css-><span class=secno>7.1 </span> Properties from
12941290 < td > number
12951291 </ table >
12961292
1297- < h3 id =properties-from-svg- > < span class =secno > 7.2 </ span > Properties from
1293+ < h3 id =properties-from-svg- > < span class =secno > 7.2. </ span > Properties from
12981294 SVG</ h3 >
12991295
13001296 < p > All properties defined as animatable in the SVG specification, provided
@@ -1341,7 +1337,7 @@ <h3 id=properties-from-svg-><span class=secno>7.2 </span> Properties from
13411337 </tr>
13421338 </table> -->
13431339
1344- < h2 id =references > < span class =secno > 8 </ span > References</ h2 >
1340+ < h2 id =references > < span class =secno > 8. </ span > References</ h2 >
13451341
13461342 < h3 class =no-num id =normative-references > Normative references</ h3 >
13471343 <!--begin-normative-->
@@ -1354,10 +1350,10 @@ <h3 class=no-num id=normative-references>Normative references</h3>
13541350 < dt id =CSS3-2D-TRANSFORMS > [CSS3-2D-TRANSFORMS]
13551351
13561352 < dd > Dean Jackson; David Hyatt; Chris Marrin. < a
1357- href ="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320 "> < cite > CSS
1358- 2D Transforms Module Level 3.</ cite > </ a > 20 March 2009. W3C Working
1353+ href ="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201 "> < cite > CSS
1354+ 2D Transforms Module Level 3.</ cite > </ a > 1 December 2009. W3C Working
13591355 Draft. (Work in progress.) URL: < a
1360- href ="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320 "> http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320 </ a >
1356+ href ="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201 "> http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201 </ a >
13611357 </ dd >
13621358 <!---->
13631359 </ dl >
@@ -1490,19 +1486,19 @@ <h2 class=no-num id=index>Index</h2>
14901486
14911487 < ul class =indexlist >
14921488 < li > transition, < a href ="#transition "
1493- title =transition > < strong > 2.5</ strong > </ a >
1489+ title =transition > < strong > 2.5. </ strong > </ a >
14941490
14951491 < li > transition-delay, < a href ="#transition-delay "
1496- title =transition-delay > < strong > 2.4</ strong > </ a >
1492+ title =transition-delay > < strong > 2.4. </ strong > </ a >
14971493
14981494 < li > transition-duration, < a href ="#transition-duration "
1499- title =transition-duration > < strong > 2.2</ strong > </ a >
1495+ title =transition-duration > < strong > 2.2. </ strong > </ a >
15001496
15011497 < li > transition-property, < a href ="#transition-property "
1502- title =transition-property > < strong > 2.1</ strong > </ a >
1498+ title =transition-property > < strong > 2.1. </ strong > </ a >
15031499
15041500 < li > transition-timing-function, < a href ="#transition-timing-function "
1505- title =transition-timing-function > < strong > 2.3</ strong > </ a >
1501+ title =transition-timing-function > < strong > 2.3. </ strong > </ a >
15061502 </ ul >
15071503 <!--end-index-->
15081504</ html >
0 commit comments