css-transitions/Overview.src.html

Tue, 22 Oct 2013 11:45:08 +0200

author
L. David Baron <dbaron@dbaron.org>
date
Tue, 22 Oct 2013 11:45:08 +0200
changeset 9406
3d943f796fee
parent 9094
94fe743b9684
child 9524
9eb0718d6baa
permissions
-rw-r--r--

[css-transitions] Note issue with wording of previous large edit.

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

mercurial