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