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