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