css3-transitions/Overview.html@ab47414d690c
css3-transitions/Overview.html
Wed, 09 Jan 2013 07:37:20 +1100
- author
- Dean Jackson <dino@apple.com>
- date
- Wed, 09 Jan 2013 07:37:20 +1100
- changeset 7174
- ab47414d690c
- parent 6739
- f4ccc8c2ecf0
- child 7182
- a38c76f0336b
- permissions
- -rw-r--r--
- Cleaned up timing function equivalence description ("1.0" -> "1")
http://lists.w3.org/Archives/Public/www-style/2012Dec/0274.html
[Note: I'm seeing a lot of other changes in the generated output after
running 'make'. I assume these are all correct and that previous commits
had simply forgot to update the generated Overview.html. Fingers crossed.]
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 profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
6 <title>CSS Transitions</title>
8 <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
9 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
10 rel=dcterms.rights>
11 <meta content="CSS Transitions" name=dcterms.title>
12 <meta content=text name=dcterms.type>
13 <meta content=2013-01-09 name=dcterms.issued>
14 <meta content="http://dev.w3.org/csswg/css3-transitions/"
15 name=dcterms.creator>
16 <meta content=W3C name=dcterms.publisher>
17 <meta content="http://www.w3.org/TR/2013/ED-css3-transitions-20130109/"
18 name=dcterms.identifier>
19 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
20 <link href="../default.css" rel=stylesheet type="text/css">
21 <style type="text/css">
22 table.animatable-properties {
23 border-collapse: collapse;
24 }
25 table.animatable-properties td {
26 padding: 0.2em 1em;
27 border: 1px solid black;
28 }
29 div.prod { margin: 1em 2em; }
30 </style>
31 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
32 type="text/css">
34 <body>
35 <div class=head> <!--begin-logo-->
36 <p><a href="http://www.w3.org/"><img alt=W3C height=48
37 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
39 <h1>CSS Transitions</h1>
41 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 January 2013</h2>
43 <dl>
44 <dt>This version:
46 <dd> <a href="http://www.w3.org/TR/2013/ED-css3-transitions-20130109/">
47 http://dev.w3.org/csswg/css3-transitions/</a>
48 <!--http://www.w3.org/TR/2013/WD-css3-transitions-20130109/-->
50 <dt>Latest version:
52 <dd><a href="http://www.w3.org/TR/css3-transitions/">
53 http://www.w3.org/TR/css3-transitions/</a>
55 <dt>Editor's draft:
57 <dd><a
58 href="http://dev.w3.org/csswg/css3-transitions/">http://dev.w3.org/csswg/css3-transitions/</a>
60 <dt>Previous version:
62 <dd><a href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">
63 http://www.w3.org/TR/2012/WD-css3-transitions-20120403/</a>
65 <dt id=editors-list>Editors:
67 <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a
68 href="http://www.apple.com/">Apple Inc</a>)
70 <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a
71 href="http://www.apple.com/">Apple Inc</a>)
73 <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a
74 href="http://www.apple.com/">Apple Inc</a>)
76 <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a>
77 (<a class=org href="http://www.mozilla.org/">Mozilla</a>)
79 <dt>Issues list:
81 <dd><a
82 href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transitions&resolution=---&cmdtype=doit">in
83 Bugzilla</a>
85 <dt>Discussion:
87 <dd><a
88 href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
89 with subject line “<kbd>[css3-transitions] <var>… message topic
90 …</var></kbd>”
92 <dt>Test suite:
94 <dd>none yet
95 </dl>
96 <!--begin-copyright-->
97 <p class=copyright><a
98 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
99 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
100 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
101 href="http://www.csail.mit.edu/"><abbr
102 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
103 href="http://www.ercim.eu/"><abbr
104 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
105 <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
106 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
107 <a
108 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
109 and <a
110 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
111 use</a> rules apply.</p>
112 <!--end-copyright-->
113 <hr title="Separator for header">
114 </div>
116 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
118 <p>CSS Transitions allows property changes in CSS values to occur smoothly
119 over a specified duration.
121 <h2 class="no-num no-toc" id=status>Status of this document</h2>
122 <!--begin-status-->
124 <p>This is a public copy of the editors' draft. It is provided for
125 discussion only and may change at any moment. Its publication here does
126 not imply endorsement of its contents by W3C. Don't cite this document
127 other than as work in progress.
129 <p>The (<a
130 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
131 mailing list <a
132 href="mailto:www-style@w3.org?Subject=%5Bcss3-transitions%5D%20PUT%20SUBJECT%20HERE">
133 www-style@w3.org</a> (see <a
134 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
135 discussion of this specification. When sending e-mail, please put the text
136 “css3-transitions” in the subject, preferably like this:
137 “[<!---->css3-transitions<!---->] <em>…summary of comment…</em>”
139 <p>This document was produced by the <a href="/Style/CSS/members">CSS
140 Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
142 <p>This document was produced by a group operating under the <a
143 href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
144 Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
145 rel=disclosure>public list of any patent disclosures</a> made in
146 connection with the deliverables of the group; that page also includes
147 instructions for disclosing a patent. An individual who has actual
148 knowledge of a patent which the individual believes contains <a
149 href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
150 Claim(s)</a> must disclose the information in accordance with <a
151 href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
152 W3C Patent Policy</a>.</p>
153 <!--end-status-->
155 <p> The <a href=ChangeLog>list of changes made to this specification</a> is
156 available.
158 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
159 <!--begin-toc-->
161 <ul class=toc>
162 <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
164 <li><a href="#transitions"><span class=secno>2. </span>Transitions</a>
165 <ul class=toc>
166 <li><a href="#transition-property-property"><span class=secno>2.1.
167 </span> The <code class=property>'transition-property'</code> Property
168 </a>
170 <li><a href="#transition-duration-property"><span class=secno>2.2.
171 </span> The <code class=property>'transition-duration'</code> Property
172 </a>
174 <li><a href="#transition-timing-function-property"><span
175 class=secno>2.3. </span> The <code
176 class=property>'transition-timing-function'</code> Property </a>
178 <li><a href="#transition-delay-property"><span class=secno>2.4. </span>
179 The <code class=property>'transition-delay'</code> Property </a>
181 <li><a href="#transition-shorthand-property"><span class=secno>2.5.
182 </span> The <code class=property>'transition'</code> Shorthand Property
183 </a>
184 </ul>
186 <li><a href="#starting"><span class=secno>3. </span> Starting of
187 transitions </a>
189 <li><a href="#reversing"><span class=secno>4. </span> Automatically
190 reversing interrupted transitions </a>
192 <li><a href="#transition-events"><span class=secno>5. </span> Transition
193 Events </a>
195 <li><a href="#animatable-types"><span class=secno>6. </span> Animation of
196 property types </a>
198 <li><a href="#animatable-properties"><span class=secno>7. </span>
199 Animatable properties </a>
200 <ul class=toc>
201 <li><a href="#animatable-css"><span class=secno>7.1. </span> Properties
202 from CSS </a>
204 <li><a href="#animatable-svg"><span class=secno>7.2. </span> Properties
205 from SVG </a>
206 </ul>
208 <li><a href="#acknowledgments"><span class=secno>8.
209 </span>Acknowledgments</a>
211 <li><a href="#references"><span class=secno>9. </span>References</a>
212 <ul class=toc>
213 <li class=no-num><a href="#normative-references">Normative
214 references</a>
216 <li class=no-num><a href="#other-references">Other references</a>
217 </ul>
219 <li class=no-num><a href="#property-index">Property index</a>
221 <li class=no-num><a href="#index">Index</a>
222 </ul>
223 <!--end-toc-->
225 <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
227 <p><em>This section is not normative.</em>
229 <p> This document introduces new CSS features to enable <em>implicit
230 transitions</em>, which describe how CSS properties can be made to change
231 smoothly from one value to another over a given duration.
233 <h2 id=transitions><span class=secno>2. </span><a
234 id=transitions->Transitions</a></h2>
236 <p> Normally when the value of a CSS property changes, the rendered result
237 is instantly updated, with the affected elements immediately changing from
238 the old property value to the new property value. This section describes a
239 way to specify transitions using new CSS properties. These properties are
240 used to animate smoothly from the old state to the new state over time.
242 <p> For example, suppose that transitions of one second have been defined
243 on the <code class=property>'left'</code> and <code
244 class=property>'background-color'</code> properties. The following diagram
245 illustrates the effect of updating those properties on an element, in this
246 case moving it to the right and changing the background from red to blue.
247 This assumes other transition parameters still have their default values.
249 <div class=figure> <img alt="" src=transition1.png></div>
251 <p class=caption> Transitions of <code class=property>'left'</code> and
252 <code class=property>'background-color'</code>
254 <p> Transitions are a presentational effect. The computed value of a
255 property transitions over time from the old value to the new value.
256 Therefore if a script queries the computed style of a property as it is
257 transitioning, it will see an intermediate value that represents the
258 current animated value of the property.
260 <p> Only animatable CSS properties can be transitioned. See the table at
261 the end of this document for a list of properties that are animatable.
263 <p> The transition for a property is defined using a number of new
264 properties. For example:
266 <div class=example>
267 <p style="display:none"> Example(s):
269 <pre>
270 div {
271 transition-property: opacity;
272 transition-duration: 2s;
273 }
274 </pre>
275 The above example defines a transition on the <code
276 class=property>'opacity'</code> property that, when a new value is
277 assigned to it, will cause a smooth change between the old value and the
278 new value over a period of two seconds.</div>
280 <p> Each of the transition properties accepts a comma-separated list,
281 allowing multiple transitions to be defined, each acting on a different
282 property. In this case, the individual transitions take their parameters
283 from the same index in all the lists. For example:
285 <div class=example>
286 <p style="display:none"> Example(s):
288 <pre>
289 div {
290 transition-property: opacity, left;
291 transition-duration: 2s, 4s;
292 }
294 </pre>
295 This will cause the <code class=property>'opacity'</code> property to
296 transition over a period of two seconds and the left property to
297 transition over a period of four seconds.</div>
299 <p id=list-matching> In the case where the lists of values in transition
300 properties do not have the same length, the length of the ‘<a
301 href="#transition-property"><code
302 class=property>transition-property</code></a>’ list determines the
303 number of items in each list examined when starting transitions. The lists
304 are matched up from the first value: excess values at the end are not
305 used. If one of the other properties doesn't have enough comma-separated
306 values to match the number of values of ‘<a
307 href="#transition-property"><code
308 class=property>transition-property</code></a>’, the UA must calculate
309 its used value by repeating the list of values until there are enough.
310 This truncation or repetition does not affect the computed value. <span
311 class=note> Note: This is analogous to the behavior of the ‘<code
312 class=css>background-*</code>’ properties, with ‘<code
313 class=property>background-image</code>’ analogous to ‘<a
314 href="#transition-property"><code
315 class=property>transition-property</code></a>’. </span>
317 <div class=example>
318 <p style="display:none"> Example(s):
320 <pre>
321 div {
322 transition-property: opacity, left, top, width;
323 transition-duration: 2s, 1s;
324 }
325 </pre>
326 The above example defines a transition on the <code
327 class=property>'opacity'</code> property of 2 seconds duration, a
328 transition on the <code class=property>'left'</code> property of 1 second
329 duration, a transition on the <code class=property>'top'</code> property
330 of 2 seconds duration and a transition on the <code
331 class=property>'width'</code> property of 1 second duration.</div>
332 <!-- ======================================================================================================= -->
334 <h3 id=transition-property-property><span class=secno>2.1. </span><a
335 id=the-transition-property-property-> The <code
336 class=property>'transition-property'</code> Property </a></h3>
338 <p> The <a href="#transition-property"><code
339 class=property>'transition-property'</code></a> property specifies the
340 name of the CSS property to which the transition is applied.
342 <div class=issue> We may ultimately want to support a keypath syntax for
343 this property. A keypath syntax would enable different transitions to be
344 specified for components of a property. For example the blur of a shadow
345 could have a different transition than the color of a shadow.</div>
347 <table class=propdef>
348 <tbody>
349 <tr>
350 <td> <em>Name:</em>
352 <td> <dfn id=transition-property>transition-property</dfn>
354 <tr>
355 <td> <em>Value:</em>
357 <td> none | <a
358 href="#single-transition-property"><single-transition-property></a>
359 [ ‘<code class=css>,</code>’ <a
360 href="#single-transition-property"><single-transition-property></a>
361 ]*
363 <tr>
364 <td> <em>Initial:</em>
366 <td> all
368 <tr>
369 <td> <em>Applies to:</em>
371 <td> all elements, :before and :after pseudo elements
373 <tr>
374 <td> <em>Inherited:</em>
376 <td> no
378 <tr>
379 <td> <em>Animatable:</em>
381 <td> no
383 <tr>
384 <td> <em>Percentages:</em>
386 <td> N/A
388 <tr>
389 <td> <em>Media:</em>
391 <td> visual
393 <tr>
394 <td> <em>Computed value:</em>
396 <td> Same as specified value.
398 <tr>
399 <td> <em>Canonical order:</em>
401 <td> <abbr title="follows order of property value definition">per
402 grammar</abbr>
403 </table>
405 <div class=prod> <dfn
406 id=single-transition-property><single-transition-property></dfn> =
407 all | <IDENT></div>
409 <p> A value of ‘<code class=property>none</code>’ means that no
410 property will transition. Otherwise, a list of properties to be
411 transitioned, or the keyword ‘<code class=property>all</code>’ which
412 indicates that all properties are to be transitioned, is given.
414 <p> If one of the identifiers listed is not a recognized property name or
415 is not an animatable property, the implementation must still start
416 transitions on the animatable properties in the list using the duration,
417 delay, and timing function at their respective indices in the lists for
418 ‘<a href="#transition-duration"><code
419 class=property>transition-duration</code></a>’, ‘<a
420 href="#transition-delay"><code
421 class=property>transition-delay</code></a>’, and ‘<a
422 href="#transition-timing-function"><code
423 class=property>transition-timing-function</code></a>’. In other words,
424 unrecognized or non-animatable properties must be kept in the list to
425 preserve the matching of indices.
427 <p class=issue> Are ‘<code class=property>none</code>’, ‘<code
428 class=property>inherit</code>’, and ‘<code
429 class=property>initial</code>’ allowed as items in a list of identifiers
430 (of length greater than one)?
432 <p> For the keyword ‘<code class=property>all</code>’, or if one of the
433 identifiers listed is a shorthand property, implementations must start
434 transitions for any of its longhand sub-properties that are animatable
435 (or, for ‘<code class=property>all</code>’, all animatable
436 properties), using the duration, delay, and timing function at the index
437 corresponding to the shorthand.
439 <p> If a property is specified multiple times in the value of ‘<a
440 href="#transition-property"><code
441 class=property>transition-property</code></a>’ (either on its own, via a
442 shorthand that contains it, or via the ‘<code
443 class=property>all</code>’ value), then the transition that starts uses
444 the duration, delay, and timing function at the index corresponding to the
445 <em>last</em> item in the value of ‘<a href="#transition-property"><code
446 class=property>transition-property</code></a>’ that calls for animating
447 that property.
449 <p class=note> Note: The <code class=property>all</code> value and
450 shorthand properties work in similar ways, so the <code
451 class=property>all</code> value is just like a shorthand that covers all
452 properties.</p>
453 <!-- ======================================================================================================= -->
455 <h3 id=transition-duration-property><span class=secno>2.2. </span><a
456 id=the-transition-duration-property-> The <code
457 class=property>'transition-duration'</code> Property </a></h3>
459 <p> The <a href="#transition-duration"><code
460 class=property>'transition-duration'</code></a> property defines the
461 length of time that a transition takes.
463 <table class=propdef>
464 <tbody>
465 <tr>
466 <td> <em>Name:</em>
468 <td> <dfn id=transition-duration>transition-duration</dfn>
470 <tr>
471 <td> <em>Value:</em>
473 <td> <span><time></span> [, <span><time></span>]*
475 <tr>
476 <td> <em>Initial:</em>
478 <td> 0s
480 <tr>
481 <td> <em>Applies to:</em>
483 <td> all elements, :before and :after pseudo elements
485 <tr>
486 <td> <em>Inherited:</em>
488 <td> no
490 <tr>
491 <td> <em>Animatable:</em>
493 <td> no
495 <tr>
496 <td> <em>Percentages:</em>
498 <td> N/A
500 <tr>
501 <td> <em>Media:</em>
503 <td> interactive
505 <tr>
506 <td> <em>Computed value:</em>
508 <td> Same as specified value.
510 <tr>
511 <td> <em>Canonical order:</em>
513 <td> <abbr title="follows order of property value definition">per
514 grammar</abbr>
515 </table>
517 <p> This property specifies how long the transition from the old value to
518 the new value should take. By default the value is ‘<code
519 class=css>0s</code>’, meaning that the transition is immediate (i.e.
520 there will be no animation). A negative value for <a
521 href="#transition-duration"><code
522 class=property>transition-duration</code></a> renders the declaration
523 invalid.</p>
524 <!-- =======================================================================================================
525 -->
527 <h3 id=transition-timing-function-property><span class=secno>2.3. </span><a
528 id="transition-timing-function_tag"> The <code
529 class=property>'transition-timing-function'</code> Property </a></h3>
531 <p> The <a href="#transition-timing-function"><code
532 class=property>'transition-timing-function'</code></a> property describes
533 how the intermediate values used during a transition will be calculated.
534 It allows for a transition to change speed over its duration. These
535 effects are commonly called <em>easing</em> functions. In either case, a
536 mathematical function that provides a smooth curve is used.
538 <p> Timing functions are either defined as a stepping function or a <a
539 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
540 Bézier curve</a>. The timing function takes as its input the current
541 elapsed percentage of the transition duration and outputs the percentage
542 of the way the transition is from its start value to its end value. How
543 this output is used is defined by the <a
544 href="#animatable-types">interpolation rules</a> for the value type.
546 <p> A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
547 function is defined by a number that divides the domain of operation into
548 equally sized intervals. Each subsequent interval is a equal step closer
549 to the goal state. The function also specifies whether the change in
550 output percentage happens at the start or end of the interval (in other
551 words, if 0% on the input percentage is the point of initial change).
553 <div class=figure> <img
554 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."
555 src=step.png></div>
557 <p class=caption> Step timing functions
559 <p> A <a
560 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
561 Bézier curve</a> is defined by four control points, P<sub>0</sub> through
562 P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> are always
563 set to (0,0) and (1,1). The <a href="#transition-timing-function"><code
564 class=property>'transition-timing-function'</code></a> property is used to
565 specify the values for points P<sub>1</sub> and P<sub>2</sub>. These can
566 be set to preset values using the keywords listed below, or can be set to
567 specific values using the <code class=css>'cubic-bezier'</code> function.
568 In the <code class=css>'cubic-bezier'</code> function, P<sub>1</sub> and
569 P<sub>2</sub> are each specified by both an X and Y value.
571 <div class=figure> <img
572 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."
573 src=TimingFunction.png></div>
575 <p class=caption> Bézier Timing Function Control Points
577 <table class=propdef>
578 <tbody>
579 <tr>
580 <td> <em>Name:</em>
582 <td> <dfn id=transition-timing-function>transition-timing-function</dfn>
584 <tr>
585 <td> <em>Value:</em>
587 <td> <a
588 href="#single-transition-timing-function"><single-transition-timing-function></a>
589 [ ‘<code class=css>,</code>’ <a
590 href="#single-transition-timing-function"><single-transition-timing-function></a>
591 ]*
593 <tr>
594 <td> <em>Initial:</em>
596 <td> ease
598 <tr>
599 <td> <em>Applies to:</em>
601 <td> all elements, :before and :after pseudo elements
603 <tr>
604 <td> <em>Inherited:</em>
606 <td> no
608 <tr>
609 <td> <em>Animatable:</em>
611 <td> no
613 <tr>
614 <td> <em>Percentages:</em>
616 <td> N/A
618 <tr>
619 <td> <em>Media:</em>
621 <td> interactive
623 <tr>
624 <td> <em>Computed value:</em>
626 <td> Same as specified value.
628 <tr>
629 <td> <em>Canonical order:</em>
631 <td> <abbr title="follows order of property value definition">per
632 grammar</abbr>
633 </table>
635 <div class=prod> <dfn
636 id=single-transition-timing-function><single-transition-timing-function></dfn>
637 = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end
638 | steps(<integer>[, [ start | end ] ]?) |
639 cubic-bezier(<number>, <number>, <number>,
640 <number>)</div>
642 <p> The timing functions have the following definitions.
644 <dl>
645 <dt> ease
647 <dd> The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
649 <dt> linear
651 <dd> The linear function is equivalent to cubic-bezier(0, 0, 1, 1).
653 <dt> ease-in
655 <dd> The ease-in function is equivalent to cubic-bezier(0.42, 0, 1, 1).
657 <dt> ease-out
659 <dd> The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1).
661 <dt> ease-in-out
663 <dd> The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58,
664 1)
666 <dt> step-start
668 <dd> The step-start function is equivalent to steps(1, start).
670 <dt> step-end
672 <dd> The step-end function is equivalent to steps(1, end).
674 <dt> steps(<integer>[, [ start | end ] ]?)
676 <dd> Specifies a stepping function, described above, taking two
677 parameters. The first parameter specifies the number of intervals in the
678 function. It must be a positive integer (greater than 0). The second
679 parameter, which is optional, is either the value ‘<code
680 class=property>start</code>’ or ‘<code class=property>end</code>’,
681 and specifies the point at which the change of values occur within the
682 interval. If the second parameter is omitted, it is given the value
683 ‘<code class=property>end</code>’.
685 <dt> cubic-bezier(<number>, <number>, <number>,
686 <number>)
688 <dd> Specifies a <a
689 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier
690 curve</a>. The four values specify points P<sub>1</sub> and P<sub>2</sub>
691 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0,
692 1] or the definition is invalid. The y values can exceed this range.
693 </dl>
694 <!-- ======================================================================================================= -->
696 <h3 id=transition-delay-property><span class=secno>2.4. </span><a
697 id=the-transition-delay-property-> The <code
698 class=property>'transition-delay'</code> Property </a></h3>
700 <p> The <a href="#transition-delay"><code
701 class=property>'transition-delay'</code></a> property defines when the
702 transition will start. It allows a transition to begin execution some some
703 period of time from when it is applied. A <a
704 href="#transition-delay"><code
705 class=property>'transition-delay'</code></a> value of ‘<code
706 class=css>0s</code>’ means the transition will execute as soon as the
707 property is changed. Otherwise, the value specifies an offset from the
708 moment the property is changed, and the transition will delay execution by
709 that offset.
711 <p> If the value for <a href="#transition-delay"><code
712 class=property>'transition-delay'</code></a> is a negative time offset
713 then the transition will execute the moment the property is changed, but
714 will appear to have begun execution at the specified offset. That is, the
715 transition will appear to begin part-way through its play cycle. In the
716 case where a transition has implied starting values and a negative <a
717 href="#transition-delay"><code
718 class=property>'transition-delay'</code></a>, the starting values are
719 taken from the moment the property is changed.
721 <table class=propdef>
722 <tbody>
723 <tr>
724 <td> <em>Name:</em>
726 <td> <dfn id=transition-delay>transition-delay</dfn>
728 <tr>
729 <td> <em>Value:</em>
731 <td> <span><time></span> [, <span><time></span>]*
733 <tr>
734 <td> <em>Initial:</em>
736 <td> 0s
738 <tr>
739 <td> <em>Applies to:</em>
741 <td> all elements, :before and :after pseudo elements
743 <tr>
744 <td> <em>Inherited:</em>
746 <td> no
748 <tr>
749 <td> <em>Animatable:</em>
751 <td> no
753 <tr>
754 <td> <em>Percentages:</em>
756 <td> N/A
758 <tr>
759 <td> <em>Media:</em>
761 <td> interactive
763 <tr>
764 <td> <em>Computed value:</em>
766 <td> Same as specified value.
768 <tr>
769 <td> <em>Canonical order:</em>
771 <td> <abbr title="follows order of property value definition">per
772 grammar</abbr>
773 </table>
774 <!-- ======================================================================================================= -->
776 <h3 id=transition-shorthand-property><span class=secno>2.5. </span><a
777 id=the-transition-shorthand-property-> The <code
778 class=property>'transition'</code> Shorthand Property </a></h3>
780 <p> The <a href="#transition"><code class=property>'transition'</code></a>
781 shorthand property combines the four properties described above into a
782 single property.
784 <table class=propdef>
785 <tbody>
786 <tr>
787 <td> <em>Name:</em>
789 <td> <dfn id=transition>transition</dfn>
791 <tr>
792 <td> <em>Value:</em>
794 <td> <a href="#single-transition"><single-transition></a> [
795 ‘<code class=css>,</code>’ <a
796 href="#single-transition"><single-transition></a> ]*
798 <tr>
799 <td> <em>Initial:</em>
801 <td> see individual properties
803 <tr>
804 <td> <em>Applies to:</em>
806 <td> all elements, :before and :after pseudo elements
808 <tr>
809 <td> <em>Inherited:</em>
811 <td> no
813 <tr>
814 <td> <em>Animatable:</em>
816 <td> no
818 <tr>
819 <td> <em>Percentages:</em>
821 <td> N/A
823 <tr>
824 <td> <em>Media:</em>
826 <td> interactive
828 <tr>
829 <td> <em>Computed value:</em>
831 <td> Same as specified value.
833 <tr>
834 <td> <em>Canonical order:</em>
836 <td> <abbr title="follows order of property value definition">per
837 grammar</abbr>
838 </table>
840 <div class=prod> <dfn id=single-transition><single-transition></dfn>
841 = [ none | <a
842 href="#single-transition-property"><single-transition-property></a>
843 ] || <span><time></span> || <a
844 href="#single-transition-timing-function"><single-transition-timing-function></a>
845 || <span><time></span></div>
847 <p> Note that order is important within the items in this property: the
848 first value that can be parsed as a time is assigned to the
849 transition-duration, and the second value that can be parsed as a time is
850 assigned to transition-delay.
852 <p class=issue> An alternative proposal is to accept the font shorthand
853 approach of using a "/" character between the values of the same type.
854 e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds.
856 <p> If there is more than one <a
857 href="#single-transition"><single-transition></a> in the shorthand,
858 and any of the transitions has ‘<code class=css>none</code>’ as the <a
859 href="#single-transition-property"><single-transition-property></a>,
860 then the declaration is invalid.
862 <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
864 <p> When the computed value of an animatable property changes,
865 implementations must decide what transitions to start based on the values
866 of the ‘<a href="#transition-property"><code
867 class=property>transition-property</code></a>’, ‘<a
868 href="#transition-duration"><code
869 class=property>transition-duration</code></a>’, ‘<a
870 href="#transition-timing-function"><code
871 class=property>transition-timing-function</code></a>’, and ‘<a
872 href="#transition-delay"><code
873 class=property>transition-delay</code></a>’ properties at the time the
874 animatable property would first have its new computed value.
876 <div class=example id=manual-reversing-example>
877 <p style="display:none"> Example(s):
879 <p>This provides a way for authors to specify different values of the
880 ‘<code class=css>transition-*</code>’ properties for the
881 “forward” and “reverse” transitions (but see <a
882 href="#reversing">below</a> for special reversing behavior when an
883 <em>incomplete</em> transition is interrupted). Authors can specify the
884 value of ‘<a href="#transition-duration"><code
885 class=property>transition-duration</code></a>’, ‘<a
886 href="#transition-timing-function"><code
887 class=property>transition-timing-function</code></a>’, or ‘<a
888 href="#transition-delay"><code
889 class=property>transition-delay</code></a>’ in the same rule where they
890 specify the value that triggers the transition, or can change these
891 properties at the same time as they change the property that triggers the
892 transition. Since it's the new values of these ‘<code
893 class=css>transition-*</code>’ properties that affect the transition,
894 these values will be used for the transitions <em>to</em> the associated
895 transitioning values. For example:
897 <pre>li {
898 transition: background-color linear 1s;
899 background: blue;
900 }
901 li:hover {
902 background-color: green;
903 transition-duration: 2s; /* applies to the transition *to* the :hover state */
904 }</pre>
906 <p> When a list item with these style rules enters the :hover state, the
907 computed ‘<a href="#transition-duration"><code
908 class=property>transition-duration</code></a>’ at the time that
909 ‘<code class=property>background-color</code>’ would have its new
910 value (‘<code class=property>green</code>’) is ‘<code
911 class=css>2s</code>’, so the transition from ‘<code
912 class=property>blue</code>’ to ‘<code class=property>green</code>’
913 takes 2 seconds. However, when the list item leaves the :hover state, the
914 transition from ‘<code class=property>green</code>’ to ‘<code
915 class=property>blue</code>’ takes 1 second.
916 </div>
918 <p> When the computed value of a property changes, implementations must
919 start transitions based on the relevant item (see <a
920 href="#transition-property">the definition of ‘<code
921 class=property>transition-property</code>’</a>) in the computed value of
922 ‘<a href="#transition-property"><code
923 class=property>transition-property</code></a>’. Corresponding to this
924 item there are computed values of ‘<a href="#transition-duration"><code
925 class=property>transition-duration</code></a>’ and ‘<a
926 href="#transition-delay"><code
927 class=property>transition-delay</code></a>’ (see <a
928 href="#list-matching">the rules on matching lists</a>). Define the <dfn
929 id=combined-duration>combined duration</dfn> of the transition as the sum
930 of max(‘<a href="#transition-duration"><code
931 class=property>transition-duration</code></a>’, ‘<code
932 class=css>0s</code>’) and ‘<a href="#transition-delay"><code
933 class=property>transition-delay</code></a>’. When the combined duration
934 is greater than ‘<code class=css>0s</code>’, then a transition starts
935 based on the values of ‘<a href="#transition-duration"><code
936 class=property>transition-duration</code></a>’, ‘<a
937 href="#transition-delay"><code
938 class=property>transition-delay</code></a>’, and ‘<a
939 href="#transition-timing-function"><code
940 class=property>transition-timing-function</code></a>’; in other cases
941 transitions do not occur.
943 <p> Since this specification does not define when computed values change,
944 and thus what changes to computed values are considered simultaneous,
945 authors should be aware that changing any of the transition properties a
946 small amount of time after making a change that might transition can
947 result in behavior that varies between implementations, since the changes
948 might be considered simultaneous in some implementations but not others.
950 <p class=note>Say something about simultaneity
952 <p> Once the transition of a property has started, it must continue running
953 based on the original timing function, duration, and delay, even if the
954 ‘<a href="#transition-timing-function"><code
955 class=property>transition-timing-function</code></a>’, ‘<a
956 href="#transition-duration"><code
957 class=property>transition-duration</code></a>’, or ‘<a
958 href="#transition-delay"><code
959 class=property>transition-delay</code></a>’ property changes before the
960 transition is complete. However, if the ‘<a
961 href="#transition-property"><code
962 class=property>transition-property</code></a>’ property changes such
963 that the transition would not have started, the transition must stop (and
964 the property must immediately change to its final value).
966 <p> Implementations must not start a transition when the computed value of
967 a property changes as a result of declarative animation (as opposed to
968 scripted animation).
970 <p> Implementations also must not start a transition when the computed
971 value changes because it is inherited (directly or indirectly) from
972 another element that is transitioning the same property.
974 <h2 id=reversing><span class=secno>4. </span> Automatically reversing
975 interrupted transitions</h2>
977 <p> A common type of transition effect is when a running transition is
978 interrupted and the property is reset to its original value. An example is
979 a hover effect on an element, where the pointer enters and exits the
980 element before the effect has completed. If the outgoing and incoming
981 transitions are executed using their specified durations and timing
982 functions, the resulting effect can be distractingly asymmetric. Instead,
983 the expected behavior is that the new transition should be the reverse of
984 what has already executed.
986 <p> If a running transition with duration T, executing so far for duration
987 TE, from state A, to state B, is interrupted by a property change that
988 would start a new transition back to state A, and all the transition
989 attributes are the same (duration, delay and timing function), then the
990 new transition must reverse the effect. The new transition must:
992 <ol>
993 <li> Use the B and A states as its "from" and "to" states respectively. It
994 does not use the current value as its from state, due to the rules below.
996 <li> Execute with the same duration T, but starting as if the transition
997 had already begun, without any transition delay, at the moment which
998 would cause the new transition to finish in TE from the moment of
999 interruption. In other words, the new transition will execute as if it
1000 started T-TE in the past.
1002 <li> Use a timing function that is the portion of the curve traversed up
1003 to the moment of interruption, followed in the opposite direction
1004 (towards the starting point). This will make the transition appear as if
1005 it is playing backwards.
1007 <li> Ignore any transition delay.
1008 </ol>
1010 <p> For example, suppose there is a transition with a duration of two
1011 seconds. If this transition is interrupted after 0.5 seconds and the
1012 property value assigned to the original value, then the new transition
1013 effect will be the reverse of the original, as if it had begun 1.5 seconds
1014 in the past.
1016 <p> Note that by using the defined from and to states for the reversing
1017 transition, it is also possible that it may reverse again, if interrupted;
1018 for example, if the transition reversing to state A was again interrupted
1019 by a property change to state B.
1021 <p class=issue>Issue: This introduces the concept of reversing a timing
1022 function, which the spec has otherwise resisted doing, and also introduces
1023 a discontinuity between transitions that have almost completed (which get
1024 automatically reversed and thus have their timing function reversed) and
1025 transitions that have fully completed (where the reversal doesn't lead to
1026 the timing function being reversed). An alternative proposal that avoids
1027 this is to follow the normal timing function algorithm, except multiply
1028 the duration (and also shorten any negative delay) by the (output) value
1029 of the transition timing function of the incomplete transition at the time
1030 it was interrupted, and, to account for multiple reverses in sequence, to
1031 divide by the shortening applied to the transition being interrupted. For
1032 more details see this thread: <a
1033 href="http://lists.w3.org/Archives/Public/www-style/2009Nov/thread.html#msg302">November
1034 2009 part</a>, <a
1035 href="http://lists.w3.org/Archives/Public/www-style/2009Dec/thread.html#msg319">December
1036 2009 part</a>, <a
1037 href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January
1038 2010 part</a>.
1040 <h2 id=transition-events><span class=secno>5. </span><a
1041 id=transition-events-> Transition Events </a></h2>
1043 <p> The completion of a CSS Transition generates a corresponding <a
1044 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>.
1045 An event is fired for each property that undergoes a transition. This
1046 allows a content developer to perform actions that synchronize with the
1047 completion of a transition.
1049 <p> Each event provides the name of the property the transition is
1050 associated with as well as the duration of the transition.
1052 <dl>
1053 <dt> <b>Interface <i><a id=Events-TransitionEvent
1054 name=Events-TransitionEvent>TransitionEvent</a></i></b>
1056 <dd>
1057 <p> The <code>TransitionEvent</code> interface provides specific
1058 contextual information associated with transitions.
1060 <dl>
1061 <dt> <b>IDL Definition</b>
1063 <dd>
1064 <div class=idl-code>
1065 <pre>
1066 interface TransitionEvent : Event {
1067 readonly attribute DOMString propertyName;
1068 readonly attribute float elapsedTime;
1069 readonly attribute DOMString pseudoElement;
1070 void initTransitionEvent(in DOMString typeArg,
1071 in boolean canBubbleArg,
1072 in boolean cancelableArg,
1073 in DOMString propertyNameArg,
1074 in float elapsedTimeArg,
1075 in DOMString pseudoElementArg);
1076 };
1077 </pre>
1078 </div>
1080 <dt> <b>Attributes</b>
1082 <dd>
1083 <dl>
1084 <dt> <code class=attribute-name><a
1085 id=Events-TransitionEvent-propertyName
1086 name=Events-TransitionEvent-propertyName>propertyName</a></code> of
1087 type <code>DOMString</code>, readonly
1089 <dd> The name of the CSS property associated with the transition.
1090 </dl>
1092 <dl>
1093 <dt> <code class=attribute-name><a
1094 id=Events-TransitionEvent-elapsedTime
1095 name=Events-TransitionEvent-elapsedTime>elapsedTime</a></code> of
1096 type <code>float</code>, readonly
1098 <dd> The amount of time the transition has been running, in seconds,
1099 when this event fired. Note that this value is not affected by the
1100 value of <a href="#transition-delay"><code
1101 class=property>transition-delay</code></a>.
1102 </dl>
1104 <dl>
1105 <dt> <code class=attribute-name><a
1106 id=Events-TransitionEvent-pseudoElement
1107 name=Events-TransitionEvent-pseudoElement>pseudoElement</a></code> of
1108 type <code>DOMString</code>, readonly
1110 <dd> The name (beginning with two colons) of the CSS pseudo-element on
1111 which the transition occured (in which case the target of the event
1112 is that pseudo-element's corresponding element), or the empty string
1113 if the transition occurred on an element (which means the target of
1114 the event is that element).
1115 </dl>
1117 <dt> <b>Methods</b>
1119 <dd>
1120 <dl>
1121 <dt> <code class=method-name><a
1122 id=Events-TransitionEvent-initTransitionEvent
1123 name=Events-TransitionEvent-initTransitionEvent>initTransitionEvent</a></code>
1125 <dd>
1126 <div class=method> The <code>initTransitionEvent</code> method is
1127 used to initialize the value of a <code>TransitionEvent</code>
1128 created through the <a
1129 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent"><code>DocumentEvent</code></a>
1130 interface. This method may only be called before the
1131 <code>TransitionEvent</code> has been dispatched via the
1132 <code>dispatchEvent</code> method, though it may be called multiple
1133 times during that phase if necessary. If called multiple times, the
1134 final invocation takes precedence.
1135 <p class=issue>Should new events being created still have init*Event
1136 methods?
1138 <div class=parameters> <b>Parameters</b>
1139 <div class=paramtable>
1140 <dl>
1141 <dt> <code class=parameter-name>typeArg</code> of type
1142 <code>DOMString</code>
1144 <dd> Specifies the event type.<br>
1146 <dt> <code class=parameter-name>canBubbleArg</code> of type
1147 <code>boolean</code>
1149 <dd> Specifies whether or not the event can bubble.<br>
1151 <dt> <code class=parameter-name>cancelableArg</code> of type
1152 <code>boolean</code>
1154 <dd> Specifies whether or not the event's default action can be
1155 prevented. Since a TransitionEvent is purely for notification,
1156 there is no default action.<br>
1158 <dt> <code class=parameter-name>propertyNameArg</code> of type
1159 <code>DOMString</code>
1161 <dd> Specifies the name of the property associated with the <a
1162 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event"><code>Event</code></a>.
1163 (See the <a
1164 href="#Events-TransitionEvent-propertyName">propertyName</a>
1165 attribute.)
1167 <dt> <code class=parameter-name>elapsedTimeArg</code> of type
1168 <code>float</code>
1170 <dd> Specifies the amount of time, in seconds, the transition has
1171 been running at the time of initialization. (See the <a
1172 href="#Events-TransitionEvent-elapsedTime">elapsedTime</a>
1173 attribute.)
1175 <dt> <code class=parameter-name>pseudoElementArg</code> of type
1176 <code>DOMString</code>
1178 <dd> Specifies the pseudo-element on which the transition
1179 occurred. (See the <a
1180 href="#Events-TransitionEvent-pseudoElement">pseudoElement</a>
1181 attribute.) <span class=issue>Does adding this additional
1182 argument create any compatibility problems?</span>
1183 </dl>
1184 </div>
1185 </div>
1186 <!-- parameters -->
1187 <div> <b>No Return Value</b></div>
1189 <div> <b>No Exceptions</b></div>
1190 </div>
1191 <!-- method -->
1192 </dl>
1193 </dl>
1194 </dl>
1196 <p> There is one type of transition event available.
1198 <dl>
1199 <dt> <b>transitionend</b>
1201 <dd> The ‘<code class=property>transitionend</code>’ event occurs at
1202 the completion of the transition. In the case where a transition is
1203 removed before completion, such as if the transition-property is removed,
1204 then the event will not fire.
1205 <ul>
1206 <li>Bubbles: Yes
1208 <li>Cancelable: Yes
1210 <li>Context Info: propertyName, elapsedTime
1211 </ul>
1212 </dl>
1214 <h2 id=animatable-types><span class=secno>6. </span><a
1215 id=animation-of-property-types-> Animation of property types </a></h2>
1217 <p> When interpolating between two values, <i>V</i><sub>start</sub> and
1218 <i>V</i><sub>end</sub>, interpolation is done using the output <i>p</i> of
1219 the timing function, which gives the portion of the value space that the
1220 interpolation has crossed. Thus the result of the interpolation is
1221 <i>V</i><sub>res</sub> = (1 - <i>p</i>) ⋅ <i>V</i><sub>start</sub> +
1222 <i>p</i> ⋅ <i>V</i><sub>end</sub>.
1224 <p> However, if this value (<i>V</i><sub>res</sub>) is outside the allowed
1225 range of values for the property, then it is clamped to that range. This
1226 can occur if <i>p</i> is outside of the range 0 to 1, which can occur if a
1227 timing function is specified with a <i>y1</i> or <i>y2</i> that is outside
1228 the range 0 to 1.
1230 <p> The following describes how each property type undergoes transition or
1231 animation.
1233 <ul>
1234 <li> <strong>color</strong>: interpolated via red, green, blue and alpha
1235 components (treating each as a number, see below).
1236 <div class=issue>Issue: Are the colors interpolated in premultiplied
1237 space or non-premultiplied space?</div>
1239 <li> <strong>length</strong>: interpolated as real numbers.
1241 <li> <strong>percentage</strong>: interpolated as real numbers.
1243 <li> <strong>integer</strong>: interpolated via discrete steps (whole
1244 numbers). The interpolation happens in real number space and is converted
1245 to an integer using <code>floor()</code>. <span class=issue> This floor
1246 behavior is inconsistent with SMIL Animation / SVG Animation. </span>
1248 <li> <strong>font weight</strong>: interpolated via discrete steps
1249 (multiples of 100). The interpolation happens in real number space and is
1250 converted to an integer by rounding to the nearest multiple of 100. <span
1251 class=issue> This round-to-nearest behavior is inconsistent with the
1252 floor behavior used for integer types, but probably should be consistent
1253 (one way or the other). </span>
1255 <li> <strong>number</strong>: interpolated as real (floating point)
1256 numbers.
1258 <li> <strong>transform list</strong>: see CSS Transforms specification <a
1259 href="#CSS3-TRANSFORMS"
1260 rel=biblioentry>[CSS3-TRANSFORMS]<!--{{!CSS3-TRANSFORMS}}--></a>.
1262 <li> <strong>rectangle</strong>: interpolated via the x, y, width and
1263 height components (treating each as a number).
1265 <li> <strong>visibility</strong>: if one of the values is ‘<code
1266 class=property>visible</code>’, interpolated as a discrete step where
1267 values of the timing function between 0 and 1 map to ‘<code
1268 class=property>visible</code>’ and other values of the timing function
1269 (which occur only at the start/end of the transition or as a result of
1270 ‘<code class=css>cubic-bezier()</code>’ functions with Y values
1271 outside of [0, 1]) map to the closer endpoint; if neither value is
1272 ‘<code class=property>visible</code>’ then not interpolable.
1274 <li> <strong>shadow</strong>: interpolated via the color, x, y and blur
1275 components (treating them as color and numbers where appropriate). In the
1276 case where there are lists of shadows, the shorter list is padded at the
1277 end with shadows whose color is transparent and all lengths (x, y, blur)
1278 are 0.
1280 <li> <strong>gradient</strong>: interpolated via the positions and colors
1281 of each stop. They must have the same type (radial or linear) and same
1282 number of stops in order to be animated. <span class=note>Note: <a
1283 href="#CSS3-IMAGES"
1284 rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a> may extend this
1285 definition.</span>
1287 <li> <strong>paint server</strong> (SVG): interpolation is only supported
1288 between: gradient to gradient and color to color. They then work as
1289 above.
1291 <li> <strong>list of above types</strong>: If the lists have the same
1292 number of items, each item in the list is interpolated using the rules
1293 above. Otherwise the interpolation is determined by the property rules.
1294 If the property extends its list by repeating values, then this repeated
1295 form will be used in the interpolation (<code
1296 class=property>'background-position'</code> is an example of a property
1297 that would transition between lists of different lengths). If the
1298 property does not allow extending its list, then no interpolation will
1299 occur.
1301 <li> <strong>a shorthand property</strong>: If any part of a shorthand can
1302 be animated, then interpolation is performed as if those animatable
1303 properties were individually specified.
1304 </ul>
1306 <p class=issue>Need to add a length-percentage-calc type.
1308 <p>Future specifications may define additional types that can be animated.
1310 <h2 id=animatable-properties><span class=secno>7. </span><a
1311 id=animatable-properties-> Animatable properties </a></h2>
1312 <!--
1313 As resolved in
1314 http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html
1315 -->
1317 <p>For properties that exist at the time this specification was developed,
1318 this specification defines whether and how they are animated. However,
1319 future CSS specifications may define additional properties, additional
1320 values for existing properties, or additional animation behavior of
1321 existing values. In order to describe new animation behaviors and to have
1322 the definition of animation behavior in a more appropriate location,
1323 future CSS specifications should include an "Animatable:" line in the
1324 summary of the property's definition (in addition to the other lines
1325 described in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>,
1326 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">section
1327 1.4.2</a>). This line should say "no" to indicate that a property cannot
1328 be animated or should reference an animation behavior (which may be one of
1329 the behaviors in the <a href="#animation-of-property-types-">Animation of
1330 property types</a> section above, or may be a new behavior) to define how
1331 the property animates. Such definitions override those given in this
1332 specification.
1334 <h3 id=animatable-css><span class=secno>7.1. </span><a
1335 id=properties-from-css-> Properties from CSS </a></h3>
1337 <p class=issue>Need to define what listing comma-separated things here
1338 means. In particular, that they only apply when both values fit the type,
1339 and that if one of the values is a type not listed, or if two of the
1340 values are different types, then the two values cannot be interpolated.
1342 <table class=animatable-properties>
1343 <tbody>
1344 <tr>
1345 <th>Property Name
1347 <th>Type
1349 <tr>
1350 <td>background-color
1352 <td>color
1354 <tr>
1355 <td>background-position
1357 <td>percentage, length
1359 <tr>
1360 <td>border-bottom-color
1362 <td>color
1364 <tr>
1365 <td>border-bottom-width
1367 <td>length
1369 <tr>
1370 <td>border-left-color
1372 <td>color
1374 <tr>
1375 <td>border-left-width
1377 <td>length
1379 <tr>
1380 <td>border-right-color
1382 <td>color
1384 <tr>
1385 <td>border-right-width
1387 <td>length
1389 <tr>
1390 <td>border-spacing
1392 <td>length
1394 <tr>
1395 <td>border-top-color
1397 <td>color
1399 <tr>
1400 <td>border-top-width
1402 <td>length
1404 <tr>
1405 <td>bottom
1407 <td>length, percentage
1409 <tr>
1410 <td>clip
1412 <td>rectangle
1414 <tr>
1415 <td>color
1417 <td>color
1419 <tr>
1420 <td>crop <span class=issue>css3-content will likely advance slower than
1421 this specification, in which case this definition should move
1422 there</span>
1424 <td>rectangle
1426 <tr>
1427 <td>font-size
1429 <td>length, percentage
1431 <tr>
1432 <td>font-weight
1434 <td>font weight
1436 <tr>
1437 <td>height
1439 <td>length, percentage
1441 <tr>
1442 <td>left
1444 <td>length, percentage
1446 <tr>
1447 <td>letter-spacing
1449 <td>length
1451 <tr>
1452 <td>line-height
1454 <td>number, length, percentage
1456 <tr>
1457 <td>margin-bottom
1459 <td>length
1461 <tr>
1462 <td>margin-left
1464 <td>length
1466 <tr>
1467 <td>margin-right
1469 <td>length
1471 <tr>
1472 <td>margin-top
1474 <td>length
1476 <tr>
1477 <td>max-height
1479 <td>length, percentage
1481 <tr>
1482 <td>max-width
1484 <td>length, percentage
1486 <tr>
1487 <td>min-height
1489 <td>length, percentage
1491 <tr>
1492 <td>min-width
1494 <td>length, percentage
1496 <tr>
1497 <td>opacity
1499 <td>number
1501 <tr>
1502 <td>outline-color
1504 <td>color
1506 <tr>
1507 <td>outline-offset
1509 <td>integer
1511 <tr>
1512 <td>outline-width
1514 <td>length
1516 <tr>
1517 <td>padding-bottom
1519 <td>length
1521 <tr>
1522 <td>padding-left
1524 <td>length
1526 <tr>
1527 <td>padding-right
1529 <td>length
1531 <tr>
1532 <td>padding-top
1534 <td>length
1536 <tr>
1537 <td>right
1539 <td>length, percentage
1541 <tr>
1542 <td>text-indent
1544 <td>length, percentage
1546 <tr>
1547 <td>text-shadow
1549 <td>shadow
1551 <tr>
1552 <td>top
1554 <td>length, percentage
1556 <tr>
1557 <td>vertical-align
1559 <td>length, percentage
1561 <tr>
1562 <td>visibility
1564 <td>visibility
1566 <tr>
1567 <td>width
1569 <td>length, percentage
1571 <tr>
1572 <td>word-spacing
1574 <td>length, percentage
1576 <tr>
1577 <td>z-index
1579 <td>integer
1580 </table>
1582 <p class=issue> This list omits the following properties that Gecko can
1583 animate, and which likely should be included: background-size,
1584 border-*-radius, box-shadow, column-count, column-gap, column-rule-color,
1585 column-rule-width, column-width, font-size-adjust, font-stretch,
1586 marker-offset, text-decoration-color, transform, transform-origin.
1588 <h3 id=animatable-svg><span class=secno>7.2. </span><a
1589 id=properties-from-svg-> Properties from SVG </a></h3>
1591 <p> All properties defined as animatable in the SVG specification, provided
1592 they are one of the property types listed above.</p>
1593 <!-- <table>
1594 <tr>
1595 <th>Property Name</th><th>Type</th>
1596 </tr>
1597 <tr>
1598 <td>stop-color</td><td>color</td>
1599 </tr>
1600 <tr>
1601 <td>stop-opacity</td><td>float</td>
1602 </tr>
1603 <tr>
1604 <td>fill</td><td>paint server</td>
1605 </tr>
1606 <tr>
1607 <td>fill-opacity</td><td>float</td>
1608 </tr>
1609 <tr>
1610 <td>stroke</td><td>paint server</td>
1611 </tr>
1612 <tr>
1613 <td>stroke-dasharray</td><td>list of numbers</td>
1614 </tr>
1615 <tr>
1616 <td>stroke-dashoffset</td><td>number</td>
1617 </tr>
1618 <tr>
1619 <td>stroke-miterlimit</td><td>number</td>
1620 </tr>
1621 <tr>
1622 <td>stroke-opacity</td><td>float</td>
1623 </tr>
1624 <tr>
1625 <td>stroke-width</td><td>float</td>
1626 </tr>
1627 <tr>
1628 <td>viewport-fill</td><td>color</td>
1629 </tr>
1630 <tr>
1631 <td>viewport-fill-opacity</td><td>color</td>
1632 </tr>
1633 </table> -->
1635 <h2 id=acknowledgments><span class=secno>8. </span>Acknowledgments</h2>
1637 <p>Thanks especially to the feedback from Tab Atkins, Carine Bournez, Aryeh
1638 Gregor, Vincent Hardy, Cameron McCormack, Alex Mogilevsky, and all the
1639 rest of the <a
1640 href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
1641 community.
1643 <h2 id=references><span class=secno>9. </span>References</h2>
1645 <h3 class=no-num id=normative-references>Normative references</h3>
1646 <!--begin-normative-->
1647 <!-- Sorted by label -->
1649 <dl class=bibliography>
1650 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
1651 <!---->
1653 <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS]
1655 <dd>Simon Fraser; et al. <a
1656 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/"><cite>CSS
1657 Transforms.</cite></a> 11 September 2012. W3C Working Draft. (Work in
1658 progress.) URL: <a
1659 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a>
1660 </dd>
1661 <!---->
1662 </dl>
1663 <!--end-normative-->
1665 <h3 class=no-num id=other-references>Other references</h3>
1666 <!--begin-informative-->
1667 <!-- Sorted by label -->
1669 <dl class=bibliography>
1670 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
1671 <!---->
1673 <dt id=CSS21>[CSS21]
1675 <dd>Bert Bos; et al. <a
1676 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
1677 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
1678 2011. W3C Recommendation. URL: <a
1679 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
1680 </dd>
1681 <!---->
1683 <dt id=CSS3-IMAGES>[CSS3-IMAGES]
1685 <dd>Elika J. Etemad; Tab Atkins Jr. <a
1686 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS Image
1687 Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C
1688 Candidate Recommendation. (Work in progress.) URL: <a
1689 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
1690 </dd>
1691 <!---->
1692 </dl>
1693 <!--end-informative-->
1695 <h2 class=no-num id=property-index>Property index</h2>
1696 <!--begin-properties-->
1698 <table class=proptable>
1699 <thead>
1700 <tr>
1701 <th>Property
1703 <th>Values
1705 <th>Initial
1707 <th>Applies to
1709 <th>Inh.
1711 <th>Percentages
1713 <th>Media
1715 <tbody>
1716 <tr>
1717 <th><a class=property href="#transition">transition</a>
1719 <td><single-transition> [ ‘,’ <single-transition> ]*
1721 <td>see individual properties
1723 <td>
1725 <td>no
1727 <td>N/A
1729 <td>interactive
1731 <tr>
1732 <th><a class=property href="#transition-delay">transition-delay</a>
1734 <td><time> [, <time>]*
1736 <td>0s
1738 <td>
1740 <td>no
1742 <td>N/A
1744 <td>interactive
1746 <tr>
1747 <th><a class=property
1748 href="#transition-duration">transition-duration</a>
1750 <td><time> [, <time>]*
1752 <td>0s
1754 <td>
1756 <td>no
1758 <td>N/A
1760 <td>interactive
1762 <tr>
1763 <th><a class=property
1764 href="#transition-property">transition-property</a>
1766 <td>none | <single-transition-property> [ ‘,’
1767 <single-transition-property> ]*
1769 <td>all
1771 <td>
1773 <td>no
1775 <td>N/A
1777 <td>visual
1779 <tr>
1780 <th><a class=property
1781 href="#transition-timing-function">transition-timing-function</a>
1783 <td><single-transition-timing-function> [ ‘,’
1784 <single-transition-timing-function> ]*
1786 <td>ease
1788 <td>
1790 <td>no
1792 <td>N/A
1794 <td>interactive
1795 </table>
1796 <!--end-properties-->
1798 <h2 class=no-num id=index>Index</h2>
1799 <!--begin-index-->
1801 <ul class=indexlist>
1802 <li>combined duration, <a href="#combined-duration"
1803 title="section 3."><strong>3.</strong></a>
1805 <li><single-transition>, <a href="#single-transition"
1806 title="section 2.5."><strong>2.5.</strong></a>
1808 <li><single-transition-property>, <a
1809 href="#single-transition-property"
1810 title="section 2.1."><strong>2.1.</strong></a>
1812 <li><single-transition-timing-function>, <a
1813 href="#single-transition-timing-function"
1814 title="section 2.3."><strong>2.3.</strong></a>
1816 <li>transition, <a href="#transition"
1817 title="section 2.5."><strong>2.5.</strong></a>
1819 <li>transition-delay, <a href="#transition-delay"
1820 title="section 2.4."><strong>2.4.</strong></a>
1822 <li>transition-duration, <a href="#transition-duration"
1823 title="section 2.2."><strong>2.2.</strong></a>
1825 <li>transition-property, <a href="#transition-property"
1826 title="section 2.1."><strong>2.1.</strong></a>
1828 <li>transition-timing-function, <a href="#transition-timing-function"
1829 title="section 2.3."><strong>2.3.</strong></a>
1830 </ul>
1831 <!--end-index-->
1832 </html>
1833 <!-- Keep this comment at the end of the file
1834 Local variables:
1835 mode: sgml
1836 sgml-default-doctype-name:"html"
1837 sgml-minimize-attributes:t
1838 End:
1839 -->
