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).

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

mercurial