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