css-transitions/Overview.src.html

Thu, 14 Nov 2013 11:22:42 +0800

author
L. David Baron <dbaron@dbaron.org>
date
Thu, 14 Nov 2013 11:22:42 +0800
changeset 9585
31902c18f45d
parent 9580
b98629add395
child 9623
b8e4691d68cc
permissions
-rw-r--r--

[css-transitions] Post-publication updates: Switch back to ED formatting, update previous version link, and reset changes section.

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

mercurial