css3-transitions/Overview.src.html

Tue, 05 Feb 2013 13:50:38 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Tue, 05 Feb 2013 13:50:38 -0700
changeset 7348
cc776915a57d
parent 7341
3aa3ab417355
child 7350
929febca4320
permissions
-rw-r--r--

[css3-transitions] Fix a few properties that were listed as animating percentage/calc but shouldn't be since percentages aren't part of their computed value space.

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

mercurial