css3-transitions/Overview.html@07b883120d89
css3-transitions/Overview.html
Wed, 28 Mar 2012 21:59:03 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Wed, 28 Mar 2012 21:59:03 -0700
- changeset 5298
- 07b883120d89
- parent 5287
- c3d956bbda37
- child 5303
- 083f80ca0535
- permissions
- -rw-r--r--
Add necessary []s to grammar: since juxtaposition binds tighter than |, [] are needed so that the comma needs to separate all the items in the list (rather than requiring a comma to separate values only for the first of the options).
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 <link href="../default.css" rel=stylesheet type="text/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 href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
19 type="text/css">
21 <body>
22 <div class=head> <!--begin-logo-->
23 <p><a href="http://www.w3.org/"><img alt=W3C height=48
24 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
26 <h1>CSS Transitions</h1>
28 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 March 2012</h2>
30 <dl>
31 <dt>This version:
33 <dd> <a href="http://www.w3.org/TR/2012/ED-css3-transitions-20120329/">
34 http://dev.w3.org/csswg/css3-transitions/</a>
35 <!--http://www.w3.org/TR/2012/WD-css3-transitions-20120329-->
37 <dt>Latest version:
39 <dd><a href="http://www.w3.org/TR/css3-transitions">
40 http://www.w3.org/TR/css3-transitions/</a>
42 <dt>Editor's draft:
44 <dd><a
45 href="http://dev.w3.org/csswg/css3-transitions/">http://dev.w3.org/csswg/css3-transitions/</a>
48 <dt>Previous version:
50 <dd><a href="http://www.w3.org/TR/2009/WD-css3-transitions-20091201/">
51 http://www.w3.org/TR/2009/WD-css3-transitions-20091201/</a>
53 <dt id=editors-list>Editors:
55 <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a
56 href="http://www.apple.com/">Apple Inc</a>)
58 <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a
59 href="http://www.apple.com/">Apple Inc</a>)
61 <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a
62 href="http://www.apple.com/">Apple Inc</a>)
64 <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a>
65 (<a class=org href="http://www.mozilla.com/">Mozilla</a>)
67 <dt>Issues list:
69 <dd><a
70 href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transitions&resolution=---&cmdtype=doit">in
71 Bugzilla</a>
73 <dt>Discussion:
75 <dd><a
76 href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
77 with subject line “<kbd>[css3-transitions] <var>… message
78 topic …</var></kbd>”
80 <dt>Test suite:
82 <dd>none yet
83 </dl>
84 <!--begin-copyright-->
85 <p class=copyright><a
86 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
87 rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
88 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
89 href="http://www.csail.mit.edu/"><abbr
90 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
91 href="http://www.ercim.eu/"><abbr
92 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
93 <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
94 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
95 <a
96 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
97 and <a
98 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
99 use</a> rules apply.</p>
100 <!--end-copyright-->
101 <hr title="Separator for header">
102 </div>
104 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
106 <p>CSS Transitions allows property changes in CSS values to occur smoothly
107 over a specified duration.
109 <h2 class="no-num no-toc" id=status>Status of this document</h2>
110 <!--begin-status-->
112 <p>This is a public copy of the editors' draft. It is provided for
113 discussion only and may change at any moment. Its publication here does
114 not imply endorsement of its contents by W3C. Don't cite this document
115 other than as work in progress.
117 <p>The (<a
118 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
119 mailing list <a
120 href="mailto:www-style@w3.org?Subject=%5Bcss3-transitions%5D%20PUT%20SUBJECT%20HERE">
121 www-style@w3.org</a> (see <a
122 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
123 discussion of this specification. When sending e-mail, please put the text
124 “css3-transitions” in the subject, preferably like this:
125 “[<!---->css3-transitions<!---->] <em>…summary of
126 comment…</em>”
128 <p>This document was produced by the <a href="/Style/CSS/members">CSS
129 Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
131 <p>This document was produced by a group operating under the <a
132 href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
133 Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
134 rel=disclosure>public list of any patent disclosures</a> made in
135 connection with the deliverables of the group; that page also includes
136 instructions for disclosing a patent. An individual who has actual
137 knowledge of a patent which the individual believes contains <a
138 href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
139 Claim(s)</a> must disclose the information in accordance with <a
140 href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
141 W3C Patent Policy</a>.</p>
142 <!--end-status-->
144 <p> The <a href=ChangeLog>list of changes made to this specification</a> is
145 available.
147 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
148 <!--begin-toc-->
150 <ul class=toc>
151 <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
153 <li><a href="#transitions"><span class=secno>2. </span>Transitions</a>
154 <ul class=toc>
155 <li><a href="#the-transition-property-property-"><span class=secno>2.1.
156 </span> The <code class=property>'transition-property'</code> Property
157 </a>
159 <li><a href="#the-transition-duration-property-"><span class=secno>2.2.
160 </span> The <code class=property>'transition-duration'</code> Property
161 </a>
163 <li><a href="#transition-timing-function_tag"><span class=secno>2.3.
164 </span> The <code class=property>'transition-timing-function'</code>
165 Property </a>
167 <li><a href="#the-transition-delay-property-"><span class=secno>2.4.
168 </span> The <code class=property>'transition-delay'</code> Property
169 </a>
171 <li><a href="#the-transition-shorthand-property-"><span class=secno>2.5.
172 </span> The <code class=property>'transition'</code> Shorthand Property
173 </a>
174 </ul>
176 <li><a href="#starting"><span class=secno>3. </span> Starting of
177 transitions </a>
179 <li><a href="#reversing"><span class=secno>4. </span> Automatically
180 reversing interrupted transitions </a>
182 <li><a href="#transition-events-"><span class=secno>5. </span> Transition
183 Events </a>
185 <li><a href="#animation-of-property-types-"><span class=secno>6. </span>
186 Animation of property types </a>
188 <li><a href="#animatable-properties-"><span class=secno>7. </span>
189 Animatable properties </a>
190 <ul class=toc>
191 <li><a href="#properties-from-css-"><span class=secno>7.1. </span>
192 Properties from CSS </a>
194 <li><a href="#properties-from-svg-"><span class=secno>7.2. </span>
195 Properties from SVG </a>
196 </ul>
198 <li><a href="#references"><span class=secno>8. </span>References</a>
199 <ul class=toc>
200 <li class=no-num><a href="#normative-references">Normative
201 references</a>
203 <li class=no-num><a href="#other-references">Other references</a>
204 </ul>
206 <li class=no-num><a href="#property-index">Property index</a>
208 <li class=no-num><a href="#index">Index</a>
209 </ul>
210 <!--end-toc-->
212 <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
214 <p><em>This section is not normative.</em>
216 <p> This document introduces new CSS features to enable <em>implicit
217 transitions</em>, which describe how CSS properties can be made to change
218 smoothly from one value to another over a given duration.
220 <h2 id=transitions><span class=secno>2. </span>Transitions</h2>
222 <p> Normally when the value of a CSS property changes, the rendered result
223 is instantly updated, with the affected elements immediately changing from
224 the old property value to the new property value. This section describes a
225 way to specify transitions using new CSS properties. These properties are
226 used to animate smoothly from the old state to the new state over time.
228 <p> For example, suppose that transitions of one second have been defined
229 on the <code class=property>'left'</code> and <code
230 class=property>'background-color'</code> properties. The following diagram
231 illustrates the effect of updating those properties on an element, in this
232 case moving it to the right and changing the background from red to blue.
233 This assumes other transition parameters still have their default values.
235 <div class=figure> <img alt="" src=transition1.png></div>
237 <p class=caption> Transitions of <code class=property>'left'</code> and
238 <code class=property>'background-color'</code>
240 <p> Transitions are a presentational effect. The computed value of a
241 property transitions over time from the old value to the new value.
242 Therefore if a script queries the computed style of a property as it is
243 transitioning, it will see an intermediate value that represents the
244 current animated value of the property.
246 <p> Only animatable CSS properties can be transitioned. See the table at
247 the end of this document for a list of properties that are animatable.
249 <p> The transition for a property is defined using a number of new
250 properties. For example:
252 <div class=example>
253 <p style="display:none"> Example(s):</p>
255 <pre>
256 div {
257 transition-property: opacity;
258 transition-duration: 2s;
259 }
260 </pre>
261 The above example defines a transition on the <code
262 class=property>'opacity'</code> property that, when a new value is
263 assigned to it, will cause a smooth change between the old value and the
264 new value over a period of two seconds.</div>
266 <p> Each of the transition properties accepts a comma-separated list,
267 allowing multiple transitions to be defined, each acting on a different
268 property. In this case, the individual transitions take their parameters
269 from the same index in all the lists. For example:
271 <div class=example>
272 <p style="display:none"> Example(s):</p>
274 <pre>
275 div {
276 transition-property: opacity, left;
277 transition-duration: 2s, 4s;
278 }
280 </pre>
281 This will cause the <code class=property>'opacity'</code> property to
282 transition over a period of two seconds and the left property to
283 transition over a period of four seconds.</div>
285 <p id=list-matching> In the case where the lists of values in transition
286 properties do not have the same length, the length of the ‘<a
287 href="#transition-property"><code
288 class=property>transition-property</code></a>’ list determines the
289 number of items in each list examined when starting transitions. The lists
290 are matched up from the first value: excess values at the end are not
291 used. If one of the other properties doesn't have enough comma-separated
292 values to match the number of values of ‘<a
293 href="#transition-property"><code
294 class=property>transition-property</code></a>’, the UA must
295 calculate its used value by repeating the list of values until there are
296 enough. This truncation or repetition does not affect the computed value.
297 <span class=note> Note: This is analogous to the behavior of the
298 ‘<code class=css>background-*</code>’ properties, with
299 ‘<code class=property>background-image</code>’ analogous to
300 ‘<a href="#transition-property"><code
301 class=property>transition-property</code></a>’. </span>
303 <div class=example>
304 <p style="display:none"> Example(s):</p>
306 <pre>
307 div {
308 transition-property: opacity, left, top, width;
309 transition-duration: 2s, 1s;
310 }
311 </pre>
312 The above example defines a transition on the <code
313 class=property>'opacity'</code> property of 2 seconds duration, a
314 transition on the <code class=property>'left'</code> property of 1 second
315 duration, a transition on the <code class=property>'top'</code> property
316 of 2 seconds duration and a transition on the <code
317 class=property>'width'</code> property of 1 second duration.</div>
318 <!-- ======================================================================================================= -->
320 <h3 id=the-transition-property-property-><span class=secno>2.1. </span> The
321 <a href="#transition-property"><code
322 class=property>'transition-property'</code></a> Property</h3>
324 <p> The <a href="#transition-property"><code
325 class=property>'transition-property'</code></a> property specifies the
326 name of the CSS property to which the transition is applied.
328 <div class=issue> We may ultimately want to support a keypath syntax for
329 this property. A keypath syntax would enable different transitions to be
330 specified for components of a property. For example the blur of a shadow
331 could have a different transition than the color of a shadow.</div>
333 <table class=propdef>
334 <tbody>
335 <tr>
336 <td> <em>Name:</em>
338 <td> <dfn id=transition-property>transition-property</dfn>
340 <tr>
341 <td> <em>Value:</em>
343 <td> none | [ all | <IDENT> ] [ ‘<code
344 class=css>,</code>’ [ all | <IDENT> ] ]*
346 <tr>
347 <td> <em>Initial:</em>
349 <td> all
351 <tr>
352 <td> <em>Applies to:</em>
354 <td> all elements, :before and :after pseudo elements
356 <tr>
357 <td> <em>Inherited:</em>
359 <td> no
361 <tr>
362 <td> <em>Percentages:</em>
364 <td> N/A
366 <tr>
367 <td> <em>Media:</em>
369 <td> visual
371 <tr>
372 <td> <em>Computed value:</em>
374 <td> Same as specified value.
375 </table>
377 <p> A value of ‘<code class=property>none</code>’ means that no
378 property will transition. Otherwise, a list of properties to be
379 transitioned, or the keyword ‘<code class=property>all</code>’
380 which indicates that all properties are to be transitioned, is given.
382 <p> If one of the identifiers listed is not a recognized property name or
383 is not an animatable property, the implementation must still start
384 transitions on the animatable properties in the list using the duration,
385 delay, and timing function at their respective indices in the lists for
386 ‘<a href="#transition-duration"><code
387 class=property>transition-duration</code></a>’, ‘<a
388 href="#transition-delay"><code
389 class=property>transition-delay</code></a>’, and ‘<a
390 href="#transition-timing-function"><code
391 class=property>transition-timing-function</code></a>’. In other
392 words, unrecognized or non-animatable properties must be kept in the list
393 to preserve the matching of indices.
395 <p class=issue> Are ‘<code class=property>none</code>’,
396 ‘<code class=property>inherit</code>’, and ‘<code
397 class=property>initial</code>’ allowed as items in a list of
398 identifiers (of length greater than one)?
400 <p> For the keyword ‘<code class=property>all</code>’, or if
401 one of the identifiers listed is a shorthand property, implementations
402 must start transitions for any of its longhand sub-properties that are
403 animatable (or, for ‘<code class=property>all</code>’, all
404 animatable properties), using the duration, delay, and timing function at
405 the index corresponding to the shorthand.
407 <p> If a property is specified multiple times in the value of ‘<a
408 href="#transition-property"><code
409 class=property>transition-property</code></a>’ (either on its own,
410 via a shorthand that contains it, or via the ‘<code
411 class=property>all</code>’ value), then the transition that starts
412 uses the duration, delay, and timing function at the index corresponding
413 to the <em>last</em> item in the value of ‘<a
414 href="#transition-property"><code
415 class=property>transition-property</code></a>’ that calls for
416 animating that property.
418 <p class=note> Note: The <code class=property>all</code> value and
419 shorthand properties work in similar ways, so the <code
420 class=property>all</code> value is just like a shorthand that covers all
421 properties.</p>
422 <!-- ======================================================================================================= -->
424 <h3 id=the-transition-duration-property-><span class=secno>2.2. </span> The
425 <a href="#transition-duration"><code
426 class=property>'transition-duration'</code></a> Property</h3>
428 <p> The <a href="#transition-duration"><code
429 class=property>'transition-duration'</code></a> property defines the
430 length of time that a transition takes.
432 <table class=propdef>
433 <tbody>
434 <tr>
435 <td> <em>Name:</em>
437 <td> <dfn id=transition-duration>transition-duration</dfn>
439 <tr>
440 <td> <em>Value:</em>
442 <td> <time> [, <time>]*
444 <tr>
445 <td> <em>Initial:</em>
447 <td> 0s
449 <tr>
450 <td> <em>Applies to:</em>
452 <td> all elements, :before and :after pseudo elements
454 <tr>
455 <td> <em>Inherited:</em>
457 <td> no
459 <tr>
460 <td> <em>Percentages:</em>
462 <td> N/A
464 <tr>
465 <td> <em>Media:</em>
467 <td> interactive
469 <tr>
470 <td> <em>Computed value:</em>
472 <td> Same as specified value.
473 </table>
475 <p> This property specifies how long the transition from the old value to
476 the new value should take. By default the value is ‘<code
477 class=css>0s</code>’, meaning that the transition is immediate (i.e.
478 there will be no animation). A negative value for <a
479 href="#transition-duration"><code
480 class=property>transition-duration</code></a> is treated as ‘<code
481 class=css>0s</code>’.</p>
482 <!-- =======================================================================================================
483 -->
485 <h3 id="transition-timing-function_tag"><span class=secno>2.3. </span> The
486 <a href="#transition-timing-function"><code
487 class=property>'transition-timing-function'</code></a> Property</h3>
489 <p> The <a href="#transition-timing-function"><code
490 class=property>'transition-timing-function'</code></a> property describes
491 how the intermediate values used during a transition will be calculated.
492 It allows for a transition to change speed over its duration. These
493 effects are commonly called <em>easing</em> functions. In either case, a
494 mathematical function that provides a smooth curve is used.
496 <p> Timing functions are either defined as a stepping function or a <a
497 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
498 Bézier curve</a>. The timing function takes as its input the
499 current elapsed percentage of the transition duration and outputs a
500 percentage that determines how close the transition is to its goal state.
502 <p> A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
503 function is defined by a number that divides the domain of operation into
504 equally sized intervals. Each subsequent interval is a equal step closer
505 to the goal state. The function also specifies whether the change in
506 output percentage happens at the start or end of the interval (in other
507 words, if 0% on the input percentage is the point of initial change).
509 <div class=figure> <img
510 alt="The step timing function splits the function domain into a number of disjoint straight line segments. steps(1, start) is a function whose output value is 1 for all input values. steps(1, end) is a function whose output value is 0 for all input values less than 1, and output is 1 for the input value of 1. steps(3, start) is a function that divides the input domain into three segments, each 1/3 in length, and 1/3 above the previous segment, with the first segment starting at 1/3. steps(3, end) is a function that divides the input domain into three segments, each 1/3 in length, and 1/3 above the previous segment, with the first segment starting at 0."
511 src=step.png></div>
513 <p class=caption> Step timing functions
515 <p> A <a
516 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
517 Bézier curve</a> is defined by four control points, P<sub>0</sub>
518 through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> are
519 always set to (0,0) and (1,1). The <a
520 href="#transition-timing-function"><code
521 class=property>'transition-timing-function'</code></a> property is used to
522 specify the values for points P<sub>1</sub> and P<sub>2</sub>. These can
523 be set to preset values using the keywords listed below, or can be set to
524 specific values using the <code class=css>'cubic-bezier'</code> function.
525 In the <code class=css>'cubic-bezier'</code> function, P<sub>1</sub> and
526 P<sub>2</sub> are each specified by both an X and Y value.
528 <div class=figure> <img
529 alt="The Bézier timing function is a smooth curve from point P0 = (0,0) to point P3 = (1,1). The length and orientation of the line segment P0-P1 determines the tangent and the curvature of the curve at P0 and the line segment P2-P3 does the same at P3."
530 src=TimingFunction.png></div>
532 <p class=caption> Bézier Timing Function Control Points
534 <table class=propdef>
535 <tbody>
536 <tr>
537 <td> <em>Name:</em>
539 <td> <dfn id=transition-timing-function>transition-timing-function</dfn>
542 <tr>
543 <td> <em>Value:</em>
545 <td> ease | linear | ease-in | ease-out | ease-in-out | step-start |
546 step-end | steps(<integer>[, start | end ]) |
547 cubic-bezier(<number>, <number>, <number>,
548 <number>) [, [ ease | linear | ease-in | ease-out | ease-in-out |
549 step-start | step-end | steps(<number>[, start | end ]) |
550 cubic-bezier(<number>, <number>, <number>,
551 <number>) ] ]*
553 <tr>
554 <td> <em>Initial:</em>
556 <td> ease
558 <tr>
559 <td> <em>Applies to:</em>
561 <td> all elements, :before and :after pseudo elements
563 <tr>
564 <td> <em>Inherited:</em>
566 <td> no
568 <tr>
569 <td> <em>Percentages:</em>
571 <td> N/A
573 <tr>
574 <td> <em>Media:</em>
576 <td> interactive
578 <tr>
579 <td> <em>Computed value:</em>
581 <td> Same as specified value.
582 </table>
584 <p> The timing functions have the following definitions.
586 <dl>
587 <dt> ease
589 <dd> The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25,
590 1.0).
592 <dt> linear
594 <dd> The linear function is equivalent to cubic-bezier(0.0, 0.0, 1.0,
595 1.0).
597 <dt> ease-in
599 <dd> The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0,
600 1.0).
602 <dt> ease-out
604 <dd> The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
607 <dt> ease-in-out
609 <dd> The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58,
610 1.0)
612 <dt> step-start
614 <dd> The step-start function is equivalent to steps(1, start).
616 <dt> step-end
618 <dd> The step-end function is equivalent to steps(1, end).
620 <dt> steps
622 <dd> Specifies a stepping function, described above, taking two
623 parameters. The first parameter specifies the number of intervals in the
624 function. It must be a positive integer (greater than 0). The second
625 parameter, which is optional, is either the value ‘<code
626 class=property>start</code>’ or ‘<code
627 class=property>end</code>’, and specifies the point at which the
628 change of values occur within the interval. If the second parameter is
629 omitted, it is given the value ‘<code
630 class=property>end</code>’.
632 <dt> cubic-bezier
634 <dd> Specifies a <a
635 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier
636 curve</a>. The four values specify points P<sub>1</sub> and P<sub>2</sub>
637 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0,
638 1] or the definition is invalid. The y values can exceed this range.
639 </dl>
640 <!-- ======================================================================================================= -->
642 <h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The <a
643 href="#transition-delay"><code
644 class=property>'transition-delay'</code></a> Property</h3>
646 <p> The <a href="#transition-delay"><code
647 class=property>'transition-delay'</code></a> property defines when the
648 transition will start. It allows a transition to begin execution some some
649 period of time from when it is applied. A <a
650 href="#transition-delay"><code
651 class=property>'transition-delay'</code></a> value of ‘<code
652 class=css>0s</code>’ means the transition will execute as soon as
653 the property is changed. Otherwise, the value specifies an offset from the
654 moment the property is changed, and the transition will delay execution by
655 that offset.
657 <p> If the value for <a href="#transition-delay"><code
658 class=property>'transition-delay'</code></a> is a negative time offset
659 then the transition will execute the moment the property is changed, but
660 will appear to have begun execution at the specified offset. That is, the
661 transition will appear to begin part-way through its play cycle. In the
662 case where a transition has implied starting values and a negative <a
663 href="#transition-delay"><code
664 class=property>'transition-delay'</code></a>, the starting values are
665 taken from the moment the property is changed.
667 <table class=propdef>
668 <tbody>
669 <tr>
670 <td> <em>Name:</em>
672 <td> <dfn id=transition-delay>transition-delay</dfn>
674 <tr>
675 <td> <em>Value:</em>
677 <td> <time> [, <time>]*
679 <tr>
680 <td> <em>Initial:</em>
682 <td> 0s
684 <tr>
685 <td> <em>Applies to:</em>
687 <td> all elements, :before and :after pseudo elements
689 <tr>
690 <td> <em>Inherited:</em>
692 <td> no
694 <tr>
695 <td> <em>Percentages:</em>
697 <td> N/A
699 <tr>
700 <td> <em>Media:</em>
702 <td> interactive
704 <tr>
705 <td> <em>Computed value:</em>
707 <td> Same as specified value.
708 </table>
709 <!-- ======================================================================================================= -->
711 <h3 id=the-transition-shorthand-property-><span class=secno>2.5. </span>
712 The <a href="#transition"><code class=property>'transition'</code></a>
713 Shorthand Property</h3>
715 <p> The <a href="#transition"><code class=property>'transition'</code></a>
716 shorthand property combines the four properties described above into a
717 single property.
719 <p> Note that order is important in this property. The first value that can
720 be parsed as a time is assigned to the transition-duration. The second
721 value that can be parsed as a time is assigned to transition-delay.
723 <p class=issue> An alternative proposal is to accept the font shorthand
724 approach of using a "/" character between the values of the same type.
725 e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds.
727 <table class=propdef>
728 <tbody>
729 <tr>
730 <td> <em>Name:</em>
732 <td> <dfn id=transition>transition</dfn>
734 <tr>
735 <td> <em>Value:</em>
737 <td> [<‘<a href="#transition-property"><code
738 class=property>transition-property</code></a>’> ||
739 <‘<a href="#transition-duration"><code
740 class=property>transition-duration</code></a>’> ||
741 <‘<a href="#transition-timing-function"><code
742 class=property>transition-timing-function</code></a>’> ||
743 <‘<a href="#transition-delay"><code
744 class=property>transition-delay</code></a>’> [, [<‘<a
745 href="#transition-property"><code
746 class=property>transition-property</code></a>’> ||
747 <‘<a href="#transition-duration"><code
748 class=property>transition-duration</code></a>’> ||
749 <‘<a href="#transition-timing-function"><code
750 class=property>transition-timing-function</code></a>’> ||
751 <‘<a href="#transition-delay"><code
752 class=property>transition-delay</code></a>’>]]*
754 <tr>
755 <td> <em>Initial:</em>
757 <td> see individual properties
759 <tr>
760 <td> <em>Applies to:</em>
762 <td> all elements, :before and :after pseudo elements
764 <tr>
765 <td> <em>Inherited:</em>
767 <td> no
769 <tr>
770 <td> <em>Percentages:</em>
772 <td> N/A
774 <tr>
775 <td> <em>Media:</em>
777 <td> interactive
779 <tr>
780 <td> <em>Computed value:</em>
782 <td> Same as specified value.
783 </table>
785 <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
787 <p> When the computed value of an animatable property changes,
788 implementations must decide what transitions to start based on the values
789 of the ‘<a href="#transition-property"><code
790 class=property>transition-property</code></a>’, ‘<a
791 href="#transition-duration"><code
792 class=property>transition-duration</code></a>’, ‘<a
793 href="#transition-timing-function"><code
794 class=property>transition-timing-function</code></a>’, and ‘<a
795 href="#transition-delay"><code
796 class=property>transition-delay</code></a>’ properties at the time
797 the animatable property would first have its new computed value.
799 <div class=example id=manual-reversing-example>
800 <p style="display:none"> Example(s):</p>
802 <p>This provides a way for authors to specify different values of the
803 ‘<code class=css>transition-*</code>’ properties for the
804 “forward” and “reverse” transitions (but see <a
805 href="#reversing">below</a> for special reversing behavior when an
806 <em>incomplete</em> transition is interrupted). Authors can specify the
807 value of ‘<a href="#transition-duration"><code
808 class=property>transition-duration</code></a>’, ‘<a
809 href="#transition-timing-function"><code
810 class=property>transition-timing-function</code></a>’, or ‘<a
811 href="#transition-delay"><code
812 class=property>transition-delay</code></a>’ in the same rule where
813 they specify the value that triggers the transition, or can change these
814 properties at the same time as they change the property that triggers the
815 transition. Since it's the new values of these ‘<code
816 class=css>transition-*</code>’ properties that affect the
817 transition, these values will be used for the transitions <em>to</em> the
818 associated transitioning values. For example:</p>
820 <pre>li {
821 transition: background-color linear 1s;
822 background: blue;
823 }
824 li:hover {
825 background-color: green;
826 transition-duration: 2s; /* applies to the transition *to* the :hover state */
827 }</pre>
829 <p> When a list item with these style rules enters the :hover state, the
830 computed ‘<a href="#transition-duration"><code
831 class=property>transition-duration</code></a>’ at the time that
832 ‘<code class=property>background-color</code>’ would have its
833 new value (‘<code class=property>green</code>’) is
834 ‘<code class=css>2s</code>’, so the transition from
835 ‘<code class=property>blue</code>’ to ‘<code
836 class=property>green</code>’ takes 2 seconds. However, when the
837 list item leaves the :hover state, the transition from ‘<code
838 class=property>green</code>’ to ‘<code
839 class=property>blue</code>’ takes 1 second.</p>
840 </div>
842 <p> When the computed value of a property changes, implementations must
843 start transitions based on the relevant item (see <a
844 href="#transition-property">the definition of ‘<code
845 class=property>transition-property</code>’</a>) in the computed
846 value of ‘<a href="#transition-property"><code
847 class=property>transition-property</code></a>’. Corresponding to
848 this item there are values of ‘<a href="#transition-duration"><code
849 class=property>transition-duration</code></a>’ and ‘<a
850 href="#transition-delay"><code
851 class=property>transition-delay</code></a>’ (see <a
852 href="#list-matching">the rules on matching lists</a>). Define the <dfn
853 id=combined-duration>combined duration</dfn> of the transition as the sum
854 of max(‘<a href="#transition-duration"><code
855 class=property>transition-duration</code></a>’, ‘<code
856 class=css>0s</code>’) and ‘<a href="#transition-delay"><code
857 class=property>transition-delay</code></a>’. When the combined
858 duration is greater than ‘<code class=css>0s</code>’, then a
859 transition starts based on the values of ‘<a
860 href="#transition-duration"><code
861 class=property>transition-duration</code></a>’, ‘<a
862 href="#transition-delay"><code
863 class=property>transition-delay</code></a>’, and ‘<a
864 href="#transition-timing-function"><code
865 class=property>transition-timing-function</code></a>’; in other
866 cases transitions do not occur.
868 <p> Since this specification does not define when computed values change,
869 and thus what changes to computed values are considered simultaneous,
870 authors should be aware that changing any of the transition properties a
871 small amount of time after making a change that might transition can
872 result in behavior that varies between implementations, since the changes
873 might be considered simultaneous in some implementations but not others.
875 <p class=note>Say something about simultaneity
877 <p> Once the transition of a property has started, it must continue running
878 based on the original timing function, duration, and delay, even if the
879 ‘<a href="#transition-timing-function"><code
880 class=property>transition-timing-function</code></a>’, ‘<a
881 href="#transition-duration"><code
882 class=property>transition-duration</code></a>’, or ‘<a
883 href="#transition-delay"><code
884 class=property>transition-delay</code></a>’ property changes before
885 the transition is complete. However, if the ‘<a
886 href="#transition-property"><code
887 class=property>transition-property</code></a>’ property changes such
888 that the transition would not have started, the transition must stop (and
889 the property must immediately change to its final value).
891 <p> Implementations must not start a transition when the computed value of
892 a property changes as a result of declarative animation (as opposed to
893 scripted animation).
895 <p> Implementations also must not start a transition when the computed
896 value changes because it is inherited (directly or indirectly) from
897 another element that is transitioning the same property.
899 <h2 id=reversing><span class=secno>4. </span> Automatically reversing
900 interrupted transitions</h2>
902 <p> A common type of transition effect is when a running transition is
903 interrupted and the property is reset to its original value. An example is
904 a hover effect on an element, where the pointer enters and exits the
905 element before the effect has completed. If the outgoing and incoming
906 transitions are executed using their specified durations and timing
907 functions, the resulting effect can be distractingly asymmetric. Instead,
908 the expected behavior is that the new transition should be the reverse of
909 what has already executed.
911 <p> If a running transition with duration T, executing so far for duration
912 TE, from state A, to state B, is interrupted by a property change that
913 would start a new transition back to state A, and all the transition
914 attributes are the same (duration, delay and timing function), then the
915 new transition must reverse the effect. The new transition must:
917 <ol>
918 <li> Use the B and A states as its "from" and "to" states respectively. It
919 does not use the current value as its from state, due to the rules below.
922 <li> Execute with the same duration T, but starting as if the transition
923 had already begun, without any transition delay, at the moment which
924 would cause the new transition to finish in TE from the moment of
925 interruption. In other words, the new transition will execute as if it
926 started T-TE in the past.
928 <li> Use a timing function that is the portion of the curve traversed up
929 to the moment of interruption, followed in the opposite direction
930 (towards the starting point). This will make the transition appear as if
931 it is playing backwards.
933 <li> Ignore any transition delay.
934 </ol>
936 <p> For example, suppose there is a transition with a duration of two
937 seconds. If this transition is interrupted after 0.5 seconds and the
938 property value assigned to the original value, then the new transition
939 effect will be the reverse of the original, as if it had begun 1.5 seconds
940 in the past.
942 <p> Note that by using the defined from and to states for the reversing
943 transition, it is also possible that it may reverse again, if interrupted;
944 for example, if the transition reversing to state A was again interrupted
945 by a property change to state B.
947 <p class=issue>Issue: This introduces the concept of reversing a timing
948 function, which the spec has otherwise resisted doing, and also introduces
949 a discontinuity between transitions that have almost completed (which get
950 automatically reversed and thus have their timing function reversed) and
951 transitions that have fully completed (where the reversal doesn't lead to
952 the timing function being reversed). An alternative proposal that avoids
953 this is to follow the normal timing function algorithm, except multiply
954 the duration (and also shorten any negative delay) by the (output) value
955 of the transition timing function of the incomplete transition at the time
956 it was interrupted, and, to account for multiple reverses in sequence, to
957 divide by the shortening applied to the transition being interrupted. For
958 more details see this thread: <a
959 href="http://lists.w3.org/Archives/Public/www-style/2009Nov/thread.html#msg302">November
960 2009 part</a>, <a
961 href="http://lists.w3.org/Archives/Public/www-style/2009Dec/thread.html#msg319">December
962 2009 part</a>, <a
963 href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January
964 2010 part</a>.
966 <h2 id=transition-events-><span class=secno>5. </span> Transition Events</h2>
968 <p> The completion of a CSS Transition generates a corresponding <a
969 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>.
970 An event is fired for each property that undergoes a transition. This
971 allows a content developer to perform actions that synchronize with the
972 completion of a transition.
974 <p> Each event provides the name of the property the transition is
975 associated with as well as the duration of the transition.
977 <dl>
978 <dt> <b>Interface <i><a id=Events-TransitionEvent
979 name=Events-TransitionEvent>TransitionEvent</a></i></b>
981 <dd>
982 <p> The <code>TransitionEvent</code> interface provides specific
983 contextual information associated with transitions.</p>
985 <dl>
986 <dt> <b>IDL Definition</b>
988 <dd>
989 <div class=idl-code>
990 <pre>
991 interface TransitionEvent : Event {
992 readonly attribute DOMString propertyName;
993 readonly attribute float elapsedTime;
994 readonly attribute DOMString pseudoElement;
995 void initTransitionEvent(in DOMString typeArg,
996 in boolean canBubbleArg,
997 in boolean cancelableArg,
998 in DOMString propertyNameArg,
999 in float elapsedTimeArg,
1000 in DOMString pseudoElementArg);
1001 };
1002 </pre>
1003 </div>
1005 <dt> <b>Attributes</b>
1007 <dd>
1008 <dl>
1009 <dt> <code class=attribute-name><a
1010 id=Events-TransitionEvent-propertyName
1011 name=Events-TransitionEvent-propertyName>propertyName</a></code> of
1012 type <code>DOMString</code>, readonly
1014 <dd> The name of the CSS property associated with the transition.
1015 </dl>
1017 <dl>
1018 <dt> <code class=attribute-name><a
1019 id=Events-TransitionEvent-elapsedTime
1020 name=Events-TransitionEvent-elapsedTime>elapsedTime</a></code> of
1021 type <code>float</code>, readonly
1023 <dd> The amount of time the transition has been running, in seconds,
1024 when this event fired. Note that this value is not affected by the
1025 value of <a href="#transition-delay"><code
1026 class=property>transition-delay</code></a>.
1027 </dl>
1029 <dl>
1030 <dt> <code class=attribute-name><a
1031 id=Events-TransitionEvent-pseudoElement
1032 name=Events-TransitionEvent-pseudoElement>pseudoElement</a></code> of
1033 type <code>DOMString</code>, readonly
1035 <dd> The name (beginning with two colons) of the CSS pseudo-element on
1036 which the transition occured (in which case the target of the event
1037 is that pseudo-element's corresponding element), or the empty string
1038 if the transition occurred on an element (which means the target of
1039 the event is that element).
1040 </dl>
1042 <dt> <b>Methods</b>
1044 <dd>
1045 <dl>
1046 <dt> <code class=method-name><a
1047 id=Events-TransitionEvent-initTransitionEvent
1048 name=Events-TransitionEvent-initTransitionEvent>initTransitionEvent</a></code>
1051 <dd>
1052 <div class=method> The <code>initTransitionEvent</code> method is
1053 used to initialize the value of a <code>TransitionEvent</code>
1054 created through the <a
1055 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent"><code>DocumentEvent</code></a>
1056 interface. This method may only be called before the
1057 <code>TransitionEvent</code> has been dispatched via the
1058 <code>dispatchEvent</code> method, though it may be called multiple
1059 times during that phase if necessary. If called multiple times, the
1060 final invocation takes precedence.
1061 <p class=issue>Should new events being created still have init*Event
1062 methods?</p>
1064 <div class=parameters> <b>Parameters</b>
1065 <div class=paramtable>
1066 <dl>
1067 <dt> <code class=parameter-name>typeArg</code> of type
1068 <code>DOMString</code>
1070 <dd> Specifies the event type.<br>
1072 <dt> <code class=parameter-name>canBubbleArg</code> of type
1073 <code>boolean</code>
1075 <dd> Specifies whether or not the event can bubble.<br>
1077 <dt> <code class=parameter-name>cancelableArg</code> of type
1078 <code>boolean</code>
1080 <dd> Specifies whether or not the event's default action can be
1081 prevented. Since a TransitionEvent is purely for notification,
1082 there is no default action.<br>
1084 <dt> <code class=parameter-name>propertyNameArg</code> of type
1085 <code>DOMString</code>
1087 <dd> Specifies the name of the property associated with the <a
1088 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event"><code>Event</code></a>.
1089 (See the <a
1090 href="#Events-TransitionEvent-propertyName">propertyName</a>
1091 attribute.)
1093 <dt> <code class=parameter-name>elapsedTimeArg</code> of type
1094 <code>float</code>
1096 <dd> Specifies the amount of time, in seconds, the transition has
1097 been running at the time of initialization. (See the <a
1098 href="#Events-TransitionEvent-elapsedTime">elapsedTime</a>
1099 attribute.)
1101 <dt> <code class=parameter-name>pseudoElementArg</code> of type
1102 <code>DOMString</code>
1104 <dd> Specifies the pseudo-element on which the transition
1105 occurred. (See the <a
1106 href="#Events-TransitionEvent-pseudoElement">pseudoElement</a>
1107 attribute.) <span class=issue>Does adding this additional
1108 argument create any compatibility problems?</span>
1109 </dl>
1110 </div>
1111 </div>
1112 <!-- parameters -->
1113 <div> <b>No Return Value</b></div>
1115 <div> <b>No Exceptions</b></div>
1116 </div>
1117 <!-- method -->
1118 </dl>
1119 </dl>
1120 </dl>
1122 <p> There is one type of transition event available.
1124 <dl>
1125 <dt> <b>transitionend</b>
1127 <dd> The ‘<code class=property>transitionend</code>’ event
1128 occurs at the completion of the transition. In the case where a
1129 transition is removed before completion, such as if the
1130 transition-property is removed, then the event will not fire.
1131 <ul>
1132 <li>Bubbles: Yes
1134 <li>Cancelable: Yes
1136 <li>Context Info: propertyName, elapsedTime
1137 </ul>
1138 </dl>
1140 <h2 id=animation-of-property-types-><span class=secno>6. </span> Animation
1141 of property types</h2>
1143 <p> The following describes how each property type undergoes transition or
1144 animation.
1146 <ul>
1147 <li> <strong>color</strong>: interpolated via red, green, blue and alpha
1148 components (treating each as a number, see below).
1149 <div class=issue>Issue: Are the colors interpolated in premultiplied
1150 space or non-premultiplied space?</div>
1152 <li> <strong>length</strong>: interpolated as real numbers.
1154 <li> <strong>percentage</strong>: interpolated as real numbers.
1156 <li> <strong>integer</strong>: interpolated via discrete steps (whole
1157 numbers). The interpolation happens in real number space and is converted
1158 to an integer using <code>floor()</code>. <span class=issue> This floor
1159 behavior is inconsistent with SMIL Animation / SVG Animation. </span>
1161 <li> <strong>font weight</strong>: interpolated via discrete steps
1162 (multiples of 100). The interpolation happens in real number space and is
1163 converted to an integer by rounding to the nearest multiple of 100. <span
1164 class=issue> This round-to-nearest behavior is inconsistent with the
1165 floor behavior used for integer types, but probably should be consistent
1166 (one way or the other). </span>
1168 <li> <strong>number</strong>: interpolated as real (floating point)
1169 numbers.
1171 <li> <strong>transform list</strong>: see CSS Transforms specification <a
1172 href="#CSS3-TRANSFORMS"
1173 rel=biblioentry>[CSS3-TRANSFORMS]<!--{{!CSS3-TRANSFORMS}}--></a>.
1175 <li> <strong>rectangle</strong>: interpolated via the x, y, width and
1176 height components (treating each as a number).
1178 <li> <strong>visibility</strong>: if one of the values is ‘<code
1179 class=property>visible</code>’, interpolated as a discrete step
1180 where values of the timing function between 0 and 1 map to ‘<code
1181 class=property>visible</code>’ and other values of the timing
1182 function (which occur only at the start/end of the transition or as a
1183 result of ‘<code class=css>cubic-bezier()</code>’ functions
1184 with Y values outside of [0, 1]) map to the closer endpoint; if neither
1185 value is ‘<code class=property>visible</code>’ then not
1186 interpolable.
1188 <li> <strong>shadow</strong>: interpolated via the color, x, y and blur
1189 components (treating them as color and numbers where appropriate). In the
1190 case where there are lists of shadows, the shorter list is padded at the
1191 end with shadows whose color is transparent and all lengths (x, y, blur)
1192 are 0.
1194 <li> <strong>gradient</strong>: interpolated via the positions and colors
1195 of each stop. They must have the same type (radial or linear) and same
1196 number of stops in order to be animated. <span class=note>Note: <a
1197 href="#CSS3-IMAGES"
1198 rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a> may extend this
1199 definition.</span>
1201 <li> <strong>paint server</strong> (SVG): interpolation is only supported
1202 between: gradient to gradient and color to color. They then work as
1203 above.
1205 <li> <strong>list of above types</strong>: If the lists have the same
1206 number of items, each item in the list is interpolated using the rules
1207 above. Otherwise the interpolation is determined by the property rules.
1208 If the property extends its list by repeating values, then this repeated
1209 form will be used in the interpolation (<code
1210 class=property>'background-position'</code> is an example of a property
1211 that would transition between lists of different lengths). If the
1212 property does not allow extending its list, then no interpolation will
1213 occur.
1215 <li> <strong>a shorthand property</strong>: If any part of a shorthand can
1216 be animated, then interpolation is performed as if those animatable
1217 properties were individually specified.
1218 </ul>
1220 <p class=issue>Issue: Need to describe handling of out-of-range values that
1221 can result from cubic-bezier(). Clamping values to the allowed range is
1222 probably the best solution.
1224 <h2 id=animatable-properties-><span class=secno>7. </span> Animatable
1225 properties</h2>
1226 <!--
1227 As resolved in
1228 http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html
1229 -->
1231 <p>For properties that exist at the time this specification was developed,
1232 this specification defines whether and how they are animated. However,
1233 future CSS specifications may define additional properties, additional
1234 values for existing properties, or additional animation behavior of
1235 existing values. In order to describe new animation behaviors and to have
1236 the definition of animation behavior in a more appropriate location,
1237 future CSS specifications should include an "Animatable:" line in the
1238 summary of the property's definition (in addition to the other lines
1239 described in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>,
1240 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">section
1241 1.4.2</a>). This line should say "no" to indicate that a property cannot
1242 be animated or should reference an animation behavior (which may be one of
1243 the behaviors in the <a href="#animation-of-property-types-">Animation of
1244 property types</a> section above, or may be a new behavior) to define how
1245 the property animates. Such definitions override those given in this
1246 specification.
1248 <h3 id=properties-from-css-><span class=secno>7.1. </span> Properties from
1249 CSS</h3>
1251 <table class=animatable-properties>
1252 <tbody>
1253 <tr>
1254 <th>Property Name
1256 <th>Type
1258 <tr>
1259 <td>background-color
1261 <td>color
1263 <tr>
1264 <td>background-position
1266 <td>percentage, length
1268 <tr>
1269 <td>border-bottom-color
1271 <td>color
1273 <tr>
1274 <td>border-bottom-width
1276 <td>length
1278 <tr>
1279 <td>border-left-color
1281 <td>color
1283 <tr>
1284 <td>border-left-width
1286 <td>length
1288 <tr>
1289 <td>border-right-color
1291 <td>color
1293 <tr>
1294 <td>border-right-width
1296 <td>length
1298 <tr>
1299 <td>border-spacing
1301 <td>length
1303 <tr>
1304 <td>border-top-color
1306 <td>color
1308 <tr>
1309 <td>border-top-width
1311 <td>length
1313 <tr>
1314 <td>bottom
1316 <td>length, percentage
1318 <tr>
1319 <td>clip
1321 <td>rectangle
1323 <tr>
1324 <td>color
1326 <td>color
1328 <tr>
1329 <td>crop <span class=issue>css3-content will likely advance slower than
1330 this specification, in which case this definition should move
1331 there</span>
1333 <td>rectangle
1335 <tr>
1336 <td>font-size
1338 <td>length, percentage
1340 <tr>
1341 <td>font-weight
1343 <td>font weight
1345 <tr>
1346 <td>height
1348 <td>length, percentage
1350 <tr>
1351 <td>left
1353 <td>length, percentage
1355 <tr>
1356 <td>letter-spacing
1358 <td>length
1360 <tr>
1361 <td>line-height
1363 <td>number, length, percentage
1365 <tr>
1366 <td>margin-bottom
1368 <td>length
1370 <tr>
1371 <td>margin-left
1373 <td>length
1375 <tr>
1376 <td>margin-right
1378 <td>length
1380 <tr>
1381 <td>margin-top
1383 <td>length
1385 <tr>
1386 <td>max-height
1388 <td>length, percentage
1390 <tr>
1391 <td>max-width
1393 <td>length, percentage
1395 <tr>
1396 <td>min-height
1398 <td>length, percentage
1400 <tr>
1401 <td>min-width
1403 <td>length, percentage
1405 <tr>
1406 <td>opacity
1408 <td>number
1410 <tr>
1411 <td>outline-color
1413 <td>color
1415 <tr>
1416 <td>outline-offset
1418 <td>integer
1420 <tr>
1421 <td>outline-width
1423 <td>length
1425 <tr>
1426 <td>padding-bottom
1428 <td>length
1430 <tr>
1431 <td>padding-left
1433 <td>length
1435 <tr>
1436 <td>padding-right
1438 <td>length
1440 <tr>
1441 <td>padding-top
1443 <td>length
1445 <tr>
1446 <td>right
1448 <td>length, percentage
1450 <tr>
1451 <td>text-indent
1453 <td>length, percentage
1455 <tr>
1456 <td>text-shadow
1458 <td>shadow
1460 <tr>
1461 <td>top
1463 <td>length, percentage
1465 <tr>
1466 <td>vertical-align
1468 <td>length, percentage
1470 <tr>
1471 <td>visibility
1473 <td>visibility
1475 <tr>
1476 <td>width
1478 <td>length, percentage
1480 <tr>
1481 <td>word-spacing
1483 <td>length, percentage
1485 <tr>
1486 <td>z-index
1488 <td>integer
1489 </table>
1491 <p class=issue> This list omits the following properties that Gecko can
1492 animate, and which likely should be included: background-size,
1493 border-*-radius, box-shadow, column-count, column-gap, column-rule-color,
1494 column-rule-width, column-width, font-size-adjust, font-stretch,
1495 marker-offset, text-decoration-color, transform, transform-origin.
1497 <h3 id=properties-from-svg-><span class=secno>7.2. </span> Properties from
1498 SVG</h3>
1500 <p> All properties defined as animatable in the SVG specification, provided
1501 they are one of the property types listed above.</p>
1502 <!-- <table>
1503 <tr>
1504 <th>Property Name</th><th>Type</th>
1505 </tr>
1506 <tr>
1507 <td>stop-color</td><td>color</td>
1508 </tr>
1509 <tr>
1510 <td>stop-opacity</td><td>float</td>
1511 </tr>
1512 <tr>
1513 <td>fill</td><td>paint server</td>
1514 </tr>
1515 <tr>
1516 <td>fill-opacity</td><td>float</td>
1517 </tr>
1518 <tr>
1519 <td>stroke</td><td>paint server</td>
1520 </tr>
1521 <tr>
1522 <td>stroke-dasharray</td><td>list of numbers</td>
1523 </tr>
1524 <tr>
1525 <td>stroke-dashoffset</td><td>number</td>
1526 </tr>
1527 <tr>
1528 <td>stroke-miterlimit</td><td>number</td>
1529 </tr>
1530 <tr>
1531 <td>stroke-opacity</td><td>float</td>
1532 </tr>
1533 <tr>
1534 <td>stroke-width</td><td>float</td>
1535 </tr>
1536 <tr>
1537 <td>viewport-fill</td><td>color</td>
1538 </tr>
1539 <tr>
1540 <td>viewport-fill-opacity</td><td>color</td>
1541 </tr>
1542 </table> -->
1544 <h2 id=references><span class=secno>8. </span>References</h2>
1546 <h3 class=no-num id=normative-references>Normative references</h3>
1547 <!--begin-normative-->
1548 <!-- Sorted by label -->
1550 <dl class=bibliography>
1551 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
1552 <!---->
1554 <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS]
1556 <dd>Simon Fraser; et al. <a
1557 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"><cite>CSS
1558 Transforms.</cite></a> 28 February 2012. W3C Working Draft. (Work in
1559 progress.) URL: <a
1560 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/">http://www.w3.org/TR/2012/WD-css3-transforms-20120228/</a>
1561 </dd>
1562 <!---->
1563 </dl>
1564 <!--end-normative-->
1566 <h3 class=no-num id=other-references>Other references</h3>
1567 <!--begin-informative-->
1568 <!-- Sorted by label -->
1570 <dl class=bibliography>
1571 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
1572 <!---->
1574 <dt id=CSS21>[CSS21]
1576 <dd>Bert Bos; et al. <a
1577 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
1578 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
1579 2011. W3C Recommendation. URL: <a
1580 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
1581 </dd>
1582 <!---->
1584 <dt id=CSS3-IMAGES>[CSS3-IMAGES]
1586 <dd>Elika J. Etemad; Tab Atkins Jr. <a
1587 href="http://www.w3.org/TR/2012/WD-css3-images-20120112/"><cite>CSS Image
1588 Values and Replaced Content Module Level 3.</cite></a> 12 January 2012.
1589 W3C Working Draft. (Work in progress.) URL: <a
1590 href="http://www.w3.org/TR/2012/WD-css3-images-20120112/">http://www.w3.org/TR/2012/WD-css3-images-20120112/</a>
1591 </dd>
1592 <!---->
1593 </dl>
1594 <!--end-informative-->
1596 <h2 class=no-num id=property-index>Property index</h2>
1597 <!--begin-properties-->
1599 <table class=proptable>
1600 <thead>
1601 <tr>
1602 <th>Property
1604 <th>Values
1606 <th>Initial
1608 <th>Applies to
1610 <th>Inh.
1612 <th>Percentages
1614 <th>Media
1616 <tbody>
1617 <tr>
1618 <th><a class=property href="#transition">transition</a>
1620 <td>[<‘transition-property’> ||
1621 <‘transition-duration’> ||
1622 <‘transition-timing-function’> ||
1623 <‘transition-delay’> [,
1624 [<‘transition-property’> ||
1625 <‘transition-duration’> ||
1626 <‘transition-timing-function’> ||
1627 <‘transition-delay’>]]*
1629 <td>see individual properties
1631 <td>all elements, :before and :after pseudo elements
1633 <td>no
1635 <td>N/A
1637 <td>interactive
1639 <tr>
1640 <th><a class=property href="#transition-delay">transition-delay</a>
1642 <td><time> [, <time>]*
1644 <td>0s
1646 <td>all elements, :before and :after pseudo elements
1648 <td>no
1650 <td>N/A
1652 <td>interactive
1654 <tr>
1655 <th><a class=property
1656 href="#transition-duration">transition-duration</a>
1658 <td><time> [, <time>]*
1660 <td>0s
1662 <td>all elements, :before and :after pseudo elements
1664 <td>no
1666 <td>N/A
1668 <td>interactive
1670 <tr>
1671 <th><a class=property
1672 href="#transition-property">transition-property</a>
1674 <td>none | [ all | <IDENT> ] [ ‘,’ [ all |
1675 <IDENT> ] ]*
1677 <td>all
1679 <td>all elements, :before and :after pseudo elements
1681 <td>no
1683 <td>N/A
1685 <td>visual
1687 <tr>
1688 <th><a class=property
1689 href="#transition-timing-function">transition-timing-function</a>
1691 <td>ease | linear | ease-in | ease-out | ease-in-out | step-start |
1692 step-end | steps(<integer>[, start | end ]) |
1693 cubic-bezier(<number>, <number>, <number>,
1694 <number>) [, [ ease | linear | ease-in | ease-out | ease-in-out |
1695 step-start | step-end | steps(<number>[, start | end ]) |
1696 cubic-bezier(<number>, <number>, <number>,
1697 <number>) ] ]*
1699 <td>ease
1701 <td>all elements, :before and :after pseudo elements
1703 <td>no
1705 <td>N/A
1707 <td>interactive
1708 </table>
1709 <!--end-properties-->
1711 <h2 class=no-num id=index>Index</h2>
1712 <!--begin-index-->
1714 <ul class=indexlist>
1715 <li>combined duration, <a href="#combined-duration"
1716 title="combined duration"><strong>3.</strong></a>
1718 <li>transition, <a href="#transition"
1719 title=transition><strong>2.5.</strong></a>
1721 <li>transition-delay, <a href="#transition-delay"
1722 title=transition-delay><strong>2.4.</strong></a>
1724 <li>transition-duration, <a href="#transition-duration"
1725 title=transition-duration><strong>2.2.</strong></a>
1727 <li>transition-property, <a href="#transition-property"
1728 title=transition-property><strong>2.1.</strong></a>
1730 <li>transition-timing-function, <a href="#transition-timing-function"
1731 title=transition-timing-function><strong>2.3.</strong></a>
1732 </ul>
1733 <!--end-index-->
1734 </html>
1735 <!-- Keep this comment at the end of the file
1736 Local variables:
1737 mode: sgml
1738 sgml-default-doctype-name:"html"
1739 sgml-minimize-attributes:t
1740 End:
1741 -->
