css-transitions/Overview.src.html

Thu, 28 Mar 2013 16:57:56 -0700

author
Tab Atkins Jr. <jackalmage@gmail.com>
date
Thu, 28 Mar 2013 16:57:56 -0700
changeset 7847
f7490857b4eb
parent 7810
css3-transitions/Overview.src.html@9d38acef4dfc
child 7857
23b4eae0ebde
permissions
-rw-r--r--

THE GREAT RENAMING

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

mercurial