css-transitions/Overview.src.html

Mon, 27 Jan 2014 21:52:46 -0800

author
L. David Baron <dbaron@dbaron.org>
date
Mon, 27 Jan 2014 21:52:46 -0800
changeset 9840
6a829ba57172
parent 9838
c586bf5073db
child 9871
de0aa877c41b
permissions
-rw-r--r--

[css-transitions] Fix silly bikeshed error: Add title= on compatibility anchors to suppress autolinking since bikeshed attempts to autolink only a and i, whereas Bert's preprocessor attempts to autolink everything except a.

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

mercurial