Wed, 11 Feb 2015 13:21:29 +1100
[css-overflow] Stop trying to use "computed style" as a term for all computed values.
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 <a>computed value</a> of a property transitions over time from the old value to the new value. Therefore if a script queries the <a>computed value</a> of a property (or other data depending on it) 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 <p>
537 If an element is no longer in the document,
538 implementations must remove transitions on it
539 from the <a>running transitions</a> and the
540 <a>completed transitions</a>.
541 </p>
543 <div class="note">
545 <p>
546 This set of completed transitions
547 needs to be maintained
548 in order to prevent
549 transitions from repeating themselves in certain cases,
550 i.e., to maintain the invariant
551 that this specification tries to maintain
552 that unrelated style changes do not trigger transitions.
553 </p>
555 <p class="example">
556 An example where maintaining the set of completed transitions
557 is necessary would be a transition on
558 an inherited property,
559 where the parent specifies a transition of that property for
560 a longer duration (say, ''transition: 4s text-indent'')
561 and a child element that inherits the parent's value specifies
562 a transition of the same property for a shorter duration
563 (say, ''transition: 1s text-indent'').
564 Without the maintenance of this set of completed transitions,
565 implementations could start additional transitions on the child
566 after the initial 1 second transition on the child completes.
567 </p>
569 </div>
571 <p>
572 Various things can cause the <a>computed values</a> of properties
573 on an element to change.
574 These include
575 insertion and removal of elements from the document tree
576 (which both changes whether those elements have <a>computed values</a> and
577 can change the styles of other elements through selector matching),
578 changes to the document tree that cause
579 changes to which selectors match elements,
580 changes to style sheets or style attributes,
581 and other things.
582 This specification does not define when <a>computed values</a> are updated,
583 beyond saying that implementations must not
584 use, present, or display something resulting from the CSS
585 cascading, value computation, and inheritance process [[!CSS3CASCADE]]
586 without updating the <a>computed value</a>
587 (which means merely that implementations cannot avoid
588 meeting requirements of this specification
589 by claiming not to have updated the <a>computed value</a>
590 as part of handling a style change).
591 However,
592 when an implementation updates the <a>computed value</a> of a
593 property on an element
594 to reflect one of these changes,
595 or computes the <a>computed value</a> of a property on an element
596 newly added to the document,
597 it must update the <a>computed value</a>
598 for all properties and elements to reflect all
599 of these changes at the same time
600 (or at least it must be undetectable that it was done at a
601 different time).
602 This processing of a set of simultaneous style changes is called a
603 <dfn>style change event</dfn>.
604 (Implementations typically have a <a>style change event</a> to
605 correspond with their desired screen refresh rate,
606 and when up-to-date computed style or layout information is needed
607 for a script API that depends on it.)
608 </p>
610 <p>
611 Since this specification does not define
612 when a <a>style change event</a> occurs,
613 and thus what changes to computed values are considered simultaneous,
614 authors should be aware that changing any of the transition
615 properties a small amount of time after making a change that
616 might transition can result in behavior that varies between
617 implementations, since the changes might be considered
618 simultaneous in some implementations but not others.
619 </p>
621 <p>
622 When a <a>style change event</a> occurs,
623 implementations must start transitions based on
624 the <a>computed values</a> that changed in that event.
625 If an element is not in the document during that
626 style change even or was not in the document during
627 the previous style change event,
628 then transitions are not started for that element
629 in that style change event.
630 Otherwise,
631 define the <dfn>before-change style</dfn> as
632 the <a>computed values</a> of all properties on the element as of
633 the previous <a>style change event</a>,
634 except with any styles derived from declarative
635 animations such as CSS Transitions, CSS Animations
636 ([[CSS3-ANIMATIONS]]),
637 and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]])
638 updated to the current time.
639 Likewise, define the <dfn>after-change style</dfn> as
640 the <a>computed values</a> of all properties
641 on the element based on the information
642 known at the start of that <a>style change event</a>,
643 but excluding any styles from CSS Transitions in the computation,
644 and inheriting from
645 the <a>after-change style</a> of the parent.
646 </p>
648 <div class="note">
649 <p>
650 Note that this definition of the <a>after-change style</a>
651 means that a single change
652 can start a transition on the same property
653 on both an ancestor element and its descendant element.
654 This can happen when a property change is inherited
655 from one element with 'transition-*' properties
656 that say to animate the changing property
657 to another element with 'transition-*' properties
658 that also say to animate the changing property.
659 </p>
661 <p>
662 When this happens, both transitions will run,
663 and the transition on the descendant will override
664 the transition on the ancestor
665 because of the normal
666 CSS cascading and inheritance rules ([[CSS3CASCADE]]).
667 </p>
669 <p>
670 If the transition on the descendant completes before
671 the transition on the ancestor,
672 the descendant will then resume inheriting
673 the (still transitioning) value from its parent.
674 This effect is likely not a desirable effect,
675 but it is essentially doing what the author asked for.
676 </p>
677 </div>
679 <p>
680 For each element with a <a>before-change style</a> and
681 an <a>after-change style</a>,
682 and each property (other than shorthands),
683 define the <dfn>matching transition-property value</dfn> as
684 the last value in the
685 'transition-property' in the element's <a>after-change style</a>
686 that matches the property,
687 as described in
688 [[#transition-property-property]].
689 If there is such a value, then corresponding to it, there is
690 a <dfn>matching transition duration</dfn>,
691 a <dfn>matching transition delay</dfn>, and
692 a <dfn>matching transition timing function</dfn>
693 in the values in the <a>after-change style</a> of
694 'transition-duration', 'transition-delay', and 'transition-timing-function'
695 (see <a href="#list-matching">the rules on matching lists</a>).
696 Define the <dfn>combined duration</dfn> of the transition
697 as the sum of max(<a>matching transition duration</a>, ''0s'') and
698 the <a>matching transition delay</a>.
699 For each element and property, the implementation must act
700 as follows:
701 </p>
703 <ol>
704 <li>
705 If all of the following are true:
706 <ul>
707 <li>
708 the element does not have
709 a <a>running transition</a> for the property,
710 </li>
711 <li>
712 the <a>before-change style</a> is different from
713 and can be interpolated with
714 the <a>after-change style</a> for that property,
715 </li>
716 <li>
717 the element does not have a <a>completed transition</a>
718 for the property
719 or the <a>end value</a> of the <a>completed transition</a>
720 is different from the <a>after-change style</a> for the property,
721 </li>
722 <li>
723 there is a <a>matching transition-property value</a>, and
724 </li>
725 <li>
726 the <a>combined duration</a> is greater than ''0s'',
727 </li>
728 </ul>
729 then implementations must
730 remove the <a>completed transition</a> (if present) from the set
731 of completed transitions and
732 start a transition whose:
733 <ul>
734 <li>
735 <a>start time</a> is
736 the time of the <a>style change event</a> plus
737 the <a>matching transition delay</a>,
738 </li>
739 <li>
740 <a>end time</a> is
741 the <a>start time</a> plus
742 the <a>matching transition duration</a>,
743 </li>
744 <li>
745 <a>start value</a> is
746 the value of the transitioning property
747 in the <a>before-change style</a>,
748 </li>
749 <li>
750 <a>end value</a> is
751 the value of the transitioning property
752 in the <a>after-change style</a>,
753 </li>
754 <li>
755 <a>reversing-adjusted start value</a> is the same as
756 the <a>start value</a>, and
757 <li>
758 <a>reversing shortening factor</a> is 1.
759 </li>
760 </ul>
761 </li>
762 <li>
763 If the element has a <a>running transition</a> or
764 <a>completed transition</a> for the property,
765 and there is <strong>not</strong>
766 a <a>matching transition-property value</a>,
767 then implementations must
768 <a>cancel</a> the <a>running transition</a>
769 or remove the <a>completed transition</a> from the set of
770 <a>completed transitions</a>.
771 </li>
772 <li>
773 If the element has a <a>running transition</a> for the property,
774 there is a <a>matching transition-property value</a>,
775 and the <a>end value</a> of the <a>running transition</a> is
776 <strong>not</strong> equal to the value of the property in the
777 <a>after-change style</a>, then:
778 <ol>
779 <li>
780 If the <a>current value</a> of the property
781 in the <a>running transition</a>
782 is equal to
783 the value of the property in the <a>after-change style</a>,
784 or if these two values cannot be interpolated,
785 then implementations must
786 <a>cancel</a> the <a>running transition</a>.
787 </li>
788 <li>
789 Otherwise, if the <a>combined duration</a> is
790 less than or equal to ''0s'',
791 then implementations must
792 <a>cancel</a> the <a>running transition</a>.
793 </li>
794 <li>
795 Otherwise, if the <a>reversing-adjusted start value</a>
796 of the <a>running transition</a> is the same as the value of
797 the property in the <a>after-change style</a>
798 <span class="note">(see the
799 <a href="#reversing">section on reversing of
800 transitions</a> for why these case exists)</span>,
801 implementations must
802 <a>cancel</a> the <a>running transition</a> and
803 start a new transition whose:
804 <ul>
805 <li>
806 <a>reversing-adjusted start value</a> is
807 the <a>end value</a> of the
808 <a>running transition</a>
809 <span class="note">(Note: This represents the logical start state of
810 the transition, and allows some calculations to ignore that
811 the transition started before that state was reached, which
812 in turn allows repeated reversals of the same transition to
813 work correctly),</span>
814 <li>
815 <a>reversing shortening factor</a>
816 is the absolute value, clamped to the range [0, 1],
817 of the sum of:
818 <ol>
819 <li>the output of the timing function of the old transition
820 at the time of the <a>style change event</a>,
821 times the <a>reversing shortening factor</a> of the
822 old transition</li>
823 <li>1 minus the <a>reversing shortening factor</a> of
824 the old transition.</li>
825 </ol>
826 <span class="note">Note: This represents the portion of the
827 space between the <a>reversing-adjusted start value</a>
828 and the <a>end value</a> that the old transition has
829 traversed (in amounts of the value, not time), except with the
830 absolute value and clamping to handle timing functions that
831 have y1 or y2 outside the range [0, 1].</span>
832 </li>
833 <li>
834 <a>start time</a> is
835 the time of the <a>style change event</a> plus:
836 <ol>
837 <li>if the <a>matching transition delay</a>
838 is nonnegative,
839 the <a>matching transition delay</a>, or
840 <li>if the <a>matching transition delay</a>
841 is negative,
842 the product of
843 the new transition's
844 <a>reversing shortening factor</a> and
845 the <a>matching transition delay</a>,
846 </ol>
847 </li>
848 <li>
849 <a>end time</a> is
850 the <a>start time</a> plus the product of
851 the <a>matching transition duration</a> and
852 the new transition's <a>reversing shortening factor</a>,
853 </li>
854 <li>
855 <a>start value</a> is
856 the <a>current value</a> of the property
857 in the <a>running transition</a>,
858 </li>
859 <li>
860 <a>end value</a> is
861 the value of the property
862 in the <a>after-change style</a>,
863 </li>
864 </ul>
865 </li>
866 <li>
867 Otherwise, implementations must
868 <a>cancel</a> the <a>running transition</a>
869 and start a new transition whose:
870 <ul>
871 <li>
872 <a>start time</a> is
873 the time of the <a>style change event</a> plus
874 the <a>matching transition delay</a>,
875 </li>
876 <li>
877 <a>end time</a> is
878 the <a>start time</a> plus
879 the <a>matching transition duration</a>,
880 </li>
881 <li>
882 <a>start value</a> is
883 the <a>current value</a> of the property
884 in the <a>running transition</a>,
885 </li>
886 <li>
887 <a>end value</a> is
888 the value of the property
889 in the <a>after-change style</a>,
890 </li>
891 <li>
892 <a>reversing-adjusted start value</a> is the same as
893 the <a>start value</a>, and
894 <li>
895 <a>reversing shortening factor</a> is 1.
896 </li>
897 </ul>
898 </li>
899 </ol>
900 </li>
902 </ol>
904 <div class="note">
905 <p>
906 Note that the above rules mean that
907 when the computed value of an animatable property changes,
908 the transitions that start are based on the
909 values of the 'transition-property', 'transition-duration',
910 'transition-timing-function', and 'transition-delay' properties
911 at the time the animatable property would first have its new
912 computed value.
913 This means that when one of these 'transition-*' properties
914 changes at the same time as
915 a property whose change might transition,
916 it is the <em>new</em> values of the 'transition-*' properties
917 that control the transition.
918 </p>
919 <div class="example" id="manual-reversing-example">
920 <p style="display:none">
921 Example(s):
922 </p>
923 <p>This provides a way for authors to specify different values
924 of the 'transition-*' properties for the “forward”
925 and “reverse” transitions (but see <a
926 href="#reversing">below</a> for special reversing behavior when
927 an <em>incomplete</em> transition is interrupted). Authors can
928 specify the value of 'transition-duration',
929 'transition-timing-function', or 'transition-delay' in the same
930 rule where they specify the value that triggers the transition,
931 or can change these properties at the same time as they change
932 the property that triggers the transition. Since it's the new
933 values of these 'transition-*' properties that affect the
934 transition, these values will be used for the transitions
935 <em>to</em> the associated transitioning values. For example:
936 </p>
937 <pre>
938 li {
939 transition: background-color linear 1s;
940 background: blue;
941 }
942 li:hover {
943 background-color: green;
944 transition-duration: 2s; /* applies to the transition *to* the :hover state */
945 }</pre>
946 <p>
947 When a list item with these style rules enters the :hover
948 state, the computed 'transition-duration' at the time that
949 'background-color' would have its new value (''green'') is ''2s'',
950 so the transition from ''blue'' to ''green'' takes 2 seconds.
951 However, when the list item leaves the :hover state, the
952 transition from ''green'' to ''blue'' takes 1 second.
953 </p>
954 </div>
955 </div>
957 <p class="note">
958 Note that once the transition of a property has started
959 (including being in its delay phase),
960 it continues running based on
961 the original timing function, duration, and
962 delay, even if the 'transition-timing-function',
963 'transition-duration', or 'transition-delay' property changes
964 before the transition is complete. However, if the
965 'transition-property' property changes such that the transition
966 would not have started, the transition stops (and the
967 property immediately changes to its final value).
968 </p>
970 <p class="note">
971 Note that above rules mean that
972 transitions do not start when the computed
973 value of a property changes as a result of declarative animation
974 (as opposed to scripted animation).
975 This happens because the before-change style includes up-to-date
976 style for declarative animations.
977 </p>
979 <h3 id="reversing">
980 Faster reversing of interrupted transitions
981 </h3>
982 <div class="note">
984 <p>
985 Many common transitions effects involve transitions between two states,
986 such as the transition that occurs when the mouse pointer moves
987 over a user interface element, and then later moves out of that element.
988 With these effects, it is common for a running transition
989 to be interrupted before it completes,
990 and the property reset to the starting value of that transition.
991 An example is a hover effect on an element,
992 where a transition starts when the pointer enters the element,
993 and then the pointer exits the element before the effect has completed.
994 If the outgoing and incoming transitions
995 are executed using their specified durations and timing functions,
996 the resulting effect can be distractingly asymmetric
997 because the second transition
998 takes the full specified time to move a shortened distance.
999 Instead, this specification makes second transition shorter.
1000 </p>
1002 <p>
1003 The mechanism the above rules use to cause this involves the
1004 <a>reversing shortening factor</a> and the
1005 <a>reversing-adjusted start value</a>.
1006 In particular, the reversing behavior is present whenever
1007 the <a>reversing shortening factor</a> is less than 1.
1008 </p>
1010 <p class="note">
1011 Note that these rules do not fully address the problem for
1012 transition patterns that involve more than two states.
1013 </p>
1015 <p class="note">
1016 Note that these rules lead to the entire timing function of the
1017 new transition being used, rather than jumping into the middle
1018 of a timing function, which can create a jarring effect.
1019 </p>
1021 <p class="note">
1022 This was one of several possibilities that was considered by the
1023 working group. See the
1024 <a href="transition-reversing-demo">reversing demo</a>
1025 demonstrating a number of them, leading to a working group
1026 resolution made on 2013-06-07 and edits made on 2013-11-11.
1027 </p>
1029 </div>
1031 <h2 id="application">
1032 Application of transitions
1033 </h2>
1035 <p>
1036 When a property on an element is undergoing a transition
1037 (that is, when or after the transition has started and before the
1038 <a>end time</a> of the transition)
1039 the transition adds a style called the <dfn>current value</dfn>
1040 to the CSS cascade
1041 at the level defined for CSS Transitions in [[!CSS3CASCADE]].
1042 </p>
1044 <p class="note">
1045 Note that this means that computed values
1046 resulting from CSS transitions
1047 can inherit to descendants just like
1048 any other computed values.
1049 In the normal case, this means that
1050 a transition of an inherited property
1051 applies to descendant elements
1052 just as an author would expect.
1053 </p>
1055 <p>
1056 Implementations must add this value to the cascade
1057 if and only if
1058 that property is not currently
1059 undergoing a CSS Animation ([[!CSS3-ANIMATIONS]]) on the same element.
1060 </p>
1062 <p class="note">
1063 Note that this behavior of transitions not applying to the cascade
1064 when an animation on the same element and property is running
1065 does not affect whether the transition has started or ended.
1066 APIs that detect whether transitions are running
1067 (such as <a href="#transition-events">transition events</a>)
1068 still report that a transition is running.
1069 </p>
1071 <p>
1072 If the current time is at or before the
1073 <a>start time</a> of the transition
1074 (that is, during the delay phase of the transition),
1075 the <a>current value</a> is a specified style that will compute
1076 to the <a>start value</a> of the transition.
1077 </p>
1079 <p>
1080 If the current time is after the
1081 <a>start time</a> of the transition
1082 (that is, during the duration phase of the transition),
1083 the <a>current value</a> is a specified style that will compute
1084 to the <a href="#animatable-types">result of interpolating the property</a>
1085 using the <a>start value</a> of the transition as
1086 <var>V</var><sub>start</sub>,
1087 using the <a>end value</a> of the transition as
1088 <var>V</var><sub>end</sub>,
1089 and using (current time - start time) / (end time - start time)
1090 as the input to the timing function.
1091 </p>
1093 <h2 id="complete">Completion of transitions</h2>
1095 <p>
1096 <a>Running transitions</a>
1097 <dfn id="dfn-complete">complete</dfn>
1098 at a time that equal to or after their end time,
1099 but prior to to the first <a>style change event</a>
1100 whose time is equal to or after their <a>end time</a>.
1101 When a transition completes,
1102 implementations must move
1103 all transitions that complete at that time
1104 from the set of <a>running transitions</a>
1105 to the set of <a>completed transitions</a>
1106 and then fire the <a href="#transition-events">events</a>
1107 for those completions.
1108 <span class="note">(Note that doing otherwise, that is,
1109 firing some of the events before doing all of the moving
1110 from <a>running transitions</a> to <a>completed transitions</a>,
1111 could allow
1112 a style change event to happen
1113 without the necessary transitions completing,
1114 since firing the event could cause a style change event,
1115 if an event handler requests up-to-date computed style or
1116 layout data.)</span>
1117 </p>
1119 <h2 id="transition-events"><span id="transition-events-">
1120 Transition Events
1121 </span></h2>
1122 <p>
1123 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>.
1124 An event is fired for each property that undergoes a transition.
1125 This allows a content developer to perform actions that synchronize
1126 with the completion of a transition.
1127 </p>
1128 <p>
1129 Each event provides the name of the property the transition is
1130 associated with as well as the duration of the transition.
1131 </p>
1132 <dl>
1133 <dt>
1134 <b>Interface <dfn interface id="Events-TransitionEvent">TransitionEvent</dfn></b>
1135 </dt>
1136 <dd>
1137 <p>
1138 The {{TransitionEvent}} interface provides specific contextual information associated with transitions.
1139 </p>
1140 <dl>
1141 <dt>
1142 <b>IDL Definition</b>
1143 </dt>
1144 <dd>
1145 <div class='idl-code'>
1146 <pre class='idl'>
1147 [Constructor(DOMString type, optional TransitionEventInit transitionEventInitDict)]
1148 interface TransitionEvent : Event {
1149 readonly attribute DOMString propertyName;
1150 readonly attribute float elapsedTime;
1151 readonly attribute DOMString pseudoElement;
1152 };
1154 dictionary TransitionEventInit : EventInit {
1155 DOMString propertyName = "";
1156 float elapsedTime = 0.0;
1157 DOMString pseudoElement = "";
1158 };
1159 </pre>
1160 </div>
1161 </dd>
1162 <dt>
1163 <b>Attributes</b>
1164 </dt>
1165 <dd>
1166 <dl>
1167 <dt>
1168 <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-propertyName">propertyName</dfn></code> of type <code>DOMString</code>, readonly
1169 </dt>
1170 <dd>
1171 The name of the CSS property associated with the transition.
1172 </dd>
1173 </dl>
1174 <dl>
1175 <dt>
1176 <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-elapsedTime">elapsedTime</dfn></code> of type <code>float</code>, readonly
1177 </dt>
1178 <dd>
1179 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>.
1180 </dd>
1181 </dl>
1182 <dl>
1183 <dt>
1184 <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-pseudoElement">pseudoElement</dfn></code> of type <code>DOMString</code>, readonly
1185 </dt>
1186 <dd>
1187 The name (beginning with two colons) of the CSS
1188 pseudo-element on which the transition occurred (in
1189 which case the target of the event is that
1190 pseudo-element's corresponding element), or the empty
1191 string if the transition occurred on an element (which
1192 means the target of the event is that element).
1193 </dd>
1194 </dl>
1195 </dd>
1196 </dl>
1197 <p>
1198 <code id="TransitionEvent-constructor">TransitionEvent(type, transitionEventInitDict)</code>
1199 is an <a>event constructor</a>.
1200 </p>
1201 </dd>
1202 </dl>
1203 <p>
1204 There is one type of transition event available.
1205 </p>
1206 <dl>
1207 <dt>
1208 <b><dfn event for="Element" id="transitionend">transitionend</dfn></b>
1209 </dt>
1210 <dd>
1211 The {{transitionend}} event occurs at the completion of the transition. In the
1212 case where a transition is removed before completion, such as if the
1213 transition-property is removed, then the event will not fire.
1214 <ul>
1215 <li>Bubbles: Yes
1216 </li>
1217 <li>Cancelable: No
1218 </li>
1219 <li>Context Info: propertyName, elapsedTime, pseudoElement
1220 </li>
1221 </ul>
1222 </dd>
1223 </dl>
1225 <h2 id="animatable-types"><span id="animation-of-property-types-">
1226 Animation of property types
1227 </span></h2>
1229 <p>
1230 When interpolating between two values,
1231 <var>V</var><sub>start</sub> and <var>V</var><sub>end</sub>,
1232 interpolation is done using the output <var>p</var> of the timing function,
1233 which gives the portion of the value space
1234 that the interpolation has crossed.
1235 Thus the result of the interpolation is
1236 <var>V</var><sub>res</sub> =
1237 (1 - <var>p</var>) ⋅ <var>V</var><sub>start</sub> +
1238 <var>p</var> ⋅ <var>V</var><sub>end</sub>.
1239 </p>
1241 <p>
1242 However, if this value (<var>V</var><sub>res</sub>)
1243 is outside the allowed range of values for the property,
1244 then it is clamped to that range.
1245 This can occur if <var>p</var> is outside of the range 0 to 1,
1246 which can occur if a timing function is specified
1247 with a <var>y1</var> or <var>y2</var> that is outside the range 0 to 1.
1248 </p>
1250 <p>
1251 The following describes how each property type undergoes transition or
1252 animation.
1253 </p>
1255 <ul>
1256 <li id="animtype-color">
1257 <strong>color</strong>: interpolated via red, green, blue and alpha
1258 components (treating each as a number, see below).
1259 The interpolation is done between premultiplied colors
1260 (that is, colors for which the red, green, and blue components
1261 specified have been multiplied by the alpha).
1262 </li>
1263 <li id="animtype-length">
1264 <strong>length</strong>: interpolated as real numbers.
1265 </li>
1266 <li id="animtype-percentage">
1267 <strong>percentage</strong>: interpolated as real numbers.
1268 </li>
1269 <li id="animtype-lpcalc">
1270 <strong>length, percentage, or calc</strong>: when both values
1271 are lengths, interpolated as lengths; when both values are
1272 percentages, interpolated as percentages; otherwise, both
1273 values are converted into a ''calc()'' function that is the
1274 sum of a length and a percentage (each possibly zero), and
1275 these ''calc()'' functions have each half interpolated as real
1276 numbers.
1277 </li>
1278 <li id="animtype-integer">
1279 <strong>integer</strong>: interpolated via discrete steps (whole
1280 numbers). The interpolation happens in real number space and is
1281 converted to an integer by rounding to the nearest integer, with
1282 values halfway between a pair of integers rounded towards
1283 positive infinity.
1284 </li>
1285 <li id="animtype-font-weight">
1286 <strong>font weight</strong>: interpolated via discrete steps
1287 (multiples of 100). The interpolation happens in real number
1288 space and is converted to an integer by rounding to the
1289 nearest multiple of 100, with values halfway between multiples
1290 of 100 rounded towards positive infinity.
1291 </li>
1292 <li id="animtype-number">
1293 <strong>number</strong>: interpolated as real (floating point)
1294 numbers.
1295 </li>
1296 <li id="animtype-rect">
1297 <strong>rectangle</strong>: interpolated via the x, y,
1298 width and height components (treating each as a number).
1299 </li>
1300 <li id="animtype-visibility">
1301 <strong>visibility</strong>: if one of the values is
1302 ''visibility/visible'', interpolated as a discrete step where values of the
1303 timing function between 0 and 1 map to ''visibility/visible'' and other
1304 values of the timing function (which occur only at the
1305 start/end of the transition or as a result of ''cubic-bezier()''
1306 functions with Y values outside of [0, 1]) map to the closer
1307 endpoint; if neither value is ''visibility/visible'' then not interpolable.
1308 </li>
1309 <li id="animtype-shadow-list">
1310 <strong>shadow list</strong>: Each shadow in the list is
1311 interpolated via the
1312 color (as <a href="#animtype-color">color</a>) component,
1313 and x, y, blur, and (when appropriate) spread
1314 (as <a href="#animtype-length">length</a>) components.
1315 For each shadow, if both input shadows are ''shadow/inset''
1316 or both input shadows are not ''shadow/inset'',
1317 then the interpolated shadow must match the input shadows in that regard.
1318 If any pair of input shadows has one ''shadow/inset'' and the other not ''shadow/inset'',
1319 the entire <a href="#animtype-shadow-list">shadow-list</a> is uninterpolable.
1320 If the lists of shadows have different lengths,
1321 then the shorter list is padded at the end
1322 with shadows whose color is ''transparent'',
1323 all lengths are ''0'',
1324 and whose ''shadow/inset'' (or not) matches the longer list.
1325 </li>
1326 <li id="animtype-gradient">
1327 <strong>gradient</strong>: interpolated via the
1328 positions and colors of each stop. They must have the same type
1329 (radial or linear) and same number of stops in order to be animated.
1330 <span class="note">Note: [[CSS3-IMAGES]] may extend this
1331 definition.</span>
1332 </li>
1333 <li id="animtype-paintserver">
1334 <strong>paint server</strong> (SVG): interpolation is only supported
1335 between: gradient to gradient and color to color. They then
1336 work as above.
1337 </li>
1338 <li id="animtype-simple-list">
1339 <strong>simple list</strong> of other types:
1340 If the lists have the same number of items,
1341 and each pair of values can be interpolated,
1342 each item in the list is interpolated using
1343 the rules given for those types.
1344 Otherwise the values are not interpolable.
1345 </li>
1346 <li id="animtype-repeatable-list">
1347 <strong>repeatable list</strong> of other types:
1348 The result list has a length that is the least common multiple
1349 of the lengths of the input lists.
1350 Each item in the result is the interpolation of the value
1351 from each input list repeated to the length of the result list.
1352 If a pair of values cannot be interpolated, then the lists
1353 are not interpolable.
1354 <span class="note">
1355 The repeatable list concept ensures that a list that is
1356 conceptually repeated to a certain length (as
1357 'background-origin' is repeated to the length of the
1358 'background-image' list) or repeated infinitely will
1359 smoothly transition between any values, and so that the
1360 computed value will properly represent the result (and
1361 potentially be inherited correctly).
1362 </span>
1363 </li>
1364 </ul>
1366 <p>Future specifications may define additional types that can
1367 be animated.</p>
1369 <p>See the definition of 'transition-property' for how animation
1370 of shorthand properties and the ''all'' value is applied to any
1371 properties (in the shorthand) that can be animated.</p>
1373 <h2 id="animatable-properties"><span id="animatable-properties-">
1374 Animatable properties
1375 </span></h2>
1377 <!--
1378 As resolved in
1379 http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html
1380 -->
1382 <p>The definition of each CSS property defines
1383 when the values of that property can be interpolated
1384 by referring to the definitions of property types
1385 in the <a href="#animatable-types">previous section</a>.
1386 Values are animatable when
1387 both the from and the to values of the property have the type described.
1388 (When a composite type such as "length, percentage, or calc" is listed,
1389 this means that both values must fit into that composite type.)
1390 When multiple types are listed in the form "either A or B",
1391 both values must be of the same type to be interpolable.</p>
1393 <p>For properties that exist at the time this specification was
1394 developed, this specification defines whether and how they are
1395 animated. However, future CSS specifications may define
1396 additional properties, additional values for existing properties,
1397 or additional animation behavior of existing values. In order to
1398 describe new animation behaviors and to have the definition of
1399 animation behavior in a more appropriate location, future CSS
1400 specifications should include an "Animatable:" line in the summary
1401 of the property's definition (in addition to the other lines
1402 described in [[CSS21]], <a
1403 href="http://www.w3.org/TR/CSS21/about.html#property-defs">section
1404 1.4.2</a>). This line should say "no" to indicate that a property
1405 cannot be animated or should reference an animation behavior
1406 (which may be one of the behaviors in the <a
1407 href="#animation-of-property-types-">Animation of property
1408 types</a> section above, or may be a new behavior) to define how
1409 the property animates. Such definitions override those given in
1410 this specification.</p>
1412 <h3 id="animatable-css"><span id="properties-from-css-">
1413 Properties from CSS
1414 </span></h3>
1416 <p>
1417 The following definitions define the animation behavior for
1418 properties in CSS Level 2 Revision 1 ([[CSS21]]) and in Level 3 of
1419 the CSS Color Module ([[CSS3COLOR]]).
1420 </p>
1422 <table class="animatable-properties">
1423 <tr>
1424 <th>Property Name</th>
1425 <th>Type</th>
1426 </tr>
1427 <tr>
1428 <td>'background-color'</td><td>as <a href="#animtype-color">color</a></tr>
1429 <tr>
1430 <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>
1431 </tr>
1432 <tr>
1433 <td>'border-bottom-color'</td><td>as <a href="#animtype-color">color</a></td>
1434 </tr>
1435 <tr>
1436 <td>'border-bottom-width'</td><td>as <a href="#animtype-length">length</a></td>
1437 </tr>
1438 <tr>
1439 <td>'border-left-color'</td><td>as <a href="#animtype-color">color</a></td>
1440 </tr>
1441 <tr>
1442 <td>'border-left-width'</td><td>as <a href="#animtype-length">length</a></td>
1443 </tr>
1444 <tr>
1445 <td>'border-right-color'</td><td>as <a href="#animtype-color">color</a></td>
1446 </tr>
1447 <tr>
1448 <td>'border-right-width'</td><td>as <a href="#animtype-length">length</a></td>
1449 </tr>
1450 <tr>
1451 <td>'border-spacing'</td><td>as <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-length">length</a></td>
1452 </tr>
1453 <tr>
1454 <td>'border-top-color'</td><td>as <a href="#animtype-color">color</a></td>
1455 </tr>
1456 <tr>
1457 <td>'border-top-width'</td><td>as <a href="#animtype-length">length</a></td>
1458 </tr>
1459 <tr>
1460 <td>'bottom'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1461 </tr>
1462 <tr>
1463 <td>'clip'</td><td>as <a href="#animtype-rect">rectangle</a></td>
1464 </tr>
1465 <tr>
1466 <td>'color'</td><td>as <a href="#animtype-color">color</a></td>
1467 </tr>
1468 <tr>
1469 <td>'font-size'</td><td>as <a href="#animtype-length">length</a></td>
1470 </tr>
1471 <tr>
1472 <td>'font-weight!!property'</td><td>as <a href="#animtype-font-weight">font weight</a></td>
1473 </tr>
1474 <tr>
1475 <td>'height'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1476 </tr>
1477 <tr>
1478 <td>'left'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1479 </tr>
1480 <tr>
1481 <td>'letter-spacing'</td><td>as <a href="#animtype-length">length</a></td>
1482 </tr>
1483 <tr>
1484 <td>'line-height'</td><td>as either <a href="#animtype-number">number</a> or <a href="#animtype-length">length</a></td>
1485 </tr>
1486 <tr>
1487 <td>'margin-bottom'</td><td>as <a href="#animtype-length">length</a></td>
1488 </tr>
1489 <tr>
1490 <td>'margin-left'</td><td>as <a href="#animtype-length">length</a></td>
1491 </tr>
1492 <tr>
1493 <td>'margin-right'</td><td>as <a href="#animtype-length">length</a></td>
1494 </tr>
1495 <tr>
1496 <td>'margin-top'</td><td>as <a href="#animtype-length">length</a></td>
1497 </tr>
1498 <tr>
1499 <td>'max-height'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1500 </tr>
1501 <tr>
1502 <td>'max-width'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1503 </tr>
1504 <tr>
1505 <td>'min-height'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1506 </tr>
1507 <tr>
1508 <td>'min-width'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1509 </tr>
1510 <tr>
1511 <td>'opacity'</td><td>as <a href="#animtype-number">number</a></td>
1512 </tr>
1513 <tr>
1514 <td>'outline-color'</td><td>as <a href="#animtype-color">color</a></td>
1515 </tr>
1516 <tr>
1517 <td>'outline-width'</td><td>as <a href="#animtype-length">length</a></td>
1518 </tr>
1519 <tr>
1520 <td>'padding-bottom'</td><td>as <a href="#animtype-length">length</a></td>
1521 </tr>
1522 <tr>
1523 <td>'padding-left'</td><td>as <a href="#animtype-length">length</a></td>
1524 </tr>
1525 <tr>
1526 <td>'padding-right'</td><td>as <a href="#animtype-length">length</a></td>
1527 </tr>
1528 <tr>
1529 <td>'padding-top'</td><td>as <a href="#animtype-length">length</a></td>
1530 </tr>
1531 <tr>
1532 <td>'right'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1533 </tr>
1534 <tr>
1535 <td>'text-indent'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1536 </tr>
1537 <tr>
1538 <td>'text-shadow'</td><td>as <a href="#animtype-shadow-list">shadow list</a></td>
1539 </tr>
1540 <tr>
1541 <td>'top'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1542 </tr>
1543 <tr>
1544 <td>'vertical-align'</td><td>as <a href="#animtype-length">length</a></td>
1545 </tr>
1546 <tr>
1547 <td>'visibility'</td><td>as <a href="#animtype-visibility">visibility</a></td>
1548 </tr>
1549 <tr>
1550 <td>'width'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1551 </tr>
1552 <tr>
1553 <td>'word-spacing'</td><td>as <a href="#animtype-length">length</a></td>
1554 </tr>
1555 <tr>
1556 <td>'z-index'</td><td>as <a href="#animtype-integer">integer</a></td>
1557 </tr>
1558 </table>
1560 <h3 id="animatable-svg"><span id="properties-from-svg-">
1561 Properties from SVG
1562 </span></h3>
1564 <p>
1565 All properties defined as animatable in the SVG specification, provided
1566 they are one of the property types listed above.
1567 </p>
1569 <!-- <table>
1570 <tr>
1571 <th>Property Name</th><th>Type</th>
1572 </tr>
1573 <tr>
1574 <td>stop-color</td><td>as <a href="#animtype-color">color</a></td>
1575 </tr>
1576 <tr>
1577 <td>stop-opacity</td><td>as <a href="#animtype-number">number</a></td>
1578 </tr>
1579 <tr>
1580 <td>fill</td><td>as <a href="#animtype-paintserver">paint server</a></td>
1581 </tr>
1582 <tr>
1583 <td>fill-opacity</td><td>as <a href="#animtype-number">number</a></td>
1584 </tr>
1585 <tr>
1586 <td>stroke</td><td>as <a href="#animtype-paintserver">paint server</a></td>
1587 </tr>
1588 <tr>
1589 <td>stroke-dasharray</td><td>as <a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-number">number</a></td>
1590 </tr>
1591 <tr>
1592 <td>stroke-dashoffset</td><td>as <a href="#animtype-number">number</a></td>
1593 </tr>
1594 <tr>
1595 <td>stroke-miterlimit</td><td>as <a href="#animtype-number">number</a></td>
1596 </tr>
1597 <tr>
1598 <td>stroke-opacity</td><td>as <a href="#animtype-number">number</a></td>
1599 </tr>
1600 <tr>
1601 <td>stroke-width</td><td>as <a href="#animtype-number">number</a></td>
1602 </tr>
1603 <tr>
1604 <td>viewport-fill</td><td>as <a href="#animtype-color">color</a></td>
1605 </tr>
1606 <tr>
1607 <td>viewport-fill-opacity</td><td>as <a href="#animtype-color">color</a></td>
1608 </tr>
1609 </table> -->
1611 <h2 id="changes">Changes since Working Draft of 19 November 2013</h2>
1613 <p>The following are the substantive changes made since the
1614 <a href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/">Working Draft
1615 dated 19 November 2013</a>:</p>
1617 <ul>
1618 <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>
1619 <li>Completion of transitions is defined somewhat more precisely.</li>
1620 <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>
1621 <li>The interpolation of ''shadow/inset'' values on shadow lists is no longer backwards.</li>
1622 <li>A [[#conformance]] section and [[#idl-index]] have been added</li>
1623 <li>The identifiers accepted by 'transition-property' are defined in terms of <<custom-ident>>.</li>
1624 <li>Define a little bit more about when changes to computed values happen, by saying at least that implementations must not update the effects of computed values without actually updating computed values.</li>
1625 </ul>
1627 <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>
1629 <p>For changes in earlier working drafts:</p>
1631 <ol>
1632 <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>
1633 <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
1634 <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>.
1635 </ol>
1637 <h2 id="acknowledgments">Acknowledgments</h2>
1639 <p>Thanks especially to the feedback from
1640 Tab Atkins,
1641 Carine Bournez,
1642 Aryeh Gregor,
1643 Vincent Hardy,
1644 Anne van Kesteren,
1645 Cameron McCormack,
1646 Alex Mogilevsky,
1647 Jasper St. Pierre,
1648 Estelle Weyl,
1649 and all the rest of the
1650 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.</p>