css-transitions/Overview.bs@e24fe4941c41
css-transitions/Overview.bs
Wed, 11 Feb 2015 12:10:16 +1100
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Wed, 11 Feb 2015 12:10:16 +1100
- changeset 15191
- e24fe4941c41
- parent 15190
- b6e5bb6bf803
- child 15192
- 45c2a55c3cf2
- permissions
- -rw-r--r--
[css-transitions] Partially define when computed values change by saying that computed values have to change before the change is presented/displayed/used.
Addresses part of https://www.w3.org/Bugs/Public/show_bug.cgi?id=16016
1 <h1>CSS Transitions</h1>
3 <style type="text/css">
4 table.animatable-properties {
5 border-collapse: collapse;
6 }
7 table.animatable-properties td {
8 padding: 0.2em 1em;
9 border: 1px solid black;
10 }
11 div.prod { margin: 1em 2em; }
12 </style>
15 <pre class="metadata">
16 Status: ED
17 ED: http://dev.w3.org/csswg/css-transitions/
18 Shortname: css-transitions
19 Group: csswg
20 Level: 1
21 TR: http://www.w3.org/TR/css3-transitions/
22 Previous version: http://www.w3.org/TR/2013/WD-css3-transitions-20131119/
23 ED: http://dev.w3.org/csswg/css-transitions/
24 Editor: L. David Baron, Mozilla, http://dbaron.org/
25 Editor: Dean Jackson, Apple Inc, dino@apple.com
26 Editor: David Hyatt, Apple Inc, hyatt@apple.com
27 Editor: Chris Marrin, Apple Inc, cmarrin@apple.com
28 Issue Tracking: Bugzilla bugs for this level https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transitions&resolution=---&status_whiteboard=defer%20to%20level%202&status_whiteboard_type=notregexp
29 Issue Tracking: Bugzilla bugs for all levels https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transitions&resolution=---
30 Abstract: CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
31 Status 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
33 </pre>
34 <!-- FIXME: font-size and font-weight link defaults don't work -->
35 <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:css-text-decor-3; type:property; text:text-shadow
74 spec:css21; type:property; text:vertical-align
75 spec:css21; type:property; text:visibility
76 spec:css21; type:property; text:word-spacing
77 spec:css21; type:property; text:z-index
78 spec:css-color-3; type:property; text:color
79 spec:css-color-3; type:property; text:opacity
80 spec:css-values-3; type:type; text:<time>
81 spec:css-color-3; type:value; text:green
82 spec:css-color-3; type:value; text:blue
83 spec:css-color-3; type:value; text:transparent
84 </pre>
85 <!-- FIXME: These overrides aren't great for dev/TR switching -->
86 <pre class="anchors">
87 url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for: shadow; text: inset;
88 url: http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility; type: value; for: visibility; text: visible;
89 url: http://dev.w3.org/csswg/css-color-3/#transparent; type: value; text: transparent;
90 url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: blue;
91 url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
92 url: http://w3c.github.io/dom/#constructing-events; type: dfn; text: event constructor;
93 </pre>
94 </dl>
96 <h2 id="introduction">Introduction</h2>
98 <p><em>This section is not normative.</em>
99 <p>
100 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.
101 </p>
103 <h2 id="transitions"><span id="transitions-">Transitions</span></h2>
104 <p>
105 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.
106 </p>
107 <p>
108 For example, suppose that transitions of one second have been defined on the 'left' and
109 'background-color' properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values.
110 </p>
111 <div class="figure">
112 <img src="transition1.png" alt="">
113 </div>
114 <p class="caption">
115 Transitions of 'left' and 'background-color'
116 </p>
117 <p>
118 Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property.
119 </p>
120 <p>
121 Only animatable CSS properties can be transitioned. See the table at the end of this document for a list
122 of properties that are animatable.
123 </p>
124 <p>
125 The transition for a property is defined using a number of new properties. For example:
126 </p>
127 <div class="example">
128 <p style="display:none">
129 Example(s):
130 </p>
131 <pre>
132 div {
133 transition-property: opacity;
134 transition-duration: 2s;
135 }
136 </pre>The above example defines a transition on the 'opacity' property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds.
137 </div>
138 <p>
139 Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example:
140 </p>
141 <div class="example">
142 <p style="display:none">
143 Example(s):
144 </p>
145 <pre>
146 div {
147 transition-property: opacity, left;
148 transition-duration: 2s, 4s;
149 }
151 </pre>This will cause the 'opacity' property to transition over a period of two seconds and the left property to transition over a period of four seconds.
152 </div>
154 <p id="list-matching">
155 In the case where the lists of values in transition properties
156 do not have the same length, the length of the
157 'transition-property' list determines the number of items in
158 each list examined when starting transitions. The lists are
159 matched up from the first value: excess values at the end are
160 not used. If one of the other properties doesn't have enough
161 comma-separated values to match the number of values of
162 'transition-property', the UA must calculate its used value by
163 repeating the list of values until there are enough. This
164 truncation or repetition does not affect the computed value.
165 <span class="note">
166 Note: This is analogous to the behavior of the 'background-*'
167 properties, with 'background-image' analogous to
168 'transition-property'.
169 </span>
170 </p>
172 <div class="example">
173 <p style="display:none">
174 Example(s):
175 </p>
176 <pre>
177 div {
178 transition-property: opacity, left, top, width;
179 transition-duration: 2s, 1s;
180 }
181 </pre>The above example defines a transition on the 'opacity' property of 2 seconds duration, a
182 transition on the 'left' property of 1
183 second duration, a transition on the 'top' property of 2 seconds duration and a
184 transition on the 'width' property of 1
185 second duration.
187 </div>
189 <p>
190 While authors can use transitions to create dynamically changing content,
191 dynamically changing content can lead to seizures in some users.
192 For information on how to avoid content that can lead to seizures, see
193 <a href="http://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3:
194 Seizures:
195 Do not design content in a way that is known to cause seizures</a>
196 ([[WCAG20]]).
197 </p>
199 <!-- ======================================================================================================= -->
200 <h3 id="transition-property-property"><span id="the-transition-property-property-">
201 The 'transition-property' Property
202 </span></h3>
203 <p>
204 The 'transition-property' property specifies the name of the CSS property to which the transition is applied.
205 </p>
206 <pre class="propdef">
207 Name: transition-property
208 Value: ''transition-property/none'' | <<single-transition-property>>#
209 Initial: ''transition-property/all''
210 Applies to: all elements, :before and :after pseudo elements
211 Inherited: no
212 Animatable: no
213 Percentages: N/A
214 Media: visual
215 Computed value: Same as specified value.
216 Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
217 </pre>
219 <div class="prod">
220 <dfn type id="single-transition-property"><single-transition-property></dfn> = ''transition-property/all'' | <<custom-ident>>;
221 </div>
223 <p>
224 A value of
225 <dfn value for="transition-property">none</dfn>
226 means that no property will transition.
227 Otherwise, a list of properties to be transitioned, or the
228 keyword <dfn value for="transition-property">all</dfn>
229 which indicates that all properties are to be
230 transitioned, is given.
231 </p>
233 <p>
234 If one of the identifiers listed is not a recognized property
235 name or is not an animatable property, the implementation must
236 still start transitions on the animatable properties in the
237 list using the duration, delay, and timing function at their
238 respective indices in the lists for 'transition-duration',
239 'transition-delay', and 'transition-timing-function'. In other
240 words, unrecognized or non-animatable properties must be kept in
241 the list to preserve the matching of indices.
242 </p>
244 <p>
245 The <<custom-ident>> production in <<single-transition-property>>
246 also excludes the keyword ''transition-property/none'',
247 in addition to the keywords always excluded from <<custom-ident>>.
248 This means that
249 ''transition-property/none'', ''inherit'', and ''initial'' are not
250 permitted as items within a list of more that one identifier;
251 any list that uses them is syntactically invalid.
252 </p>
254 <p>
255 For the keyword ''transition-property/all'',
256 or if one of the identifiers listed is a
257 shorthand property, implementations must start transitions for
258 any of its longhand sub-properties that are animatable (or, for
259 ''transition-property/all'', all animatable properties), using the duration, delay,
260 and timing function at the index corresponding to the shorthand.
261 </p>
262 <p>
263 If a property is specified multiple times in the value of
264 'transition-property' (either on its own, via a shorthand that
265 contains it, or via the ''transition-property/all'' value), then the transition that
266 starts uses the duration, delay, and timing function at the
267 index corresponding to the <em>last</em> item in the value of
268 'transition-property' that calls for animating that property.
269 </p>
270 <p class="note">
271 Note: The ''transition-property/all'' value and 'all' shorthand
272 property work in similar ways, so the
273 ''transition-property/all'' value is just like a shorthand that
274 covers all properties.
275 </p>
277 <!-- ======================================================================================================= -->
278 <h3 id="transition-duration-property"><span id="the-transition-duration-property-">
279 The 'transition-duration' Property
280 </span></h3>
281 <p>
282 The 'transition-duration' property defines the length of time that a transition takes.
283 </p>
284 <pre class="propdef">
285 Name: <dfn id="transition-duration">transition-duration</dfn>
286 Value: <<time>>#
287 Initial: ''0s''
288 Applies to: all elements, :before and :after pseudo elements
289 Inherited: no
290 Animatable: no
291 Percentages: N/A
292 Media: interactive
293 Computed value: Same as specified value.
294 Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
295 </pre>
296 <p>
297 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.
298 </p>
300 <!-- =======================================================================================================
301 -->
303 <h3 id="transition-timing-function-property"><span id="transition-timing-function_tag">
304 The 'transition-timing-function' Property
305 </span></h3>
306 <p>
307 The 'transition-timing-function' property
308 describes how the intermediate values used during a transition will be
309 calculated. It allows for a transition to change speed over its
310 duration. These effects are commonly called <em>easing</em> functions.
311 In either case, a mathematical function that provides a smooth curve is
312 used.
313 </p>
314 <p>
315 Timing functions are either defined as a stepping function or
316 a <a
317 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
318 Bézier curve</a>.
319 The timing function takes as its input
320 the current elapsed percentage of the transition duration
321 and outputs the percentage of the way the transition is
322 from its start value to its end value.
323 How this output is used is defined by
324 the <a href="#animatable-types">interpolation rules</a>
325 for the value type.
326 </p>
327 <p>
328 A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
329 function is defined by a number that divides the domain of operation
330 into equally sized intervals. Each subsequent interval is a equal step
331 closer to the goal state. The function also specifies whether the
332 change in output percentage happens at the start or end of the
333 interval (in other words, if 0% on the input percentage is the point
334 of initial change).
335 </p>
336 <div class="figure">
337 <img src="step.png" alt="The step timing function splits
338 the function domain into a number of disjoint straight line
339 segments. steps(1, start) is a function whose
340 output value is 1 for all input values. steps(1, end) is a function whose
341 output value is 0 for all input values less than 1, and output
342 is 1 for the input value of 1. steps(3, start) is a function that
343 divides the input domain into three segments, each 1/3 in length,
344 and 1/3 above the previous segment, with the first segment starting
345 at 1/3. steps(3, end) is a function that
346 divides the input domain into three segments, each 1/3 in length,
347 and 1/3 above the previous segment, with the first segment starting
348 at 0.">
349 </div>
350 <p class="caption">
351 Step timing functions
352 </p>
353 <p>
354 A <a
355 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
356 Bézier curve</a> is defined by four control points, P<sub>0</sub>
357 through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub>
358 are always set to (0,0) and (1,1). The 'transition-timing-function' property is used
359 to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These
360 can be set to preset values using the keywords listed below, or can be
361 set to specific values using the ''cubic-bezier()'' function.
362 In the ''cubic-bezier()'' function, P<sub>1</sub> and
363 P<sub>2</sub> are each specified by both an X and Y value.
364 </p>
365 <div class="figure">
366 <img src="TimingFunction.png" alt="The Bézier timing function is a
367 smooth curve from point P0 = (0,0) to point P3 = (1,1). The
368 length and orientation of the line segment P0-P1 determines
369 the tangent and the curvature of the curve at P0 and the
370 line segment P2-P3 does the same at P3.">
371 </div>
372 <p class="caption">
373 Bézier Timing Function Control Points
374 </p>
375 <pre class="propdef">
376 Name: <dfn id="transition-timing-function">transition-timing-function</dfn>
377 Value: <<single-transition-timing-function>>#
378 Initial: ''transition-timing-function/ease''
379 Applies to: all elements, :before and :after pseudo elements
380 Inherited: no
381 Animatable: no
382 Percentages: N/A
383 Media: interactive
384 Computed value: Same as specified value.
385 Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
386 </pre>
387 <div class="prod">
388 <dfn type id="single-transition-timing-function"><single-transition-timing-function></dfn> = ''ease'' | ''linear'' | ''ease-in'' | ''ease-out'' | ''ease-in-out'' | ''step-start'' | ''step-end'' | <a lt="steps()" function>steps</a>(<<integer>>[, [ ''start'' | ''end'' ] ]?) | <a lt="cubic-bezier()" function>cubic-bezier</a>(<<number>>, <<number>>, <<number>>, <<number>>)
389 </div>
390 <p>
391 The timing functions have the following definitions.
392 </p>
393 <dl dfn-type="value" dfn-for="transition-timing-function">
394 <dt><dfn>ease</dfn></dt>
395 <dd>
396 The ease function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.25, 0.1, 0.25, 1)</a>.
397 </dd>
398 <dt><dfn>linear</dfn></dt>
399 <dd>
400 The linear function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0, 0, 1, 1)</a>.
401 </dd>
402 <dt><dfn>ease-in</dfn></dt>
403 <dd>
404 The ease-in function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.42, 0, 1, 1)</a>.
405 </dd>
406 <dt><dfn>ease-out</dfn></dt>
407 <dd>
408 The ease-out function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0, 0, 0.58, 1)</a>.
409 </dd>
410 <dt><dfn>ease-in-out</dfn></dt>
411 <dd>
412 The ease-in-out function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.42, 0, 0.58, 1)</a>.
413 </dd>
414 <dt><dfn>step-start</dfn></dt>
415 <dd>
416 The step-start function is equivalent to <a lt="steps()" function>steps(1, start)</a>.
417 </dd>
418 <dt><dfn>step-end</dfn></dt>
419 <dd>
420 The step-end function is equivalent to <a lt="steps()" function>steps(1, end)</a>.
421 </dd>
422 <dt><dfn function lt="steps()">steps(<<integer>>[, [ start | end ] ]?)</dfn></dt>
423 <dd>
424 Specifies a stepping function, described above, taking two
425 parameters. The first parameter specifies the number of intervals
426 in the function. It must be a positive integer (greater than 0).
427 The second parameter, which is optional, is
428 either the value <dfn value for="steps()">start</dfn> or <dfn value for="steps()">end</dfn>, and specifies the point
429 at which the change of values occur within the interval.
430 If the second parameter is omitted, it is given the value ''end''.
431 </dd>
432 <dt><dfn function lt="cubic-bezier()">cubic-bezier(<<number>>, <<number>>, <<number>>, <<number>>)</dfn></dt>
433 <dd>
434 Specifies a <a
435 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier
436 curve</a>. The four values specify points P<sub>1</sub> and
437 P<sub>2</sub> of the curve as (x1, y1, x2, y2). Both x values must be
438 in the range [0, 1] or the definition is invalid. The y values can
439 exceed this range.
440 </dd>
441 </dl><!-- ======================================================================================================= -->
442 <h3 id="transition-delay-property"><span id="the-transition-delay-property-">
443 The 'transition-delay' Property
444 </span></h3>
445 <p>
446 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.
447 </p>
448 <p>
449 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.
450 </p>
451 <pre class="propdef">
452 Name: <dfn id="transition-delay">transition-delay</dfn>
453 Value: <<time>>#
454 Initial: ''0s''
455 Applies to: all elements, :before and :after pseudo elements
456 Inherited: no
457 Animatable: no
458 Percentages: N/A
459 Media: interactive
460 Computed value: Same as specified value.
461 Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
462 </pre><!-- ======================================================================================================= -->
463 <h3 id="transition-shorthand-property"><span id="the-transition-shorthand-property-">
464 The 'transition' Shorthand Property
465 </span></h3>
466 <p>
467 The 'transition' shorthand property combines the four properties described above into a single property.
468 </p>
469 <pre class="propdef">
470 Name: <dfn id="transition">transition</dfn>
471 Value: <<single-transition>>#
472 Initial: see individual properties
473 Applies to: all elements, :before and :after pseudo elements
474 Inherited: no
475 Animatable: no
476 Percentages: N/A
477 Media: interactive
478 Computed value: see individual properties
479 Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
480 </pre>
482 <div class="prod">
483 <dfn type id="single-transition"><single-transition></dfn> = [ ''none'' | <<single-transition-property>> ] || <<time>> || <<single-transition-timing-function>> || <<time>>
484 </div>
486 <p>
487 Note that order is important within the items in this property:
488 the first value that can be parsed as a time is assigned to the
489 transition-duration,
490 and the second value that can be parsed as a time is assigned to
491 transition-delay.
492 </p>
494 <p>
495 If there is more than one <<single-transition>> in the shorthand,
496 and any of the transitions has
497 ''none'' as the <<single-transition-property>>,
498 then the declaration is invalid.
499 </p>
501 <h2 id="starting">
502 Starting of transitions
503 </h2>
505 <p>
506 Implementations must maintain a set of
507 <dfn lt="running transition">running transitions</dfn>,
508 each of which applies to a specific element and non-shorthand
509 property. Each of these transitions also has a
510 <dfn>start time</dfn>, <dfn>end time</dfn>, <dfn>start value</dfn>,
511 <dfn>end value</dfn>, <dfn>reversing-adjusted start value</dfn>,
512 and <dfn>reversing shortening factor</dfn>.
513 Transitions are added to this set as described in this section,
514 and are removed from this set
515 when they <a>complete</a>
516 or when implementations are required to <dfn>cancel</dfn> them.
517 <span class="note">
518 For the rationale behind the <a>reversing-adjusted start value</a>
519 and <a>reversing shortening factor</a>, see [[#reversing]].
520 </span>
521 </p>
523 <p>
524 Implementations must also maintain a set of
525 <dfn lt="completed transition">completed transitions</dfn>,
526 each of which
527 (like <a>running transitions</a>)
528 applies to a specific element and non-shorthand property.
529 <span class="note">
530 This specification maintains the invariant that
531 there is never both a <a>running transition</a> and
532 a <a>completed transition</a> for the same property and element.
533 </span>
534 </p>
536 <div class="note">
538 <p>
539 This set of completed transitions
540 needs to be maintained
541 in order to prevent
542 transitions from repeating themselves in certain cases,
543 i.e., to maintain the invariant
544 that this specification tries to maintain
545 that unrelated style changes do not trigger transitions.
546 </p>
548 <p class="example">
549 An example where maintaining the set of completed transitions
550 is necessary would be a transition on
551 an inherited property,
552 where the parent specifies a transition of that property for
553 a longer duration (say, ''transition: 4s text-indent'')
554 and a child element that inherits the parent's value specifies
555 a transition of the same property for a shorter duration
556 (say, ''transition: 1s text-indent'').
557 Without the maintenance of this set of completed transitions,
558 implementations could start additional transitions on the child
559 after the initial 1 second transition on the child completes.
560 </p>
562 </div>
564 <p>
565 Various things can cause the computed style of an element to change,
566 or for an element to start or stop having computed style.
567 (For the purposes of this specification,
568 an element has computed style when it is in the document tree,
569 and does not have computed style when it is not in the document tree.)
570 These include
571 insertion and removal of elements from the document tree
572 (which both changes whether those elements have computed styles and
573 can change the styles of other elements through selector matching),
574 changes to the document tree that cause
575 changes to which selectors match elements,
576 changes to style sheets or style attributes,
577 and other things.
578 This specification does not define when computed styles are updated,
579 beyond saying that implementations must not
580 use, present, or display something resulting from the CSS
581 cascading, value computation, and inheritance process [[!CSS3CASCADE]]
582 without updating the computed style
583 (which means merely that implementations cannot avoid
584 meeting requirements of this specification
585 by claiming not to have updated the computed style
586 as part of handling a style change).
587 However,
588 when an implementation updates the computed style for an element
589 to reflect one of these changes,
590 it must update the computed style for all elements to reflect all
591 of these changes at the same time
592 (or at least it must be undetectable that it was done at a
593 different time).
594 This processing of a set of simultaneous style changes is called a
595 <dfn>style change event</dfn>.
596 (Implementations typically have a <a>style change event</a> to
597 correspond with their desired screen refresh rate,
598 and when up-to-date computed style is needed
599 for a script API that depends on it.)
600 </p>
602 <p>
603 Since this specification does not define
604 when a <a>style change event</a> occurs,
605 and thus what changes to computed values are considered simultaneous,
606 authors should be aware that changing any of the transition
607 properties a small amount of time after making a change that
608 might transition can result in behavior that varies between
609 implementations, since the changes might be considered
610 simultaneous in some implementations but not others.
611 </p>
613 <p>
614 When a <a>style change event</a> occurs,
615 implementations must start transitions based on
616 the computed styles that changed in that event.
617 If an element does not have a computed style
618 either before or after the style change event,
619 then transitions are not started for that element
620 in that style change event.
621 Otherwise,
622 define the <dfn>before-change style</dfn> as
623 the computed style for the element as of
624 the previous <a>style change event</a>,
625 except with any styles derived from declarative
626 animations such as CSS Transitions, CSS Animations
627 ([[CSS3-ANIMATIONS]]),
628 and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]])
629 updated to the current time.
630 Likewise, define the <dfn>after-change style</dfn> as
631 the computed style for the element based on the information
632 known at the start of that <a>style change event</a>,
633 but excluding any styles from CSS Transitions in the computation,
634 and inheriting from
635 the <a>after-change style</a> of the parent.
636 </p>
638 <div class="note">
639 <p>
640 Note that this definition of the <a>after-change style</a>
641 means that a single change
642 can start a transition on the same property
643 on both an ancestor element and its descendant element.
644 This can happen when a property change is inherited
645 from one element with 'transition-*' properties
646 that say to animate the changing property
647 to another element with 'transition-*' properties
648 that also say to animate the changing property.
649 </p>
651 <p>
652 When this happens, both transitions will run,
653 and the transition on the descendant will override
654 the transition on the ancestor
655 because of the normal
656 CSS cascading and inheritance rules ([[CSS3CASCADE]]).
657 </p>
659 <p>
660 If the transition on the descendant completes before
661 the transition on the ancestor,
662 the descendant will then resume inheriting
663 the (still transitioning) value from its parent.
664 This effect is likely not a desirable effect,
665 but it is essentially doing what the author asked for.
666 </p>
667 </div>
669 <p>
670 For each element with a <a>before-change style</a> and
671 an <a>after-change style</a>,
672 and each property (other than shorthands),
673 define the <dfn>matching transition-property value</dfn> as
674 the last value in the
675 'transition-property' in the element's <a>after-change style</a>
676 that matches the property,
677 as described in
678 [[#transition-property-property]].
679 If there is such a value, then corresponding to it, there is
680 a <dfn>matching transition duration</dfn>,
681 a <dfn>matching transition delay</dfn>, and
682 a <dfn>matching transition timing function</dfn>
683 in the values in the <a>after-change style</a> of
684 'transition-duration', 'transition-delay', and 'transition-timing-function'
685 (see <a href="#list-matching">the rules on matching lists</a>).
686 Define the <dfn>combined duration</dfn> of the transition
687 as the sum of max(<a>matching transition duration</a>, ''0s'') and
688 the <a>matching transition delay</a>.
689 For each element and property, the implementation must act
690 as follows:
691 </p>
693 <ol>
694 <li>
695 If all of the following are true:
696 <ul>
697 <li>
698 the element does not have
699 a <a>running transition</a> for the property,
700 </li>
701 <li>
702 the <a>before-change style</a> is different from
703 and can be interpolated with
704 the <a>after-change style</a> for that property,
705 </li>
706 <li>
707 the element does not have a <a>completed transition</a>
708 for the property
709 or the <a>end value</a> of the <a>completed transition</a>
710 is different from the <a>after-change style</a> for the property,
711 </li>
712 <li>
713 there is a <a>matching transition-property value</a>, and
714 </li>
715 <li>
716 the <a>combined duration</a> is greater than ''0s'',
717 </li>
718 </ul>
719 then implementations must
720 remove the <a>completed transition</a> (if present) from the set
721 of completed transitions and
722 start a transition whose:
723 <ul>
724 <li>
725 <a>start time</a> is
726 the time of the <a>style change event</a> plus
727 the <a>matching transition delay</a>,
728 </li>
729 <li>
730 <a>end time</a> is
731 the <a>start time</a> plus
732 the <a>matching transition duration</a>,
733 </li>
734 <li>
735 <a>start value</a> is
736 the value of the transitioning property
737 in the <a>before-change style</a>,
738 </li>
739 <li>
740 <a>end value</a> is
741 the value of the transitioning property
742 in the <a>after-change style</a>,
743 </li>
744 <li>
745 <a>reversing-adjusted start value</a> is the same as
746 the <a>start value</a>, and
747 <li>
748 <a>reversing shortening factor</a> is 1.
749 </li>
750 </ul>
751 </li>
752 <li>
753 If the element has a <a>running transition</a> or
754 <a>completed transition</a> for the property,
755 and there is <strong>not</strong>
756 a <a>matching transition-property value</a>,
757 then implementations must
758 <a>cancel</a> the <a>running transition</a>
759 or remove the <a>completed transition</a> from the set of
760 <a>completed transitions</a>.
761 </li>
762 <li>
763 If the element has a <a>running transition</a> for the property,
764 there is a <a>matching transition-property value</a>,
765 and the <a>end value</a> of the <a>running transition</a> is
766 <strong>not</strong> equal to the value of the property in the
767 <a>after-change style</a>, then:
768 <ol>
769 <li>
770 If the <a>current value</a> of the property
771 in the <a>running transition</a>
772 is equal to
773 the value of the property in the <a>after-change style</a>,
774 or if these two values cannot be interpolated,
775 then implementations must
776 <a>cancel</a> the <a>running transition</a>.
777 </li>
778 <li>
779 Otherwise, if the <a>combined duration</a> is
780 less than or equal to ''0s'',
781 then implementations must
782 <a>cancel</a> the <a>running transition</a>.
783 </li>
784 <li>
785 Otherwise, if the <a>reversing-adjusted start value</a>
786 of the <a>running transition</a> is the same as the value of
787 the property in the <a>after-change style</a>
788 <span class="note">(see the
789 <a href="#reversing">section on reversing of
790 transitions</a> for why these case exists)</span>,
791 implementations must
792 <a>cancel</a> the <a>running transition</a> and
793 start a new transition whose:
794 <ul>
795 <li>
796 <a>reversing-adjusted start value</a> is
797 the <a>end value</a> of the
798 <a>running transition</a>
799 <span class="note">(Note: This represents the logical start state of
800 the transition, and allows some calculations to ignore that
801 the transition started before that state was reached, which
802 in turn allows repeated reversals of the same transition to
803 work correctly),</span>
804 <li>
805 <a>reversing shortening factor</a>
806 is the absolute value, clamped to the range [0, 1],
807 of the sum of:
808 <ol>
809 <li>the output of the timing function of the old transition
810 at the time of the <a>style change event</a>,
811 times the <a>reversing shortening factor</a> of the
812 old transition</li>
813 <li>1 minus the <a>reversing shortening factor</a> of
814 the old transition.</li>
815 </ol>
816 <span class="note">Note: This represents the portion of the
817 space between the <a>reversing-adjusted start value</a>
818 and the <a>end value</a> that the old transition has
819 traversed (in amounts of the value, not time), except with the
820 absolute value and clamping to handle timing functions that
821 have y1 or y2 outside the range [0, 1].</span>
822 </li>
823 <li>
824 <a>start time</a> is
825 the time of the <a>style change event</a> plus:
826 <ol>
827 <li>if the <a>matching transition delay</a>
828 is nonnegative,
829 the <a>matching transition delay</a>, or
830 <li>if the <a>matching transition delay</a>
831 is negative,
832 the product of
833 the new transition's
834 <a>reversing shortening factor</a> and
835 the <a>matching transition delay</a>,
836 </ol>
837 </li>
838 <li>
839 <a>end time</a> is
840 the <a>start time</a> plus the product of
841 the <a>matching transition duration</a> and
842 the new transition's <a>reversing shortening factor</a>,
843 </li>
844 <li>
845 <a>start value</a> is
846 the <a>current value</a> of the property
847 in the <a>running transition</a>,
848 </li>
849 <li>
850 <a>end value</a> is
851 the value of the property
852 in the <a>after-change style</a>,
853 </li>
854 </ul>
855 </li>
856 <li>
857 Otherwise, implementations must
858 <a>cancel</a> the <a>running transition</a>
859 and start a new transition whose:
860 <ul>
861 <li>
862 <a>start time</a> is
863 the time of the <a>style change event</a> plus
864 the <a>matching transition delay</a>,
865 </li>
866 <li>
867 <a>end time</a> is
868 the <a>start time</a> plus
869 the <a>matching transition duration</a>,
870 </li>
871 <li>
872 <a>start value</a> is
873 the <a>current value</a> of the property
874 in the <a>running transition</a>,
875 </li>
876 <li>
877 <a>end value</a> is
878 the value of the property
879 in the <a>after-change style</a>,
880 </li>
881 <li>
882 <a>reversing-adjusted start value</a> is the same as
883 the <a>start value</a>, and
884 <li>
885 <a>reversing shortening factor</a> is 1.
886 </li>
887 </ul>
888 </li>
889 </ol>
890 </li>
892 </ol>
894 <div class="note">
895 <p>
896 Note that the above rules mean that
897 when the computed value of an animatable property changes,
898 the transitions that start are based on the
899 values of the 'transition-property', 'transition-duration',
900 'transition-timing-function', and 'transition-delay' properties
901 at the time the animatable property would first have its new
902 computed value.
903 This means that when one of these 'transition-*' properties
904 changes at the same time as
905 a property whose change might transition,
906 it is the <em>new</em> values of the 'transition-*' properties
907 that control the transition.
908 </p>
909 <div class="example" id="manual-reversing-example">
910 <p style="display:none">
911 Example(s):
912 </p>
913 <p>This provides a way for authors to specify different values
914 of the 'transition-*' properties for the “forward”
915 and “reverse” transitions (but see <a
916 href="#reversing">below</a> for special reversing behavior when
917 an <em>incomplete</em> transition is interrupted). Authors can
918 specify the value of 'transition-duration',
919 'transition-timing-function', or 'transition-delay' in the same
920 rule where they specify the value that triggers the transition,
921 or can change these properties at the same time as they change
922 the property that triggers the transition. Since it's the new
923 values of these 'transition-*' properties that affect the
924 transition, these values will be used for the transitions
925 <em>to</em> the associated transitioning values. For example:
926 </p>
927 <pre>
928 li {
929 transition: background-color linear 1s;
930 background: blue;
931 }
932 li:hover {
933 background-color: green;
934 transition-duration: 2s; /* applies to the transition *to* the :hover state */
935 }</pre>
936 <p>
937 When a list item with these style rules enters the :hover
938 state, the computed 'transition-duration' at the time that
939 'background-color' would have its new value (''green'') is ''2s'',
940 so the transition from ''blue'' to ''green'' takes 2 seconds.
941 However, when the list item leaves the :hover state, the
942 transition from ''green'' to ''blue'' takes 1 second.
943 </p>
944 </div>
945 </div>
947 <p class="note">
948 Note that once the transition of a property has started
949 (including being in its delay phase),
950 it continues running based on
951 the original timing function, duration, and
952 delay, even if the 'transition-timing-function',
953 'transition-duration', or 'transition-delay' property changes
954 before the transition is complete. However, if the
955 'transition-property' property changes such that the transition
956 would not have started, the transition stops (and the
957 property immediately changes to its final value).
958 </p>
960 <p class="note">
961 Note that above rules mean that
962 transitions do not start when the computed
963 value of a property changes as a result of declarative animation
964 (as opposed to scripted animation).
965 This happens because the before-change style includes up-to-date
966 style for declarative animations.
967 </p>
969 <h3 id="reversing">
970 Faster reversing of interrupted transitions
971 </h3>
972 <div class="note">
974 <p>
975 Many common transitions effects involve transitions between two states,
976 such as the transition that occurs when the mouse pointer moves
977 over a user interface element, and then later moves out of that element.
978 With these effects, it is common for a running transition
979 to be interrupted before it completes,
980 and the property reset to the starting value of that transition.
981 An example is a hover effect on an element,
982 where a transition starts when the pointer enters the element,
983 and then the pointer exits the element before the effect has completed.
984 If the outgoing and incoming transitions
985 are executed using their specified durations and timing functions,
986 the resulting effect can be distractingly asymmetric
987 because the second transition
988 takes the full specified time to move a shortened distance.
989 Instead, this specification makes second transition shorter.
990 </p>
992 <p>
993 The mechanism the above rules use to cause this involves the
994 <a>reversing shortening factor</a> and the
995 <a>reversing-adjusted start value</a>.
996 In particular, the reversing behavior is present whenever
997 the <a>reversing shortening factor</a> is less than 1.
998 </p>
1000 <p class="note">
1001 Note that these rules do not fully address the problem for
1002 transition patterns that involve more than two states.
1003 </p>
1005 <p class="note">
1006 Note that these rules lead to the entire timing function of the
1007 new transition being used, rather than jumping into the middle
1008 of a timing function, which can create a jarring effect.
1009 </p>
1011 <p class="note">
1012 This was one of several possibilities that was considered by the
1013 working group. See the
1014 <a href="transition-reversing-demo">reversing demo</a>
1015 demonstrating a number of them, leading to a working group
1016 resolution made on 2013-06-07 and edits made on 2013-11-11.
1017 </p>
1019 </div>
1021 <h2 id="application">
1022 Application of transitions
1023 </h2>
1025 <p>
1026 When a property on an element is undergoing a transition
1027 (that is, when or after the transition has started and before the
1028 <a>end time</a> of the transition)
1029 the transition adds a style called the <dfn>current value</dfn>
1030 to the CSS cascade
1031 at the level defined for CSS Transitions in [[!CSS3CASCADE]].
1032 </p>
1034 <p class="note">
1035 Note that this means that computed values
1036 resulting from CSS transitions
1037 can inherit to descendants just like
1038 any other computed values.
1039 In the normal case, this means that
1040 a transition of an inherited property
1041 applies to descendant elements
1042 just as an author would expect.
1043 </p>
1045 <p>
1046 Implementations must add this value to the cascade
1047 if and only if
1048 that property is not currently
1049 undergoing a CSS Animation ([[!CSS3-ANIMATIONS]]) on the same element.
1050 </p>
1052 <p class="note">
1053 Note that this behavior of transitions not applying to the cascade
1054 when an animation on the same element and property is running
1055 does not affect whether the transition has started or ended.
1056 APIs that detect whether transitions are running
1057 (such as <a href="#transition-events">transition events</a>)
1058 still report that a transition is running.
1059 </p>
1061 <p>
1062 If the current time is at or before the
1063 <a>start time</a> of the transition
1064 (that is, during the delay phase of the transition),
1065 the <a>current value</a> is a specified style that will compute
1066 to the <a>start value</a> of the transition.
1067 </p>
1069 <p>
1070 If the current time is after the
1071 <a>start time</a> of the transition
1072 (that is, during the duration phase of the transition),
1073 the <a>current value</a> is a specified style that will compute
1074 to the <a href="#animatable-types">result of interpolating the property</a>
1075 using the <a>start value</a> of the transition as
1076 <var>V</var><sub>start</sub>,
1077 using the <a>end value</a> of the transition as
1078 <var>V</var><sub>end</sub>,
1079 and using (current time - start time) / (end time - start time)
1080 as the input to the timing function.
1081 </p>
1083 <h2 id="complete">Completion of transitions</h2>
1085 <p>
1086 <a>Running transitions</a>
1087 <dfn id="dfn-complete">complete</dfn>
1088 at a time that equal to or after their end time,
1089 but prior to to the first <a>style change event</a>
1090 whose time is equal to or after their <a>end time</a>.
1091 When a transition completes,
1092 implementations must move
1093 all transitions that complete at that time
1094 from the set of <a>running transitions</a>
1095 to the set of <a>completed transitions</a>
1096 and then fire the <a href="#transition-events">events</a>
1097 for those completions.
1098 <span class="note">(Note that doing otherwise could allow
1099 a style change event to happen
1100 without the necessary transitions completing,
1101 since firing the event could cause a style change event,
1102 if an event handler requests up-to-date computed style.)</span>
1103 </p>
1105 <h2 id="transition-events"><span id="transition-events-">
1106 Transition Events
1107 </span></h2>
1108 <p>
1109 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>.
1110 An event is fired for each property that undergoes a transition.
1111 This allows a content developer to perform actions that synchronize
1112 with the completion of a transition.
1113 </p>
1114 <p>
1115 Each event provides the name of the property the transition is
1116 associated with as well as the duration of the transition.
1117 </p>
1118 <dl>
1119 <dt>
1120 <b>Interface <dfn interface id="Events-TransitionEvent">TransitionEvent</dfn></b>
1121 </dt>
1122 <dd>
1123 <p>
1124 The {{TransitionEvent}} interface provides specific contextual information associated with transitions.
1125 </p>
1126 <dl>
1127 <dt>
1128 <b>IDL Definition</b>
1129 </dt>
1130 <dd>
1131 <div class='idl-code'>
1132 <pre class='idl'>
1133 [Constructor(DOMString type, optional TransitionEventInit transitionEventInitDict)]
1134 interface TransitionEvent : Event {
1135 readonly attribute DOMString propertyName;
1136 readonly attribute float elapsedTime;
1137 readonly attribute DOMString pseudoElement;
1138 };
1140 dictionary TransitionEventInit : EventInit {
1141 DOMString propertyName = "";
1142 float elapsedTime = 0.0;
1143 DOMString pseudoElement = "";
1144 };
1145 </pre>
1146 </div>
1147 </dd>
1148 <dt>
1149 <b>Attributes</b>
1150 </dt>
1151 <dd>
1152 <dl>
1153 <dt>
1154 <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-propertyName">propertyName</dfn></code> of type <code>DOMString</code>, readonly
1155 </dt>
1156 <dd>
1157 The name of the CSS property associated with the transition.
1158 </dd>
1159 </dl>
1160 <dl>
1161 <dt>
1162 <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-elapsedTime">elapsedTime</dfn></code> of type <code>float</code>, readonly
1163 </dt>
1164 <dd>
1165 The amount of time the transition has been running, in seconds, when this event fired. Note that this value is not affected by the value of <code class="property">transition-delay</code>.
1166 </dd>
1167 </dl>
1168 <dl>
1169 <dt>
1170 <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-pseudoElement">pseudoElement</dfn></code> of type <code>DOMString</code>, readonly
1171 </dt>
1172 <dd>
1173 The name (beginning with two colons) of the CSS
1174 pseudo-element on which the transition occurred (in
1175 which case the target of the event is that
1176 pseudo-element's corresponding element), or the empty
1177 string if the transition occurred on an element (which
1178 means the target of the event is that element).
1179 </dd>
1180 </dl>
1181 </dd>
1182 </dl>
1183 <p>
1184 <code id="TransitionEvent-constructor">TransitionEvent(type, transitionEventInitDict)</code>
1185 is an <a>event constructor</a>.
1186 </p>
1187 </dd>
1188 </dl>
1189 <p>
1190 There is one type of transition event available.
1191 </p>
1192 <dl>
1193 <dt>
1194 <b><dfn event for="Element" id="transitionend">transitionend</dfn></b>
1195 </dt>
1196 <dd>
1197 The {{transitionend}} event occurs at the completion of the transition. In the
1198 case where a transition is removed before completion, such as if the
1199 transition-property is removed, then the event will not fire.
1200 <ul>
1201 <li>Bubbles: Yes
1202 </li>
1203 <li>Cancelable: No
1204 </li>
1205 <li>Context Info: propertyName, elapsedTime, pseudoElement
1206 </li>
1207 </ul>
1208 </dd>
1209 </dl>
1211 <h2 id="animatable-types"><span id="animation-of-property-types-">
1212 Animation of property types
1213 </span></h2>
1215 <p>
1216 When interpolating between two values,
1217 <var>V</var><sub>start</sub> and <var>V</var><sub>end</sub>,
1218 interpolation is done using the output <var>p</var> of the timing function,
1219 which gives the portion of the value space
1220 that the interpolation has crossed.
1221 Thus the result of the interpolation is
1222 <var>V</var><sub>res</sub> =
1223 (1 - <var>p</var>) ⋅ <var>V</var><sub>start</sub> +
1224 <var>p</var> ⋅ <var>V</var><sub>end</sub>.
1225 </p>
1227 <p>
1228 However, if this value (<var>V</var><sub>res</sub>)
1229 is outside the allowed range of values for the property,
1230 then it is clamped to that range.
1231 This can occur if <var>p</var> is outside of the range 0 to 1,
1232 which can occur if a timing function is specified
1233 with a <var>y1</var> or <var>y2</var> that is outside the range 0 to 1.
1234 </p>
1236 <p>
1237 The following describes how each property type undergoes transition or
1238 animation.
1239 </p>
1241 <ul>
1242 <li id="animtype-color">
1243 <strong>color</strong>: interpolated via red, green, blue and alpha
1244 components (treating each as a number, see below).
1245 The interpolation is done between premultiplied colors
1246 (that is, colors for which the red, green, and blue components
1247 specified have been multiplied by the alpha).
1248 </li>
1249 <li id="animtype-length">
1250 <strong>length</strong>: interpolated as real numbers.
1251 </li>
1252 <li id="animtype-percentage">
1253 <strong>percentage</strong>: interpolated as real numbers.
1254 </li>
1255 <li id="animtype-lpcalc">
1256 <strong>length, percentage, or calc</strong>: when both values
1257 are lengths, interpolated as lengths; when both values are
1258 percentages, interpolated as percentages; otherwise, both
1259 values are converted into a ''calc()'' function that is the
1260 sum of a length and a percentage (each possibly zero), and
1261 these ''calc()'' functions have each half interpolated as real
1262 numbers.
1263 </li>
1264 <li id="animtype-integer">
1265 <strong>integer</strong>: interpolated via discrete steps (whole
1266 numbers). The interpolation happens in real number space and is
1267 converted to an integer by rounding to the nearest integer, with
1268 values halfway between a pair of integers rounded towards
1269 positive infinity.
1270 </li>
1271 <li id="animtype-font-weight">
1272 <strong>font weight</strong>: interpolated via discrete steps
1273 (multiples of 100). The interpolation happens in real number
1274 space and is converted to an integer by rounding to the
1275 nearest multiple of 100, with values halfway between multiples
1276 of 100 rounded towards positive infinity.
1277 </li>
1278 <li id="animtype-number">
1279 <strong>number</strong>: interpolated as real (floating point)
1280 numbers.
1281 </li>
1282 <li id="animtype-rect">
1283 <strong>rectangle</strong>: interpolated via the x, y,
1284 width and height components (treating each as a number).
1285 </li>
1286 <li id="animtype-visibility">
1287 <strong>visibility</strong>: if one of the values is
1288 ''visibility/visible'', interpolated as a discrete step where values of the
1289 timing function between 0 and 1 map to ''visibility/visible'' and other
1290 values of the timing function (which occur only at the
1291 start/end of the transition or as a result of ''cubic-bezier()''
1292 functions with Y values outside of [0, 1]) map to the closer
1293 endpoint; if neither value is ''visibility/visible'' then not interpolable.
1294 </li>
1295 <li id="animtype-shadow-list">
1296 <strong>shadow list</strong>: Each shadow in the list is
1297 interpolated via the
1298 color (as <a href="#animtype-color">color</a>) component,
1299 and x, y, blur, and (when appropriate) spread
1300 (as <a href="#animtype-length">length</a>) components.
1301 For each shadow, if both input shadows are ''shadow/inset''
1302 or both input shadows are not ''shadow/inset'',
1303 then the interpolated shadow must match the input shadows in that regard.
1304 If any pair of input shadows has one ''shadow/inset'' and the other not ''shadow/inset'',
1305 the entire <a href="#animtype-shadow-list">shadow-list</a> is uninterpolable.
1306 If the lists of shadows have different lengths,
1307 then the shorter list is padded at the end
1308 with shadows whose color is ''transparent'',
1309 all lengths are ''0'',
1310 and whose ''shadow/inset'' (or not) matches the longer list.
1311 </li>
1312 <li id="animtype-gradient">
1313 <strong>gradient</strong>: interpolated via the
1314 positions and colors of each stop. They must have the same type
1315 (radial or linear) and same number of stops in order to be animated.
1316 <span class="note">Note: [[CSS3-IMAGES]] may extend this
1317 definition.</span>
1318 </li>
1319 <li id="animtype-paintserver">
1320 <strong>paint server</strong> (SVG): interpolation is only supported
1321 between: gradient to gradient and color to color. They then
1322 work as above.
1323 </li>
1324 <li id="animtype-simple-list">
1325 <strong>simple list</strong> of other types:
1326 If the lists have the same number of items,
1327 and each pair of values can be interpolated,
1328 each item in the list is interpolated using
1329 the rules given for those types.
1330 Otherwise the values are not interpolable.
1331 </li>
1332 <li id="animtype-repeatable-list">
1333 <strong>repeatable list</strong> of other types:
1334 The result list has a length that is the least common multiple
1335 of the lengths of the input lists.
1336 Each item in the result is the interpolation of the value
1337 from each input list repeated to the length of the result list.
1338 If a pair of values cannot be interpolated, then the lists
1339 are not interpolable.
1340 <span class="note">
1341 The repeatable list concept ensures that a list that is
1342 conceptually repeated to a certain length (as
1343 'background-origin' is repeated to the length of the
1344 'background-image' list) or repeated infinitely will
1345 smoothly transition between any values, and so that the
1346 computed value will properly represent the result (and
1347 potentially be inherited correctly).
1348 </span>
1349 </li>
1350 </ul>
1352 <p>Future specifications may define additional types that can
1353 be animated.</p>
1355 <p>See the definition of 'transition-property' for how animation
1356 of shorthand properties and the ''all'' value is applied to any
1357 properties (in the shorthand) that can be animated.</p>
1359 <h2 id="animatable-properties"><span id="animatable-properties-">
1360 Animatable properties
1361 </span></h2>
1363 <!--
1364 As resolved in
1365 http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html
1366 -->
1368 <p>The definition of each CSS property defines
1369 when the values of that property can be interpolated
1370 by referring to the definitions of property types
1371 in the <a href="#animatable-types">previous section</a>.
1372 Values are animatable when
1373 both the from and the to values of the property have the type described.
1374 (When a composite type such as "length, percentage, or calc" is listed,
1375 this means that both values must fit into that composite type.)
1376 When multiple types are listed in the form "either A or B",
1377 both values must be of the same type to be interpolable.</p>
1379 <p>For properties that exist at the time this specification was
1380 developed, this specification defines whether and how they are
1381 animated. However, future CSS specifications may define
1382 additional properties, additional values for existing properties,
1383 or additional animation behavior of existing values. In order to
1384 describe new animation behaviors and to have the definition of
1385 animation behavior in a more appropriate location, future CSS
1386 specifications should include an "Animatable:" line in the summary
1387 of the property's definition (in addition to the other lines
1388 described in [[CSS21]], <a
1389 href="http://www.w3.org/TR/CSS21/about.html#property-defs">section
1390 1.4.2</a>). This line should say "no" to indicate that a property
1391 cannot be animated or should reference an animation behavior
1392 (which may be one of the behaviors in the <a
1393 href="#animation-of-property-types-">Animation of property
1394 types</a> section above, or may be a new behavior) to define how
1395 the property animates. Such definitions override those given in
1396 this specification.</p>
1398 <h3 id="animatable-css"><span id="properties-from-css-">
1399 Properties from CSS
1400 </span></h3>
1402 <p>
1403 The following definitions define the animation behavior for
1404 properties in CSS Level 2 Revision 1 ([[CSS21]]) and in Level 3 of
1405 the CSS Color Module ([[CSS3COLOR]]).
1406 </p>
1408 <table class="animatable-properties">
1409 <tr>
1410 <th>Property Name</th>
1411 <th>Type</th>
1412 </tr>
1413 <tr>
1414 <td>'background-color'</td><td>as <a href="#animtype-color">color</a></tr>
1415 <tr>
1416 <td>'background-position'</td><td>as <a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1417 </tr>
1418 <tr>
1419 <td>'border-bottom-color'</td><td>as <a href="#animtype-color">color</a></td>
1420 </tr>
1421 <tr>
1422 <td>'border-bottom-width'</td><td>as <a href="#animtype-length">length</a></td>
1423 </tr>
1424 <tr>
1425 <td>'border-left-color'</td><td>as <a href="#animtype-color">color</a></td>
1426 </tr>
1427 <tr>
1428 <td>'border-left-width'</td><td>as <a href="#animtype-length">length</a></td>
1429 </tr>
1430 <tr>
1431 <td>'border-right-color'</td><td>as <a href="#animtype-color">color</a></td>
1432 </tr>
1433 <tr>
1434 <td>'border-right-width'</td><td>as <a href="#animtype-length">length</a></td>
1435 </tr>
1436 <tr>
1437 <td>'border-spacing'</td><td>as <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-length">length</a></td>
1438 </tr>
1439 <tr>
1440 <td>'border-top-color'</td><td>as <a href="#animtype-color">color</a></td>
1441 </tr>
1442 <tr>
1443 <td>'border-top-width'</td><td>as <a href="#animtype-length">length</a></td>
1444 </tr>
1445 <tr>
1446 <td>'bottom'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1447 </tr>
1448 <tr>
1449 <td>'clip'</td><td>as <a href="#animtype-rect">rectangle</a></td>
1450 </tr>
1451 <tr>
1452 <td>'color'</td><td>as <a href="#animtype-color">color</a></td>
1453 </tr>
1454 <tr>
1455 <td>'font-size'</td><td>as <a href="#animtype-length">length</a></td>
1456 </tr>
1457 <tr>
1458 <td>'font-weight!!property'</td><td>as <a href="#animtype-font-weight">font weight</a></td>
1459 </tr>
1460 <tr>
1461 <td>'height'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1462 </tr>
1463 <tr>
1464 <td>'left'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1465 </tr>
1466 <tr>
1467 <td>'letter-spacing'</td><td>as <a href="#animtype-length">length</a></td>
1468 </tr>
1469 <tr>
1470 <td>'line-height'</td><td>as either <a href="#animtype-number">number</a> or <a href="#animtype-length">length</a></td>
1471 </tr>
1472 <tr>
1473 <td>'margin-bottom'</td><td>as <a href="#animtype-length">length</a></td>
1474 </tr>
1475 <tr>
1476 <td>'margin-left'</td><td>as <a href="#animtype-length">length</a></td>
1477 </tr>
1478 <tr>
1479 <td>'margin-right'</td><td>as <a href="#animtype-length">length</a></td>
1480 </tr>
1481 <tr>
1482 <td>'margin-top'</td><td>as <a href="#animtype-length">length</a></td>
1483 </tr>
1484 <tr>
1485 <td>'max-height'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1486 </tr>
1487 <tr>
1488 <td>'max-width'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1489 </tr>
1490 <tr>
1491 <td>'min-height'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1492 </tr>
1493 <tr>
1494 <td>'min-width'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1495 </tr>
1496 <tr>
1497 <td>'opacity'</td><td>as <a href="#animtype-number">number</a></td>
1498 </tr>
1499 <tr>
1500 <td>'outline-color'</td><td>as <a href="#animtype-color">color</a></td>
1501 </tr>
1502 <tr>
1503 <td>'outline-width'</td><td>as <a href="#animtype-length">length</a></td>
1504 </tr>
1505 <tr>
1506 <td>'padding-bottom'</td><td>as <a href="#animtype-length">length</a></td>
1507 </tr>
1508 <tr>
1509 <td>'padding-left'</td><td>as <a href="#animtype-length">length</a></td>
1510 </tr>
1511 <tr>
1512 <td>'padding-right'</td><td>as <a href="#animtype-length">length</a></td>
1513 </tr>
1514 <tr>
1515 <td>'padding-top'</td><td>as <a href="#animtype-length">length</a></td>
1516 </tr>
1517 <tr>
1518 <td>'right'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1519 </tr>
1520 <tr>
1521 <td>'text-indent'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1522 </tr>
1523 <tr>
1524 <td>'text-shadow'</td><td>as <a href="#animtype-shadow-list">shadow list</a></td>
1525 </tr>
1526 <tr>
1527 <td>'top'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1528 </tr>
1529 <tr>
1530 <td>'vertical-align'</td><td>as <a href="#animtype-length">length</a></td>
1531 </tr>
1532 <tr>
1533 <td>'visibility'</td><td>as <a href="#animtype-visibility">visibility</a></td>
1534 </tr>
1535 <tr>
1536 <td>'width'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1537 </tr>
1538 <tr>
1539 <td>'word-spacing'</td><td>as <a href="#animtype-length">length</a></td>
1540 </tr>
1541 <tr>
1542 <td>'z-index'</td><td>as <a href="#animtype-integer">integer</a></td>
1543 </tr>
1544 </table>
1546 <h3 id="animatable-svg"><span id="properties-from-svg-">
1547 Properties from SVG
1548 </span></h3>
1550 <p>
1551 All properties defined as animatable in the SVG specification, provided
1552 they are one of the property types listed above.
1553 </p>
1555 <!-- <table>
1556 <tr>
1557 <th>Property Name</th><th>Type</th>
1558 </tr>
1559 <tr>
1560 <td>stop-color</td><td>as <a href="#animtype-color">color</a></td>
1561 </tr>
1562 <tr>
1563 <td>stop-opacity</td><td>as <a href="#animtype-number">number</a></td>
1564 </tr>
1565 <tr>
1566 <td>fill</td><td>as <a href="#animtype-paintserver">paint server</a></td>
1567 </tr>
1568 <tr>
1569 <td>fill-opacity</td><td>as <a href="#animtype-number">number</a></td>
1570 </tr>
1571 <tr>
1572 <td>stroke</td><td>as <a href="#animtype-paintserver">paint server</a></td>
1573 </tr>
1574 <tr>
1575 <td>stroke-dasharray</td><td>as <a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-number">number</a></td>
1576 </tr>
1577 <tr>
1578 <td>stroke-dashoffset</td><td>as <a href="#animtype-number">number</a></td>
1579 </tr>
1580 <tr>
1581 <td>stroke-miterlimit</td><td>as <a href="#animtype-number">number</a></td>
1582 </tr>
1583 <tr>
1584 <td>stroke-opacity</td><td>as <a href="#animtype-number">number</a></td>
1585 </tr>
1586 <tr>
1587 <td>stroke-width</td><td>as <a href="#animtype-number">number</a></td>
1588 </tr>
1589 <tr>
1590 <td>viewport-fill</td><td>as <a href="#animtype-color">color</a></td>
1591 </tr>
1592 <tr>
1593 <td>viewport-fill-opacity</td><td>as <a href="#animtype-color">color</a></td>
1594 </tr>
1595 </table> -->
1597 <h2 id="changes">Changes since Working Draft of 19 November 2013</h2>
1599 <p>The following are the substantive changes made since the
1600 <a href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/">Working Draft
1601 dated 19 November 2013</a>:</p>
1603 <ul>
1604 <li>Canceling and interrupting of running transitions is defined much more precisely. This includes the after-change style no longer including styles from CSS Transitions.</li>
1605 <li>Completion of transitions is defined somewhat more precisely.</li>
1606 <li>The transitionend event is no longer cancelable. This is since it has no default action, so canceling it would have no meaning. It also matches the animation events.</li>
1607 <li>The interpolation of ''shadow/inset'' values on shadow lists is no longer backwards.</li>
1608 <li>A [[#conformance]] section and [[#idl-index]] have been added</li>
1609 <li>The identifiers accepted by 'transition-property' are defined in terms of <<custom-ident>>.</li>
1610 <li>Define a little bit more about when changes to computed style happen, by saying at least that implementations must not update the effects of computed style without actually updating computed style.</li>
1611 </ul>
1613 <p>For more details on these changes, see the version control <a href="https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.bs">change log since 2015 January 26</a> and the <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>.</p>
1615 <p>For changes in earlier working drafts:</p>
1617 <ol>
1618 <li>see the <a href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#changes">changes section in the 19 November 2013 Working Draft</a>
1619 <li>see the <a href="http://www.w3.org/TR/2013/WD-css3-transitions-20130212/ChangeLog">the ChangeLog</a> for changes in previous working drafts
1620 <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>.
1621 </ol>
1623 <h2 id="acknowledgments">Acknowledgments</h2>
1625 <p>Thanks especially to the feedback from
1626 Tab Atkins,
1627 Carine Bournez,
1628 Aryeh Gregor,
1629 Vincent Hardy,
1630 Anne van Kesteren,
1631 Cameron McCormack,
1632 Alex Mogilevsky,
1633 Jasper St. Pierre,
1634 Estelle Weyl,
1635 and all the rest of the
1636 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.</p>
