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