Thu, 05 Sep 2013 17:43:19 -0700
added test annotations & test suite links
1 <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
2 'http://www.w3.org/TR/html4/strict.dtd'>
4 <html lang="en">
5 <head>
6 <title>CSS Transitions</title>
7 <script src='http://test.csswg.org/harness/annotate.js#css-transitions-1_dev' type='text/javascript' defer></script>
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
9 <link rel="stylesheet" type="text/css" href="../default.css">
10 <style type="text/css">
11 table.animatable-properties {
12 border-collapse: collapse;
13 }
14 table.animatable-properties td {
15 padding: 0.2em 1em;
16 border: 1px solid black;
17 }
18 div.prod { margin: 1em 2em; }
19 </style>
20 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
21 </head>
23 <body>
25 <div class="head">
26 <!--logo-->
28 <h1>CSS Transitions</h1>
30 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
31 <dl>
32 <dt>This version:
33 <dd>
34 <a href="[VERSION]">[VERSION]</a>
35 <dt>Latest version:
36 <dd><a href="http://www.w3.org/TR/css3-transitions/">
37 [LATEST]</a>
38 <dt>Editor's draft:
39 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
40 (<a href="https://dvcs.w3.org/hg/csswg/log/tip/css-transitions/Overview.src.html">change log</a>,
41 <a href="https://dvcs.w3.org/hg/csswg/log/tip/css3-transitions/Overview.src.html">older change log</a>)
42 <dt>Previous version:
43 <dd><a href="http://www.w3.org/TR/2013/WD-css3-transitions-20130212/">http://www.w3.org/TR/2013/WD-css3-transitions-20130212/</a>
44 <dt id="editors-list">Editors:
45 <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a
46 href="http://www.apple.com/">Apple Inc</a>)
47 <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a
48 href="http://www.apple.com/">Apple Inc</a>)
49 <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a
50 href="http://www.apple.com/">Apple Inc</a>)
51 <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a> (<a
52 class=org href="http://www.mozilla.org/">Mozilla</a>)
54 <dt>Issues list:
55 <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transitions&resolution=---&cmdtype=doit">in Bugzilla</a>
57 <dt>Feedback:
58 <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-transitions%5D%20feedback">www-style@w3.org</a>
59 with subject line “<kbd>[css-transitions] <var>… message topic …</var></kbd>”
60 (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/">archives</a>)
62 <dt>Test suite:
63 <dd> <a href="http://test.csswg.org/suites/css-transitions-1/nightly-unstable/">http://test.csswg.org/suites/css-transitions-1/nightly-unstable/</a>
64 </dl>
66 <!--copyright-->
68 <hr title="Separator for header">
69 </div>
71 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
73 <p>CSS Transitions allows property changes in CSS values to occur smoothly
74 over a specified duration.
76 <h2 class="no-num no-toc" id="status">Status of this document</h2>
77 <!--status-->
79 <p>
80 The <a href="ChangeLog">list of changes made to this specification</a> is
81 available.
82 </p>
84 <h2 class="no-num no-toc" id="contents">Table of Contents</h2>
85 <!--toc-->
88 <h2 id="introduction">Introduction</h2>
90 <p><em>This section is not normative.</em>
91 <p>
92 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.
93 </p>
95 <h2 id="transitions"><a id="transitions-">Transitions</a></h2>
96 <p>
97 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.
98 </p>
99 <p>
100 For example, suppose that transitions of one second have been defined on the 'left' and
101 '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.
102 </p>
103 <div class="figure">
104 <img src="transition1.png" alt="">
105 </div>
106 <p class="caption">
107 Transitions of 'left' and 'background-color'
108 </p>
109 <p>
110 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.
111 </p>
112 <p>
113 Only animatable CSS properties can be transitioned. See the table at the end of this document for a list
114 of properties that are animatable.
115 </p>
116 <p>
117 The transition for a property is defined using a number of new properties. For example:
118 </p>
119 <div class="example">
120 <p style="display:none">
121 Example(s):
122 </p>
123 <pre>
124 div {
125 transition-property: opacity;
126 transition-duration: 2s;
127 }
128 </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.
129 </div>
130 <p>
131 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:
132 </p>
133 <div class="example">
134 <p style="display:none">
135 Example(s):
136 </p>
137 <pre>
138 div {
139 transition-property: opacity, left;
140 transition-duration: 2s, 4s;
141 }
143 </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.
144 </div>
146 <p id="list-matching">
147 In the case where the lists of values in transition properties
148 do not have the same length, the length of the
149 'transition-property' list determines the number of items in
150 each list examined when starting transitions. The lists are
151 matched up from the first value: excess values at the end are
152 not used. If one of the other properties doesn't have enough
153 comma-separated values to match the number of values of
154 'transition-property', the UA must calculate its used value by
155 repeating the list of values until there are enough. This
156 truncation or repetition does not affect the computed value.
157 <span class="note">
158 Note: This is analogous to the behavior of the 'background-*'
159 properties, with 'background-image' analogous to
160 'transition-property'.
161 </span>
162 </p>
164 <div class="example">
165 <p style="display:none">
166 Example(s):
167 </p>
168 <pre>
169 div {
170 transition-property: opacity, left, top, width;
171 transition-duration: 2s, 1s;
172 }
173 </pre>The above example defines a transition on the 'opacity' property of 2 seconds duration, a
174 transition on the 'left' property of 1
175 second duration, a transition on the 'top' property of 2 seconds duration and a
176 transition on the 'width' property of 1
177 second duration.
179 </div>
181 <p>
182 While authors can use transitions to create dynamically changing content,
183 dynamically changing content can lead to seizures in some users.
184 For information on how to avoid content that can lead to seizures, see
185 <a href="http://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3:
186 Seizures:
187 Do not design content in a way that is known to cause seizures</a>
188 ([[WCAG20]]).
189 </p>
191 <!-- ======================================================================================================= -->
192 <h3 id="transition-property-property"><a id="the-transition-property-property-">
193 The 'transition-property' Property
194 </a></h3>
195 <p>
196 The 'transition-property' property specifies the name of the CSS property to which the transition is applied.
197 </p>
198 <table class="propdef">
199 <tbody>
200 <tr>
201 <td>
202 <em>Name:</em>
203 </td>
204 <td>
205 <dfn id="transition-property">transition-property</dfn>
206 </td>
207 </tr>
208 <tr>
209 <td>
210 <em>Value:</em>
211 </td>
212 <td>
213 none | <span><single-transition-property></span> [ ',' <span><single-transition-property></span> ]*
214 </td>
215 </tr>
216 <tr>
217 <td>
218 <em>Initial:</em>
219 </td>
220 <td>
221 all
222 </td>
223 </tr>
224 <tr>
225 <td>
226 <em>Applies to:</em>
227 </td>
228 <td>
229 all elements, :before and :after pseudo elements
230 </td>
231 </tr>
232 <tr>
233 <td>
234 <em>Inherited:</em>
235 </td>
236 <td>
237 no
238 </td>
239 </tr>
240 <tr>
241 <td>
242 <em>Animatable:</em>
243 </td>
244 <td>
245 no
246 </td>
247 </tr>
248 <tr>
249 <td>
250 <em>Percentages:</em>
251 </td>
252 <td>
253 N/A
254 </td>
255 </tr>
256 <tr>
257 <td>
258 <em>Media:</em>
259 </td>
260 <td>
261 visual
262 </td>
263 </tr>
264 <tr>
265 <td>
266 <em>Computed value:</em>
267 </td>
268 <td>
269 Same as specified value.
270 </td>
271 </tr>
272 <tr>
273 <td>
274 <em>Canonical order:</em>
275 </td>
276 <td>
277 <abbr title="follows order of property value definition">per grammar</abbr>
278 </td>
279 </tr>
280 </tbody>
281 </table>
283 <div class="prod">
284 <dfn id="single-transition-property"><single-transition-property></dfn> = all | <IDENT>
285 </div>
287 <p>
288 A value of ''none'' means that no property will transition.
289 Otherwise, a list of properties to be transitioned, or the
290 keyword ''all'' which indicates that all properties are to be
291 transitioned, is given.
292 </p>
294 <p>
295 If one of the identifiers listed is not a recognized property
296 name or is not an animatable property, the implementation must
297 still start transitions on the animatable properties in the
298 list using the duration, delay, and timing function at their
299 respective indices in the lists for 'transition-duration',
300 'transition-delay', and 'transition-timing-function'. In other
301 words, unrecognized or non-animatable properties must be kept in
302 the list to preserve the matching of indices.
303 </p>
305 <p>
306 The keywords ''none'', ''inherit'', and ''initial'' are not
307 permitted as items within a list of more that one identifier;
308 any list that uses them is syntactically invalid.
309 In other words, the <IDENT> production in
310 <span><single-transition-property></span> matches any
311 identifier other than these three keywords.
312 </p>
314 <p>
315 For the keyword ''all'', or if one of the identifiers listed is a
316 shorthand property, implementations must start transitions for
317 any of its longhand sub-properties that are animatable (or, for
318 ''all'', all animatable properties), using the duration, delay,
319 and timing function at the index corresponding to the shorthand.
320 </p>
321 <p>
322 If a property is specified multiple times in the value of
323 'transition-property' (either on its own, via a shorthand that
324 contains it, or via the ''all'' value), then the transition that
325 starts uses the duration, delay, and timing function at the
326 index corresponding to the <em>last</em> item in the value of
327 'transition-property' that calls for animating that property.
328 </p>
329 <p class="note">
330 Note: The ''all'' value and 'all' shorthand
331 property work in similar ways, so the
332 ''all'' value is just like a shorthand that
333 covers all properties.
334 </p>
336 <!-- ======================================================================================================= -->
337 <h3 id="transition-duration-property"><a id="the-transition-duration-property-">
338 The 'transition-duration' Property
339 </a></h3>
340 <p>
341 The 'transition-duration' property defines the length of time that a transition takes.
342 </p>
343 <table class="propdef">
344 <tbody>
345 <tr>
346 <td>
347 <em>Name:</em>
348 </td>
349 <td>
350 <dfn id="transition-duration">transition-duration</dfn>
351 </td>
352 </tr>
353 <tr>
354 <td>
355 <em>Value:</em>
356 </td>
357 <td>
358 <span><time></span> [, <span><time></span>]*
359 </td>
360 </tr>
361 <tr>
362 <td>
363 <em>Initial:</em>
364 </td>
365 <td>
366 0s
367 </td>
368 </tr>
369 <tr>
370 <td>
371 <em>Applies to:</em>
372 </td>
373 <td>
374 all elements, :before and :after pseudo elements
375 </td>
376 </tr>
377 <tr>
378 <td>
379 <em>Inherited:</em>
380 </td>
381 <td>
382 no
383 </td>
384 </tr>
385 <tr>
386 <td>
387 <em>Animatable:</em>
388 </td>
389 <td>
390 no
391 </td>
392 </tr>
393 <tr>
394 <td>
395 <em>Percentages:</em>
396 </td>
397 <td>
398 N/A
399 </td>
400 </tr>
401 <tr>
402 <td>
403 <em>Media:</em>
404 </td>
405 <td>
406 interactive
407 </td>
408 </tr>
409 <tr>
410 <td>
411 <em>Computed value:</em>
412 </td>
413 <td>
414 Same as specified value.
415 </td>
416 </tr>
417 <tr>
418 <td>
419 <em>Canonical order:</em>
420 </td>
421 <td>
422 <abbr title="follows order of property value definition">per grammar</abbr>
423 </td>
424 </tr>
425 </tbody>
426 </table>
427 <p>
428 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.
429 </p>
431 <!-- =======================================================================================================
432 -->
434 <h3 id="transition-timing-function-property"><a id="transition-timing-function_tag">
435 The 'transition-timing-function' Property
436 </a></h3>
437 <p>
438 The 'transition-timing-function' property
439 describes how the intermediate values used during a transition will be
440 calculated. It allows for a transition to change speed over its
441 duration. These effects are commonly called <em>easing</em> functions.
442 In either case, a mathematical function that provides a smooth curve is
443 used.
444 </p>
445 <p>
446 Timing functions are either defined as a stepping function or
447 a <a
448 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
449 Bézier curve</a>.
450 The timing function takes as its input
451 the current elapsed percentage of the transition duration
452 and outputs the percentage of the way the transition is
453 from its start value to its end value.
454 How this output is used is defined by
455 the <a href="#animatable-types">interpolation rules</a>
456 for the value type.
457 </p>
458 <p>
459 A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
460 function is defined by a number that divides the domain of operation
461 into equally sized intervals. Each subsequent interval is a equal step
462 closer to the goal state. The function also specifies whether the
463 change in output percentage happens at the start or end of the
464 interval (in other words, if 0% on the input percentage is the point
465 of initial change).
466 </p>
467 <div class="figure">
468 <img src="step.png" alt="The step timing function splits
469 the function domain into a number of disjoint straight line
470 segments. steps(1, start) is a function whose
471 output value is 1 for all input values. steps(1, end) is a function whose
472 output value is 0 for all input values less than 1, and output
473 is 1 for the input value of 1. steps(3, start) is a function that
474 divides the input domain into three segments, each 1/3 in length,
475 and 1/3 above the previous segment, with the first segment starting
476 at 1/3. steps(3, end) is a function that
477 divides the input domain into three segments, each 1/3 in length,
478 and 1/3 above the previous segment, with the first segment starting
479 at 0.">
480 </div>
481 <p class="caption">
482 Step timing functions
483 </p>
484 <p>
485 A <a
486 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
487 Bézier curve</a> is defined by four control points, P<sub>0</sub>
488 through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub>
489 are always set to (0,0) and (1,1). The 'transition-timing-function' property is used
490 to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These
491 can be set to preset values using the keywords listed below, or can be
492 set to specific values using the ''cubic-bezier'' function.
493 In the ''cubic-bezier'' function, P<sub>1</sub> and
494 P<sub>2</sub> are each specified by both an X and Y value.
495 </p>
496 <div class="figure">
497 <img src="TimingFunction.png" alt="The Bézier timing function is a
498 smooth curve from point P0 = (0,0) to point P3 = (1,1). The
499 length and orientation of the line segment P0-P1 determines
500 the tangent and the curvature of the curve at P0 and the
501 line segment P2-P3 does the same at P3.">
502 </div>
503 <p class="caption">
504 Bézier Timing Function Control Points
505 </p>
506 <table class="propdef">
507 <tbody>
508 <tr>
509 <td>
510 <em>Name:</em>
511 </td>
512 <td>
513 <dfn id="transition-timing-function">transition-timing-function</dfn>
514 </td>
515 </tr>
516 <tr>
517 <td>
518 <em>Value:</em>
519 </td>
520 <td>
521 <span><single-transition-timing-function></span> [ ',' <span><single-transition-timing-function></span> ]*
522 </td>
523 </tr>
524 <tr>
525 <td>
526 <em>Initial:</em>
527 </td>
528 <td>
529 ease
530 </td>
531 </tr>
532 <tr>
533 <td>
534 <em>Applies to:</em>
535 </td>
536 <td>
537 all elements, :before and :after pseudo elements
538 </td>
539 </tr>
540 <tr>
541 <td>
542 <em>Inherited:</em>
543 </td>
544 <td>
545 no
546 </td>
547 </tr>
548 <tr>
549 <td>
550 <em>Animatable:</em>
551 </td>
552 <td>
553 no
554 </td>
555 </tr>
556 <tr>
557 <td>
558 <em>Percentages:</em>
559 </td>
560 <td>
561 N/A
562 </td>
563 </tr>
564 <tr>
565 <td>
566 <em>Media:</em>
567 </td>
568 <td>
569 interactive
570 </td>
571 </tr>
572 <tr>
573 <td>
574 <em>Computed value:</em>
575 </td>
576 <td>
577 Same as specified value.
578 </td>
579 </tr>
580 <tr>
581 <td>
582 <em>Canonical order:</em>
583 </td>
584 <td>
585 <abbr title="follows order of property value definition">per grammar</abbr>
586 </td>
587 </tr>
588 </tbody>
589 </table>
590 <div class="prod">
591 <dfn id="single-transition-timing-function"><single-transition-timing-function></dfn> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
592 </div>
593 <p>
594 The timing functions have the following definitions.
595 </p>
596 <dl>
597 <dt>
598 ease
599 </dt>
600 <dd>
601 The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
602 </dd>
603 <dt>
604 linear
605 </dt>
606 <dd>
607 The linear function is equivalent to cubic-bezier(0, 0, 1, 1).
608 </dd>
609 <dt>
610 ease-in
611 </dt>
612 <dd>
613 The ease-in function is equivalent to cubic-bezier(0.42, 0, 1, 1).
614 </dd>
615 <dt>
616 ease-out
617 </dt>
618 <dd>
619 The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1).
620 </dd>
621 <dt>
622 ease-in-out
623 </dt>
624 <dd>
625 The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1)
626 </dd>
627 <dt>
628 step-start
629 </dt>
630 <dd>
631 The step-start function is equivalent to steps(1, start).
632 </dd>
633 <dt>
634 step-end
635 </dt>
636 <dd>
637 The step-end function is equivalent to steps(1, end).
638 </dd>
639 <dt>
640 steps(<integer>[, [ start | end ] ]?)
641 </dt>
642 <dd>
643 Specifies a stepping function, described above, taking two
644 parameters. The first parameter specifies the number of intervals
645 in the function. It must be a positive integer (greater than 0).
646 The second parameter, which is optional, is
647 either the value ''start'' or ''end'', and specifies the point
648 at which the change of values occur within the interval.
649 If the second parameter is omitted, it is given the value 'end'.
650 </dd>
651 <dt>
652 cubic-bezier(<number>, <number>, <number>, <number>)
653 </dt>
654 <dd>
655 Specifies a <a
656 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier
657 curve</a>. The four values specify points P<sub>1</sub> and
658 P<sub>2</sub> of the curve as (x1, y1, x2, y2). Both x values must be
659 in the range [0, 1] or the definition is invalid. The y values can
660 exceed this range.
661 </dd>
662 </dl><!-- ======================================================================================================= -->
663 <h3 id="transition-delay-property"><a id="the-transition-delay-property-">
664 The 'transition-delay' Property
665 </a></h3>
666 <p>
667 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.
668 </p>
669 <p>
670 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.
671 </p>
672 <table class="propdef">
673 <tbody>
674 <tr>
675 <td>
676 <em>Name:</em>
677 </td>
678 <td>
679 <dfn id="transition-delay">transition-delay</dfn>
680 </td>
681 </tr>
682 <tr>
683 <td>
684 <em>Value:</em>
685 </td>
686 <td>
687 <span><time></span> [, <span><time></span>]*
688 </td>
689 </tr>
690 <tr>
691 <td>
692 <em>Initial:</em>
693 </td>
694 <td>
695 0s
696 </td>
697 </tr>
698 <tr>
699 <td>
700 <em>Applies to:</em>
701 </td>
702 <td>
703 all elements, :before and :after pseudo elements
704 </td>
705 </tr>
706 <tr>
707 <td>
708 <em>Inherited:</em>
709 </td>
710 <td>
711 no
712 </td>
713 </tr>
714 <tr>
715 <td>
716 <em>Animatable:</em>
717 </td>
718 <td>
719 no
720 </td>
721 </tr>
722 <tr>
723 <td>
724 <em>Percentages:</em>
725 </td>
726 <td>
727 N/A
728 </td>
729 </tr>
730 <tr>
731 <td>
732 <em>Media:</em>
733 </td>
734 <td>
735 interactive
736 </td>
737 </tr>
738 <tr>
739 <td>
740 <em>Computed value:</em>
741 </td>
742 <td>
743 Same as specified value.
744 </td>
745 </tr>
746 <tr>
747 <td>
748 <em>Canonical order:</em>
749 </td>
750 <td>
751 <abbr title="follows order of property value definition">per grammar</abbr>
752 </td>
753 </tr>
754 </tbody>
755 </table><!-- ======================================================================================================= -->
756 <h3 id="transition-shorthand-property"><a id="the-transition-shorthand-property-">
757 The 'transition' Shorthand Property
758 </a></h3>
759 <p>
760 The 'transition' shorthand property combines the four properties described above into a single property.
761 </p>
762 <table class="propdef">
763 <tbody>
764 <tr>
765 <td>
766 <em>Name:</em>
767 </td>
768 <td>
769 <dfn id="transition">transition</dfn>
770 </td>
771 </tr>
772 <tr>
773 <td>
774 <em>Value:</em>
775 </td>
776 <td>
777 <span><single-transition></span> [ ',' <span><single-transition></span> ]*
778 </td>
779 </tr>
780 <tr>
781 <td>
782 <em>Initial:</em>
783 </td>
784 <td>
785 see individual properties
786 </td>
787 </tr>
788 <tr>
789 <td>
790 <em>Applies to:</em>
791 </td>
792 <td>
793 all elements, :before and :after pseudo elements
794 </td>
795 </tr>
796 <tr>
797 <td>
798 <em>Inherited:</em>
799 </td>
800 <td>
801 no
802 </td>
803 </tr>
804 <tr>
805 <td>
806 <em>Animatable:</em>
807 </td>
808 <td>
809 no
810 </td>
811 </tr>
812 <tr>
813 <td>
814 <em>Percentages:</em>
815 </td>
816 <td>
817 N/A
818 </td>
819 </tr>
820 <tr>
821 <td>
822 <em>Media:</em>
823 </td>
824 <td>
825 interactive
826 </td>
827 </tr>
828 <tr>
829 <td>
830 <em>Computed value:</em>
831 </td>
832 <td>
833 see individual properties
834 </td>
835 </tr>
836 <tr>
837 <td>
838 <em>Canonical order:</em>
839 </td>
840 <td>
841 <abbr title="follows order of property value definition">per grammar</abbr>
842 </td>
843 </tr>
844 </tbody>
845 </table>
847 <div class="prod">
848 <dfn id="single-transition"><single-transition></dfn> = [ none | <span><single-transition-property></span> ] || <span><time></span> || <span><single-transition-timing-function></span> || <span><time></span>
849 </div>
851 <p>
852 Note that order is important within the items in this property:
853 the first value that can be parsed as a time is assigned to the
854 transition-duration,
855 and the second value that can be parsed as a time is assigned to
856 transition-delay.
857 </p>
859 <p>
860 If there is more than one <span><single-transition></span> in the shorthand,
861 and any of the transitions has
862 ''none'' as the <span><single-transition-property></span>,
863 then the declaration is invalid.
864 </p>
866 <h2 id="starting">
867 Starting of transitions
868 </h2>
870 <p>
871 When the computed value of an animatable property changes,
872 implementations must decide what transitions to start based on
873 the values of the 'transition-property', 'transition-duration',
874 'transition-timing-function', and 'transition-delay' properties
875 at the time the animatable property would first have its new
876 computed value.
877 This means that when one of these 'transition-*' properties
878 changes at the same time as
879 a property whose change might transition,
880 it is the <em>new</em> values of the 'transition-*' properties
881 that control the transition.
882 </p>
883 <div class="example" id="manual-reversing-example">
884 <p style="display:none">
885 Example(s):
886 </p>
887 <p>This provides a way for authors to specify different values
888 of the 'transition-*' properties for the “forward”
889 and “reverse” transitions (but see <a
890 href="#reversing">below</a> for special reversing behavior when
891 an <em>incomplete</em> transition is interrupted). Authors can
892 specify the value of 'transition-duration',
893 'transition-timing-function', or 'transition-delay' in the same
894 rule where they specify the value that triggers the transition,
895 or can change these properties at the same time as they change
896 the property that triggers the transition. Since it's the new
897 values of these 'transition-*' properties that affect the
898 transition, these values will be used for the transitions
899 <em>to</em> the associated transitioning values. For example:
900 </p>
901 <pre>li {
902 transition: background-color linear 1s;
903 background: blue;
904 }
905 li:hover {
906 background-color: green;
907 transition-duration: 2s; /* applies to the transition *to* the :hover state */
908 }</pre>
909 <p>
910 When a list item with these style rules enters the :hover
911 state, the computed 'transition-duration' at the time that
912 'background-color' would have its new value (''green'') is ''2s'',
913 so the transition from 'blue' to 'green' takes 2 seconds.
914 However, when the list item leaves the :hover state, the
915 transition from ''green'' to ''blue'' takes 1 second.
916 </p>
917 </div>
919 <p>
920 When the computed value of a property changes, implementations
921 must start transitions based on the relevant item (see <a
922 href="#transition-property">the definition of
923 'transition-property'</a>) in the computed value of
924 'transition-property'.
925 Corresponding to this item there are
926 computed values of 'transition-duration' and 'transition-delay'
927 (see <a href="#list-matching">the rules on matching lists</a>).
928 Define the <dfn>combined duration</dfn> of the transition
929 as the sum of max('transition-duration', ''0s'') and 'transition-delay'.
930 When the combined duration is greater than ''0s'',
931 then a transition starts based on the values of
932 'transition-duration', 'transition-delay',
933 and 'transition-timing-function';
934 in other cases transitions do not occur.
935 </p>
937 <p>
938 Since this specification does not define
939 when computed values change, and thus what changes to
940 computed values are considered simultaneous,
941 authors should be aware that changing any of the transition
942 properties a small amount of time after making a change that
943 might transition can result in behavior that varies between
944 implementations, since the changes might be considered
945 simultaneous in some implementations but not others.
946 </p>
948 <p>
949 Once the transition of a property has started, it must continue
950 running based on the original timing function, duration, and
951 delay, even if the 'transition-timing-function',
952 'transition-duration', or 'transition-delay' property changes
953 before the transition is complete. However, if the
954 'transition-property' property changes such that the transition
955 would not have started, the transition must stop (and the
956 property must immediately change to its final value).
957 </p>
959 <p>
960 Implementations must not start a transition when the computed
961 value of a property changes as a result of declarative animation
962 (as opposed to scripted animation).
963 </p>
965 <p>
966 Implementations also must not start a transition when the
967 computed value changes because it is inherited (directly or
968 indirectly) from another element that is transitioning the same
969 property.
970 </p>
972 <p class="issue">
973 Issue: These rules don't define a model clearly enough to define
974 the behavior in harder cases, such when transition properties
975 are present on both ancestor and descendant. See
976 <a href="http://lists.w3.org/Archives/Public/www-style/2013Mar/0297.html">description of issues and proposed model</a>.
977 Working Group resolution from 2013-06-06 needs to be edited.
978 </p>
980 <h2 id="reversing">
981 Automatically reversing interrupted transitions
982 </h2>
983 <p>
984 A common type of transition effect is when a running transition is
985 interrupted and the property is reset to its original value. An
986 example is a hover effect on an element, where the pointer enters and
987 exits the element before the effect has completed. If the outgoing and
988 incoming transitions are executed using their specified durations and
989 timing functions, the resulting effect can be distractingly
990 asymmetric. Instead, the expected behavior is that the new transition
991 should be the reverse of what has already executed.
992 </p>
994 <p>
995 If a running transition with duration T, executing so far for duration TE,
996 from state A, to state B, is interrupted by
997 a property change that would start a new transition back to state A, and
998 all the transition attributes are the same (duration, delay and timing function),
999 then the new transition must reverse the effect. The new transition must:
1000 </p>
1002 <ol>
1003 <li>
1004 Use the B and A states as its "from" and "to" states respectively. It
1005 does not use the current value as its from state, due to the rules below.
1006 </li>
1007 <li>
1008 Execute with the same duration T, but starting as if the transition had
1009 already begun, without any transition delay, at the moment which would
1010 cause the new transition to finish in TE from the moment of interruption. In other
1011 words, the new transition will execute as if it started T-TE in the past.
1012 </li>
1013 <li>
1014 Use a timing function that is the portion of the curve traversed up
1015 to the moment of interruption, followed in the opposite direction (towards
1016 the starting point). This will make the transition appear as if it
1017 is playing backwards.
1018 </li>
1019 <li>
1020 Ignore any transition delay.
1021 </li>
1022 </ol>
1024 <p>
1025 For example, suppose there is a transition with a duration of two
1026 seconds. If this transition is interrupted after 0.5 seconds and the
1027 property value assigned to the original value, then the new transition
1028 effect will be the reverse of the original, as if it had begun
1029 1.5 seconds in the past.
1030 </p>
1032 <p>
1033 Note that by using the defined from and to states for the reversing
1034 transition, it is also possible that it may reverse again, if
1035 interrupted; for example, if the transition reversing to state A was
1036 again interrupted by a property change to state B.
1037 </p>
1039 <p class="issue">Issue:
1040 This introduces the concept of reversing a timing function,
1041 which the spec has otherwise resisted doing, and also introduces
1042 a discontinuity between transitions that have
1043 almost completed (which get automatically reversed and thus have
1044 their timing function reversed) and transitions that have fully
1045 completed (where the reversal doesn't lead to the timing
1046 function being reversed). An alternative proposal that avoids
1047 this is to follow the normal timing function algorithm, except
1048 multiply the duration (and also shorten any negative delay) by
1049 the (output) value of the transition timing function of the
1050 incomplete transition at the time it was interrupted, and, to
1051 account for multiple reverses in sequence, to divide by the
1052 shortening applied to the transition being interrupted. For
1053 more details see this thread:
1054 <a href="http://lists.w3.org/Archives/Public/www-style/2009Nov/thread.html#msg302">November 2009 part</a>,
1055 <a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/thread.html#msg319">December 2009 part</a>,
1056 <a href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January 2010 part</a>.
1057 Also see:
1058 <a href="http://lists.w3.org/Archives/Public/public-fx/2012AprJun/0107.html">minutes 2012-05-09</a> (and <a href="http://www.w3.org/Graphics/fx/track/actions/77">action</a>),
1059 <a href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0262.html">minutes 2012-10-30</a>,
1060 <a href="transition-reversing-demo">reversing demo</a>.
1061 Working Group resolution from 2013-06-07 needs to be edited.
1062 </p>
1064 <h2 id="transition-events"><a id="transition-events-">
1065 Transition Events
1066 </a></h2>
1067 <p>
1068 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>.
1069 An event is fired for each property that undergoes a transition.
1070 This allows a content developer to perform actions that synchronize
1071 with the completion of a transition.
1072 </p>
1073 <p>
1074 Each event provides the name of the property the transition is
1075 associated with as well as the duration of the transition.
1076 </p>
1077 <dl>
1078 <dt>
1079 <b>Interface <dfn id="Events-TransitionEvent">TransitionEvent</dfn></b>
1080 </dt>
1081 <dd>
1082 <p>
1083 The <code>TransitionEvent</code> interface provides specific contextual information associated with transitions.
1084 </p>
1085 <dl>
1086 <dt>
1087 <b>IDL Definition</b>
1088 </dt>
1089 <dd>
1090 <div class='idl-code'>
1091 <pre>
1092 <span id="TransitionEvent">[Constructor(DOMString <var title="">type</var>, optional <i>TransitionEventInit</i> <var title="">transitionEventInitDict</var>)]
1093 interface TransitionEvent</span> : Event {
1094 readonly attribute DOMString <a href="#Events-TransitionEvent-propertyName">propertyName</a>;
1095 readonly attribute float <a href="#Events-TransitionEvent-elapsedTime">elapsedTime</a>;
1096 readonly attribute DOMString <a href="#Events-TransitionEvent-pseudoElement">pseudoElement</a>;
1097 };
1099 dictionary <dfn id="TransitionEventInit">TransitionEventInit</dfn> : <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#eventinit">EventInit</a> {
1100 DOMString <a href="#Events-TransitionEvent-propertyName">propertyName</a> = "";
1101 float <a href="#Events-TransitionEvent-elapsedTime">elapsedTime</a> = 0.0;
1102 DOMString <a href="#Events-TransitionEvent-pseudoElement">pseudoElement</a> = "";
1103 }
1104 </pre>
1105 </div>
1106 </dd>
1107 <dt>
1108 <b>Attributes</b>
1109 </dt>
1110 <dd>
1111 <dl>
1112 <dt>
1113 <code class='attribute-name'><dfn title="TransitionEvent::propertyName" id="Events-TransitionEvent-propertyName">propertyName</dfn></code> of type <code>DOMString</code>, readonly
1114 </dt>
1115 <dd>
1116 The name of the CSS property associated with the transition.
1117 </dd>
1118 </dl>
1119 <dl>
1120 <dt>
1121 <code class='attribute-name'><dfn title="TransitionEvent::elapsedTime" id="Events-TransitionEvent-elapsedTime">elapsedTime</dfn></code> of type <code>float</code>, readonly
1122 </dt>
1123 <dd>
1124 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>.
1125 </dd>
1126 </dl>
1127 <dl>
1128 <dt>
1129 <code class='attribute-name'><dfn title="TransitionEvent::pseudoElement" id="Events-TransitionEvent-pseudoElement">pseudoElement</dfn></code> of type <code>DOMString</code>, readonly
1130 </dt>
1131 <dd>
1132 The name (beginning with two colons) of the CSS
1133 pseudo-element on which the transition occured (in
1134 which case the target of the event is that
1135 pseudo-element's corresponding element), or the empty
1136 string if the transition occurred on an element (which
1137 means the target of the event is that element).
1138 </dd>
1139 </dl>
1140 </dd>
1141 </dl>
1142 <p>
1143 <code id="TransitionEvent-constructor">TransitionEvent(type, transitionEventInitDict)</code>
1144 is an <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#constructing-events">event constructor</a>.
1145 </p>
1146 </dd>
1147 </dl>
1148 <p>
1149 There is one type of transition event available.
1150 </p>
1151 <dl>
1152 <dt>
1153 <b><dfn>transitionend</dfn></b>
1154 </dt>
1155 <dd>
1156 The <code>transitionend</code> event occurs at the completion of the transition. In the
1157 case where a transition is removed before completion, such as if the
1158 transition-property is removed, then the event will not fire.
1159 <ul>
1160 <li>Bubbles: Yes
1161 </li>
1162 <li>Cancelable: Yes
1163 </li>
1164 <li>Context Info: propertyName, elapsedTime, pseudoElement
1165 </li>
1166 </ul>
1167 </dd>
1168 </dl>
1170 <h2 id="animatable-types"><a id="animation-of-property-types-">
1171 Animation of property types
1172 </a></h2>
1174 <p>
1175 When interpolating between two values,
1176 <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>,
1177 interpolation is done using the output <i>p</i> of the timing function,
1178 which gives the portion of the value space
1179 that the interpolation has crossed.
1180 Thus the result of the interpolation is
1181 <i>V</i><sub>res</sub> =
1182 (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> +
1183 <i>p</i> ⋅ <i>V</i><sub>end</sub>.
1184 </p>
1186 <p>
1187 However, if this value (<i>V</i><sub>res</sub>)
1188 is outside the allowed range of values for the property,
1189 then it is clamped to that range.
1190 This can occur if <i>p</i> is outside of the range 0 to 1,
1191 which can occur if a timing function is specified
1192 with a <i>y1</i> or <i>y2</i> that is outside the range 0 to 1.
1193 </p>
1195 <p>
1196 The following describes how each property type undergoes transition or
1197 animation.
1198 </p>
1200 <ul>
1201 <li id="animtype-color">
1202 <strong>color</strong>: interpolated via red, green, blue and alpha
1203 components (treating each as a number, see below).
1204 The interpolation is done between premultiplied colors
1205 (that is, colors for which the red, green, and blue components
1206 specified have been multiplied by the alpha).
1207 </li>
1208 <li id="animtype-length">
1209 <strong>length</strong>: interpolated as real numbers.
1210 </li>
1211 <li id="animtype-percentage">
1212 <strong>percentage</strong>: interpolated as real numbers.
1213 </li>
1214 <li id="animtype-lpcalc">
1215 <strong>length, percentage, or calc</strong>: when both values
1216 are lengths, interpolated as lengths; when both values are
1217 percentages, interpolated as percentages; otherwise, both
1218 values are converted into a ''calc()'' function that is the
1219 sum of a length and a percentage (each possibly zero), and
1220 these ''calc()'' functions have each half interpolated as real
1221 numbers.
1222 </li>
1223 <li id="animtype-integer">
1224 <strong>integer</strong>: interpolated via discrete steps (whole
1225 numbers). The interpolation happens in real number space and is
1226 converted to an integer by rounding to the nearest integer, with
1227 values halfway between a pair of integers rounded towards
1228 positive infinity.
1229 </li>
1230 <li id="animtype-font-weight">
1231 <strong>font weight</strong>: interpolated via discrete steps
1232 (multiples of 100). The interpolation happens in real number
1233 space and is converted to an integer by rounding to the
1234 nearest multiple of 100, with values halfway between multiples
1235 of 100 rounded towards positive infinity.
1236 </li>
1237 <li id="animtype-number">
1238 <strong>number</strong>: interpolated as real (floating point)
1239 numbers.
1240 </li>
1241 <li id="animtype-rect">
1242 <strong>rectangle</strong>: interpolated via the x, y,
1243 width and height components (treating each as a number).
1244 </li>
1245 <li id="animtype-visibility">
1246 <strong>visibility</strong>: if one of the values is
1247 ''visible'', interpolated as a discrete step where values of the
1248 timing function between 0 and 1 map to ''visible'' and other
1249 values of the timing function (which occur only at the
1250 start/end of the transition or as a result of ''cubic-bezier()''
1251 functions with Y values outside of [0, 1]) map to the closer
1252 endpoint; if neither value is ''visible'' then not interpolable.
1253 </li>
1254 <li id="animtype-shadow-list">
1255 <strong>shadow list</strong>: Each shadow in the list is
1256 interpolated via the
1257 color (as <a href="#animtype-color">color</a>) component,
1258 and x, y, blur, and (when appropriate) spread
1259 (as <a href="#animtype-length">length</a>) components.
1260 For each shadow, if one input shadow is ''inset'' and the other
1261 is not, then the result for that shadow matches the inputs;
1262 otherwise the entire list is not interpolable.
1263 If the lists of shadows have different lengths,
1264 then the shorter list is padded at the end
1265 with shadows whose color is ''transparent'',
1266 all lengths are ''0'',
1267 and whose ''inset'' (or not) matches the longer list.
1268 </li>
1269 <li id="animtype-gradient">
1270 <strong>gradient</strong>: interpolated via the
1271 positions and colors of each stop. They must have the same type
1272 (radial or linear) and same number of stops in order to be animated.
1273 <span class="note">Note: [[CSS3-IMAGES]] may extend this
1274 definition.</span>
1275 </li>
1276 <li id="animtype-paintserver">
1277 <strong>paint server</strong> (SVG): interpolation is only supported
1278 between: gradient to gradient and color to color. They then
1279 work as above.
1280 </li>
1281 <li id="animtype-simple-list">
1282 <strong>simple list</strong> of other types:
1283 If the lists have the same number of items,
1284 and each pair of values can be interpolated,
1285 each item in the list is interpolated using
1286 the rules given for those types.
1287 Otherwise the values are not interpolable.
1288 </li>
1289 <li id="animtype-repeatable-list">
1290 <strong>repeatable list</strong> of other types:
1291 The result list has a length that is the least common multiple
1292 of the lengths of the input lists.
1293 Each item in the result is the interpolation of the value
1294 from each input list repeated to the length of the result list.
1295 If a pair of values cannot be interpolated, then the lists
1296 are not interpolable.
1297 <span class="note">
1298 The repeatable list concept ensures that a list that is
1299 conceptually repeated to a certain length (as
1300 'background-origin' is repeated to the length of the
1301 'background-image' list) or repeated infinitely will
1302 smoothly transition between any values, and so that the
1303 computed value will properly represent the result (and
1304 potentially be inherited correctly).
1305 </span>
1306 </li>
1307 </ul>
1309 <p>Future specifications may define additional types that can
1310 be animated.</p>
1312 <p>See the definition of 'transition-property' for how animation
1313 of shorthand properties and the ''all'' value is applied to any
1314 properties (in the shorthand) that can be animated.</p>
1316 <h2 id="animatable-properties"><a id="animatable-properties-">
1317 Animatable properties
1318 </a></h2>
1320 <!--
1321 As resolved in
1322 http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html
1323 -->
1325 <p>The definition of each CSS property defines
1326 when the values of that property can be interpolated
1327 by referring to the definitions of property types
1328 in the <a href="#animatable-types">previous section</a>.
1329 Values are animatable when
1330 both the from and the to values of the property have the type described.
1331 (When a composite type such as "length, percentage, or calc" is listed,
1332 this means that both values must fit into that composite type.)
1333 When multiple types are listed in the form "either A or B",
1334 both values must be of the same type to be interpolable.</p>
1336 <p>For properties that exist at the time this specification was
1337 developed, this specification defines whether and how they are
1338 animated. However, future CSS specifications may define
1339 additional properties, additional values for existing properties,
1340 or additional animation behavior of existing values. In order to
1341 describe new animation behaviors and to have the definition of
1342 animation behavior in a more appropriate location, future CSS
1343 specifications should include an "Animatable:" line in the summary
1344 of the property's definition (in addition to the other lines
1345 described in [[CSS21]], <a
1346 href="http://www.w3.org/TR/CSS21/about.html#property-defs">section
1347 1.4.2</a>). This line should say "no" to indicate that a property
1348 cannot be animated or should reference an animation behavior
1349 (which may be one of the behaviors in the <a
1350 href="#animation-of-property-types-">Animation of property
1351 types</a> section above, or may be a new behavior) to define how
1352 the property animates. Such definitions override those given in
1353 this specification.</p>
1355 <h3 id="animatable-css"><a id="properties-from-css-">
1356 Properties from CSS
1357 </a></h3>
1359 <p>
1360 The following definitions define the animation behavior for
1361 properties in CSS Level 2 Revision 1 ([[CSS21]]) and in Level 3 of
1362 the CSS Color Module ([[CSS3COLOR]]).
1363 </p>
1365 <table class="animatable-properties">
1366 <tr>
1367 <th>Property Name</th>
1368 <th>Type</th>
1369 </tr>
1370 <tr>
1371 <td>background-color</td><td>as <a href="#animtype-color">color</a></tr>
1372 <tr>
1373 <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>
1374 </tr>
1375 <tr>
1376 <td>border-bottom-color</td><td>as <a href="#animtype-color">color</a></td>
1377 </tr>
1378 <tr>
1379 <td>border-bottom-width</td><td>as <a href="#animtype-length">length</a></td>
1380 </tr>
1381 <tr>
1382 <td>border-left-color</td><td>as <a href="#animtype-color">color</a></td>
1383 </tr>
1384 <tr>
1385 <td>border-left-width</td><td>as <a href="#animtype-length">length</a></td>
1386 </tr>
1387 <tr>
1388 <td>border-right-color</td><td>as <a href="#animtype-color">color</a></td>
1389 </tr>
1390 <tr>
1391 <td>border-right-width</td><td>as <a href="#animtype-length">length</a></td>
1392 </tr>
1393 <tr>
1394 <td>border-spacing</td><td>as <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-length">length</a></td>
1395 </tr>
1396 <tr>
1397 <td>border-top-color</td><td>as <a href="#animtype-color">color</a></td>
1398 </tr>
1399 <tr>
1400 <td>border-top-width</td><td>as <a href="#animtype-length">length</a></td>
1401 </tr>
1402 <tr>
1403 <td>bottom</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1404 </tr>
1405 <tr>
1406 <td>clip</td><td>as <a href="#animtype-rect">rectangle</a></td>
1407 </tr>
1408 <tr>
1409 <td>color</td><td>as <a href="#animtype-color">color</a></td>
1410 </tr>
1411 <tr>
1412 <td>font-size</td><td>as <a href="#animtype-length">length</a></td>
1413 </tr>
1414 <tr>
1415 <td>font-weight</td><td>as <a href="#animtype-font-weight">font weight</a></td>
1416 </tr>
1417 <tr>
1418 <td>height</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1419 </tr>
1420 <tr>
1421 <td>left</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1422 </tr>
1423 <tr>
1424 <td>letter-spacing</td><td>as <a href="#animtype-length">length</a></td>
1425 </tr>
1426 <tr>
1427 <td>line-height</td><td>as either <a href="#animtype-number">number</a> or <a href="#animtype-length">length</a></td>
1428 </tr>
1429 <tr>
1430 <td>margin-bottom</td><td>as <a href="#animtype-length">length</a></td>
1431 </tr>
1432 <tr>
1433 <td>margin-left</td><td>as <a href="#animtype-length">length</a></td>
1434 </tr>
1435 <tr>
1436 <td>margin-right</td><td>as <a href="#animtype-length">length</a></td>
1437 </tr>
1438 <tr>
1439 <td>margin-top</td><td>as <a href="#animtype-length">length</a></td>
1440 </tr>
1441 <tr>
1442 <td>max-height</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1443 </tr>
1444 <tr>
1445 <td>max-width</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1446 </tr>
1447 <tr>
1448 <td>min-height</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1449 </tr>
1450 <tr>
1451 <td>min-width</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1452 </tr>
1453 <tr>
1454 <td>opacity</td><td>as <a href="#animtype-number">number</a></td>
1455 </tr>
1456 <tr>
1457 <td>outline-color</td><td>as <a href="#animtype-color">color</a></td>
1458 </tr>
1459 <tr>
1460 <td>outline-width</td><td>as <a href="#animtype-length">length</a></td>
1461 </tr>
1462 <tr>
1463 <td>padding-bottom</td><td>as <a href="#animtype-length">length</a></td>
1464 </tr>
1465 <tr>
1466 <td>padding-left</td><td>as <a href="#animtype-length">length</a></td>
1467 </tr>
1468 <tr>
1469 <td>padding-right</td><td>as <a href="#animtype-length">length</a></td>
1470 </tr>
1471 <tr>
1472 <td>padding-top</td><td>as <a href="#animtype-length">length</a></td>
1473 </tr>
1474 <tr>
1475 <td>right</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1476 </tr>
1477 <tr>
1478 <td>text-indent</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1479 </tr>
1480 <tr>
1481 <td>text-shadow</td><td>as <a href="#animtype-shadow-list">shadow list</a></td>
1482 </tr>
1483 <tr>
1484 <td>top</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1485 </tr>
1486 <tr>
1487 <td>vertical-align</td><td>as <a href="#animtype-length">length</a></td>
1488 </tr>
1489 <tr>
1490 <td>visibility</td><td>as <a href="#animtype-visibility">visibility</a></td>
1491 </tr>
1492 <tr>
1493 <td>width</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
1494 </tr>
1495 <tr>
1496 <td>word-spacing</td><td>as <a href="#animtype-length">length</a></td>
1497 </tr>
1498 <tr>
1499 <td>z-index</td><td>as <a href="#animtype-integer">integer</a></td>
1500 </tr>
1501 </table>
1503 <h3 id="animatable-svg"><a id="properties-from-svg-">
1504 Properties from SVG
1505 </a></h3>
1507 <p>
1508 All properties defined as animatable in the SVG specification, provided
1509 they are one of the property types listed above.
1510 </p>
1512 <!-- <table>
1513 <tr>
1514 <th>Property Name</th><th>Type</th>
1515 </tr>
1516 <tr>
1517 <td>stop-color</td><td>as <a href="#animtype-color">color</a></td>
1518 </tr>
1519 <tr>
1520 <td>stop-opacity</td><td>as <a href="#animtype-number">number</a></td>
1521 </tr>
1522 <tr>
1523 <td>fill</td><td>as <a href="#animtype-paintserver">paint server</a></td>
1524 </tr>
1525 <tr>
1526 <td>fill-opacity</td><td>as <a href="#animtype-number">number</a></td>
1527 </tr>
1528 <tr>
1529 <td>stroke</td><td>as <a href="#animtype-paintserver">paint server</a></td>
1530 </tr>
1531 <tr>
1532 <td>stroke-dasharray</td><td>as <a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-number">number</a></td>
1533 </tr>
1534 <tr>
1535 <td>stroke-dashoffset</td><td>as <a href="#animtype-number">number</a></td>
1536 </tr>
1537 <tr>
1538 <td>stroke-miterlimit</td><td>as <a href="#animtype-number">number</a></td>
1539 </tr>
1540 <tr>
1541 <td>stroke-opacity</td><td>as <a href="#animtype-number">number</a></td>
1542 </tr>
1543 <tr>
1544 <td>stroke-width</td><td>as <a href="#animtype-number">number</a></td>
1545 </tr>
1546 <tr>
1547 <td>viewport-fill</td><td>as <a href="#animtype-color">color</a></td>
1548 </tr>
1549 <tr>
1550 <td>viewport-fill-opacity</td><td>as <a href="#animtype-color">color</a></td>
1551 </tr>
1552 </table> -->
1554 <h2 id="acknowledgments">Acknowledgments</h2>
1556 <p>Thanks especially to the feedback from
1557 Tab Atkins,
1558 Carine Bournez,
1559 Aryeh Gregor,
1560 Vincent Hardy,
1561 Anne van Kesteren,
1562 Cameron McCormack,
1563 Alex Mogilevsky,
1564 and all the rest of the
1565 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.</p>
1567 <h2 id="references">References</h2>
1569 <h3 class="no-num" id="normative-references">Normative references</h3>
1570 <!--normative-->
1572 <h3 class="no-num" id="other-references">Other references</h3>
1573 <!--informative-->
1577 <h2 class="no-num" id="property-index">Property index</h2>
1578 <!-- properties -->
1582 <h2 class="no-num" id="index">Index</h2>
1583 <!--index-->
1585 </body>
1586 </html>
1587 <!-- Keep this comment at the end of the file
1588 Local variables:
1589 mode: sgml
1590 sgml-default-doctype-name:"html"
1591 sgml-minimize-attributes:t
1592 End:
1593 -->