@@ -29,68 +29,72 @@ Issue Tracking: Bugzilla bugs for this level https://www.w3.org/Bugs/Public/bugl
2929Issue Tracking : Bugzilla bugs for all levels https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transitions&resolution=---
3030Abstract : CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
3131Status Text : <strong>This document</strong> is expected to be relatively close to last call. While some issues raised have yet to be addressed, new features are extremely unlikely to be considered for this level.
32- Ignored Terms : domstring, float
32+ Ignored Terms : float
3333</pre>
3434<!-- FIXME: font-size and font-weight link defaults don't work -->
3535<pre class="link-defaults">
36- spec:css21; type:property; text:top
37- spec:css21; type:property; text:right
38- spec:css21; type:property; text:bottom
39- spec:css21; type:property; text:left
40- spec:css21; type:property; text:margin-top
41- spec:css21; type:property; text:margin-right
42- spec:css21; type:property; text:margin-bottom
43- spec:css21; type:property; text:margin-left
44- spec:css21; type:property; text:padding-top
45- spec:css21; type:property; text:padding-right
46- spec:css21; type:property; text:padding-bottom
47- spec:css21; type:property; text:padding-left
48- spec:css21; type:property; text:border-top-color
49- spec:css21; type:property; text:border-right-color
50- spec:css21; type:property; text:border-bottom-color
51- spec:css21; type:property; text:border-left-color
52- spec:css21; type:property; text:border-top-width
53- spec:css21; type:property; text:border-right-width
54- spec:css21; type:property; text:border-bottom-width
55- spec:css21; type:property; text:border-left-width
56- spec:css21; type:property; text:background-color
57- spec:css21; type:property; text:background-position
58- spec:css21; type:property; text:border-spacing
59- spec:css21; type:property; text:width
60- spec:css21; type:property; text:height
61- spec:css21; type:property; text:min-width
62- spec:css21; type:property; text:min-height
63- spec:css21; type:property; text:max-width
64- spec:css21; type:property; text:max-height
65- spec:css21; type:property; text:clip
66- spec:css21; type:property; text:letter-spacing
67- spec:css21; type:property; text:line-height
68- spec:css21; type:property; text:outline-color
69- spec:css21; type:property; text:outline-width
70- spec:css21; type:property; text:text-indent
71- spec:css21; type:property; text:font-size
72- spec:css21; type:property; text:font-weight
73- spec:css21; type:property; text:vertical-align
74- spec:css21; type:property; text:visibility
75- spec:css21; type:property; text:word-spacing
76- spec:css21; type:property; text:z-index
77- spec:css-color-3; type:property; text:color
78- spec:css-color-3; type:property; text:opacity
36+ spec:css21; type:property;
37+ text:top
38+ text:right
39+ text:bottom
40+ text:left
41+ text:margin-top
42+ text:margin-right
43+ text:margin-bottom
44+ text:margin-left
45+ text:padding-top
46+ text:padding-right
47+ text:padding-bottom
48+ text:padding-left
49+ text:border-top-color
50+ text:border-right-color
51+ text:border-bottom-color
52+ text:border-left-color
53+ text:border-top-width
54+ text:border-right-width
55+ text:border-bottom-width
56+ text:border-left-width
57+ text:background-color
58+ text:background-position
59+ text:border-spacing
60+ text:width
61+ text:height
62+ text:min-width
63+ text:min-height
64+ text:max-width
65+ text:max-height
66+ text:clip
67+ text:letter-spacing
68+ text:line-height
69+ text:outline-color
70+ text:outline-width
71+ text:text-indent
72+ text:font-size
73+ text:font-weight
74+ text:vertical-align
75+ text:visibility
76+ text:word-spacing
77+ text:z-index
78+ spec:css-color-3;
79+ type:property;
80+ text:color
81+ text:opacity
82+ type:value
83+ text:green
84+ text:blue
85+ text:transparent
7986spec:css-values-3; type:type; text:<time>
80- spec:css-color-3; type:value; text:green
81- spec:css-color-3; type:value; text:blue
82- spec:css-color-3; type:value; text:transparent
8387</pre>
8488<!-- FIXME: These overrides aren't great for dev/TR switching -->
8589<pre class="anchors">
8690url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for: shadow; text: inset;
8791url: http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility; type: value; for: visibility; text: visible;
88- url: http://dev.w3.org/csswg/css-color-3/#transparent; type: value; text: transparent;
89- url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: blue;
90- url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
92+ urlPrefix: http://dev.w3.org/csswg/css-color-3/; type: value;
93+ text: transparent
94+ text: blue
95+ text: green
9196url: http://w3c.github.io/dom/#constructing-events; type: dfn; text: event constructor;
9297url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-dispatch; type: dfn; text: dispatch;
93- url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-dispatch; type: dfn; text: dispatched;
9498</pre>
9599</dl>
96100
@@ -283,7 +287,7 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
283287 The 'transition-duration' property defines the length of time that a transition takes.
284288 </p>
285289 <pre class="propdef">
286- Name : <dfn id=" transition-duration">transition-duration</dfn>
290+ Name : transition-duration
287291 Value : <<time>>#
288292 Initial : ''0s''
289293 Applies to : all elements, ::before and ::after pseudo elements
@@ -374,7 +378,7 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
374378 Bézier Timing Function Control Points
375379 </p>
376380 <pre class="propdef">
377- Name : <dfn id=" transition-timing-function">transition-timing-function</dfn>
381+ Name : transition-timing-function
378382 Value : <<single-transition-timing-function>>#
379383 Initial : ''transition-timing-function/ease''
380384 Applies to : all elements, ::before and ::after pseudo elements
@@ -391,7 +395,7 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
391395 <p>
392396 The timing functions have the following definitions.
393397 </p>
394- <dl dfn-type="value" dfn-for="transition-timing-function">
398+ <dl dfn-type="value" dfn-for="transition-timing-function, <single-transition-timing-function> ">
395399 <dt> <dfn>ease</dfn> </dt>
396400 <dd>
397401 The ease function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.25, 0.1, 0.25, 1)</a> .
@@ -450,7 +454,7 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
450454 If the value for 'transition-delay' is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative 'transition-delay' , the starting values are taken from the moment the property is changed.
451455 </p>
452456 <pre class="propdef">
453- Name : <dfn id=" transition-delay">transition-delay</dfn>
457+ Name : transition-delay
454458 Value : <<time>>#
455459 Initial : ''0s''
456460 Applies to : all elements, ::before and ::after pseudo elements
@@ -468,7 +472,7 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
468472 The 'transition' shorthand property combines the four properties described above into a single property.
469473 </p>
470474 <pre class="propdef">
471- Name : <dfn id=" transition">transition</dfn>
475+ Name : transition
472476 Value : <<single-transition>>#
473477 Initial : see individual properties
474478 Applies to : all elements, ::before and ::after pseudo elements
@@ -505,16 +509,16 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
505509
506510 <p>
507511 Implementations must maintain a set of
508- <dfn lt="running transition">running transitions</dfn> ,
512+ <dfn export lt="running transition">running transitions</dfn> ,
509513 each of which applies to a specific element and non-shorthand
510514 property. Each of these transitions also has a
511- <dfn>start time</dfn> , <dfn>end time</dfn> , <dfn>start value </dfn>
512- <dfn>end value</dfn> , <dfn>reversing-adjusted start value</dfn> ,
513- and <dfn>reversing shortening factor</dfn> .
515+ <dfn export for="transition" >start time</dfn> , <dfn export for="transition">end time </dfn> ,
516+ <dfn export for="transition">start value</dfn> , <dfn export for="transition">end value</dfn> ,
517+ <dfn export for="transition">reversing-adjusted start value</dfn> , and <dfn export for="transition" >reversing shortening factor</dfn> .
514518 Transitions are added to this set as described in this section,
515519 and are removed from this set
516520 when they <a>complete</a>
517- or when implementations are required to <dfn>cancel</dfn> them.
521+ or when implementations are required to <dfn export for="transition" >cancel</dfn> them.
518522 <span class="note">
519523 For the rationale behind the <a>reversing-adjusted start value</a>
520524 and <a>reversing shortening factor</a> , see [[#reversing]] .
@@ -523,7 +527,7 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
523527
524528 <p>
525529 Implementations must also maintain a set of
526- <dfn lt="completed transition">completed transitions</dfn> ,
530+ <dfn export lt="completed transition">completed transitions</dfn> ,
527531 each of which
528532 (like <a>running transitions</a> )
529533 applies to a specific element and non-shorthand property.
@@ -601,7 +605,7 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
601605 (or at least it must be undetectable that it was done at a
602606 different time).
603607 This processing of a set of simultaneous style changes is called a
604- <dfn>style change event</dfn> .
608+ <dfn export >style change event</dfn> .
605609 (Implementations typically have a <a>style change event</a> to
606610 correspond with their desired screen refresh rate,
607611 and when up-to-date computed style or layout information is needed
@@ -629,15 +633,15 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
629633 then transitions are not started for that element
630634 in that style change event.
631635 Otherwise,
632- define the <dfn>before-change style</dfn> as
636+ define the <dfn export >before-change style</dfn> as
633637 the <a>computed values</a> of all properties on the element as of
634638 the previous <a>style change event</a> ,
635639 except with any styles derived from declarative
636640 animations such as CSS Transitions, CSS Animations
637641 ([[CSS3-ANIMATIONS]] ),
638642 and SMIL Animations ([[SMIL-ANIMATION]] , [[SVG11]] )
639643 updated to the current time.
640- Likewise, define the <dfn>after-change style</dfn> as
644+ Likewise, define the <dfn export >after-change style</dfn> as
641645 the <a>computed values</a> of all properties
642646 on the element based on the information
643647 known at the start of that <a>style change event</a> ,
@@ -681,20 +685,20 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
681685 For each element with a <a>before-change style</a> and
682686 an <a>after-change style</a> ,
683687 and each property (other than shorthands),
684- define the <dfn>matching transition-property value</dfn> as
688+ define the <dfn export >matching transition-property value</dfn> as
685689 the last value in the
686690 'transition-property' in the element's <a>after-change style</a>
687691 that matches the property,
688692 as described in
689693 [[#transition-property-property]] .
690694 If there is such a value, then corresponding to it, there is
691- a <dfn>matching transition duration</dfn> ,
692- a <dfn>matching transition delay</dfn> , and
693- a <dfn>matching transition timing function</dfn>
695+ a <dfn export >matching transition duration</dfn> ,
696+ a <dfn export >matching transition delay</dfn> , and
697+ a <dfn export >matching transition timing function</dfn>
694698 in the values in the <a>after-change style</a> of
695699 'transition-duration' , 'transition-delay' , and 'transition-timing-function'
696700 (see <a href="#list-matching">the rules on matching lists</a> ).
697- Define the <dfn>combined duration</dfn> of the transition
701+ Define the <dfn export for="transition" >combined duration</dfn> of the transition
698702 as the sum of max(<a>matching transition duration</a> , ''0s'' ) and
699703 the <a>matching transition delay</a> .
700704 For each element and property, the implementation must act
@@ -1050,7 +1054,7 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
10501054 When a property on an element is undergoing a transition
10511055 (that is, when or after the transition has started and before the
10521056 <a>end time</a> of the transition)
1053- the transition adds a style called the <dfn>current value</dfn>
1057+ the transition adds a style called the <dfn export >current value</dfn>
10541058 to the CSS cascade
10551059 at the level defined for CSS Transitions in [[!CSS3CASCADE]] .
10561060 </p>
@@ -1108,7 +1112,7 @@ url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-di
11081112
11091113 <p>
11101114 <a>Running transitions</a>
1111- <dfn id="dfn-complete">complete</dfn>
1115+ <dfn export for="transition" id="dfn-complete">complete</dfn>
11121116 at a time that equal to or after their end time,
11131117 but prior to to the first <a>style change event</a>
11141118 whose time is equal to or after their <a>end time</a> .
0 commit comments