css3-transitions/Overview.src.html

Mon, 04 Feb 2013 09:58:01 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Mon, 04 Feb 2013 09:58:01 -0700
changeset 7304
aa7fec595b8e
parent 7303
824ebacafe40
child 7313
5df9b029337c
permissions
-rw-r--r--

[css3-transitions] Add issue for the one other not-yet-stable property that's listed in the property table.

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

mercurial