css3-animations/Overview.src.html

Tue, 05 Apr 2011 19:27:07 +0000

author
Dean Jackson <dino@apple.com>
date
Tue, 05 Apr 2011 19:27:07 +0000
changeset 2616
0e08c34f6238
parent 2614
08c0c83446dd
child 3190
84d220ba333f
permissions
-rw-r--r--

Animations

- describe that animations with a 0 duration still respect fill mode, delay
and fire events.

dino@937 1 <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
dino@937 2 'http://www.w3.org/TR/html4/strict.dtd'>
dino@937 3
dino@937 4 <html lang="en">
dino@937 5 <head>
simon@2533 6 <title>CSS Animations</title>
dino@937 7 <link rel="stylesheet" type="text/css" href="default.css">
dino@937 8 <style type="text/css">
dino@937 9 .rhs { white-space: pre-wrap; }
dino@937 10 code { font-size: inherit; }
dino@937 11 #box-shadow-samples td { background: white; color: black; }
dino@937 12
dino@937 13 table {
dino@937 14 border-collapse: collapse;
dino@937 15 }
dino@937 16 td {
dino@937 17 padding: 0.2em 1em;
dino@937 18 border: 1px solid black;
dino@937 19 }
dino@937 20 </style>
dino@937 21 <link rel="stylesheet" type="text/css"
dino@937 22 href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
dino@937 23 </head>
dino@937 24
dino@937 25 <body>
dino@937 26
dino@937 27 <div class="head">
dino@937 28 <!--logo-->
dino@937 29
simon@2533 30 <h1>CSS Animations</h1>
dino@937 31
dino@937 32 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
dino@937 33 <dl>
dino@937 34 <dt>This version:
bert@1104 35 <dd><a href="[VERSION]">http://dev.w3.org/csswg/css3-animations/</a>
bert@1104 36 <!--http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]-->
dino@937 37 <dt>Latest version:
dino@937 38 <dd><a
bert@1104 39 href="http://www.w3.org/TR/css3-animations">[LATEST]</a>
bert@1104 40 <dt>Previous version:
bert@1104 41 <dd><a href="http://www.w3.org/TR/2009/WD-css3-animations-20090320/">
bert@1104 42 http://www.w3.org/TR/2009/WD-css3-animations-20090320/</a>
dino@937 43 <dt id="editors-list">Editors:
dino@937 44 <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a
dino@937 45 href="http://www.apple.com/">Apple Inc</a>)
dino@937 46 <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a
dino@937 47 href="http://www.apple.com/">Apple Inc</a>)
dino@937 48 <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a
dino@937 49 href="http://www.apple.com/">Apple Inc</a>)
dino@937 50 </dl>
dino@937 51
dino@937 52 <!--copyright-->
dino@937 53
dino@937 54 <hr title="Separator for header">
dino@937 55 </div>
dino@937 56
dino@937 57 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
dino@937 58
simon@1671 59 <p>This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes.
simon@1671 60 The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats,
simon@1671 61 and repeating behavior.
simon@1671 62 </p>
dino@937 63
dino@937 64 <h2 class="no-num no-toc" id="status">Status of this document</h2>
dino@937 65 <!--status-->
dino@937 66
dino@937 67
dino@937 68 <h2 class="no-num no-toc" id="contents">Table of contents</h2>
dino@937 69 <!--toc-->
dino@937 70
dino@937 71
dino@937 72 <h2 id="introduction">Introduction</h2>
dino@937 73
simon@1671 74 <p><em>This section is not normative.</em>
dino@937 75
simon@1671 76 <p>
simon@1671 77 CSS Transitions [[!CSS3-TRANSITIONS]] provide a way to interpolate CSS property values
simon@1671 78 when they change as a result of underlying property changes. This provides an easy way to do simple animation,
simon@1671 79 but the start and end states of the animation are controlled by the existing property values,
simon@1671 80 and transitions provide little control to the author on how the animation progresses.
simon@1671 81 </p>
simon@1671 82 <p>
simon@1671 83 This proposal introduces <em>defined animations</em>, in which the author can
simon@1719 84 specify the changes in CSS properties over time as a set of keyframes. Animations are similar to transitions
simon@1719 85 in that they change the presentational value of CSS properties over time.
simon@1719 86 The principal difference is that while transitions trigger <i>implicitly</i> when property values change, animations
simon@1719 87 are <i>explicitly</i> executed when the animation properties are applied. Because of this, animations require explicit
simon@1719 88 values for the properties being animated. These values are specified using animation keyframes, described below.
simon@1671 89 </p>
simon@1671 90 <p>
simon@1719 91 Many aspects of the animation can be controlled, including how many times the animation iterates, whether or not
simon@1719 92 it alternates between the begin and end values, and whether or not the animation should be running or paused.
simon@1719 93 An animation can also delay its start time.
simon@1671 94 </p>
simon@1671 95
simon@1719 96 <h2>Animations</h2>
simon@1719 97
simon@1719 98 <p>
simon@1719 99 CSS Animations affect computed property values. During the execution of an animation, the
simon@1719 100 computed value for a property is controlled by the animation. This overrides the value
simon@1719 101 specified in the normal styling system.
simon@1719 102 </p>
simon@1719 103
simon@1719 104 <p>
simon@1719 105 In the case of multiple animations specifying behavior for the same property, the animation
simon@1719 106 defined last will override the previously defined animations.
simon@1719 107 </p>
simon@1719 108
simon@1719 109 <p>
simon@1719 110 An animation does not affect the computed value before the application of the animation,
simon@1719 111 before the animation delay has expired, and after the end of the animation.
simon@1719 112 </p>
simon@1719 113
simon@1719 114 <div class="figure">
simon@1719 115 <img src="sandwich.png" alt="">
simon@1719 116 </div>
simon@1719 117 <p class="caption">
simon@1719 118 Computation of animated property values
simon@1719 119 </p>
simon@1719 120
simon@1719 121 <p>
simon@1719 122 The diagram above shows how property values are computed. The intrinsic style is shown at the
simon@1719 123 top of the diagram. The computed value is derived from intrinsic style at the times when an
simon@1719 124 animation is not running and also when an animation is delayed (see below for specification of
simon@1719 125 animation delay). During an animation, the computed style is derived from the animated value.
simon@1719 126 </p>
simon@1719 127
simon@1719 128 <p>
simon@1719 129 The start time of an animation is the latter of two moments: the time at which the style is
simon@1719 130 resolved that specifies the animation, or the time the document's load event is fired.
simon@1719 131 Therefore, an animation specified in the document stylesheet will begin at the document load.
simon@1719 132 An animation specified on an element by modifying the style after the document has loaded will
simon@1719 133 start when the style is resolved. That may be immediately in the case of a pseudo style rule
simon@1719 134 such as hover, or may be when the scripting engine returns control to the browser (in the case
simon@1719 135 of style applied by script).
simon@1719 136 </p>
simon@1719 137
simon@1719 138 <p>
simon@1719 139 An animation applies to an element if the element has a value for
simon@1719 140 <span class="prop-name">'animation-name'</span> that references a valid
simon@1719 141 keyframes rule. Once an animation has started it continues until it ends
simon@1719 142 or the <span class="prop-name">'animation-name'</span> is removed. The values
simon@1719 143 used for the keyframes and animation properties are snapshotted at the
simon@1719 144 time the animation starts. Changing them during the execution of the
simon@1719 145 animation has no effect. Note also, that changing the value of
simon@1719 146 <span class="prop-name">'animation-name'</span> does not necessarily
simon@1719 147 restart an animation (e.g. if a list of animations are applied and
simon@1719 148 one is removed from the list, only that animation will stop; The other
simon@1719 149 animations will continue). In order to restart an animation, it must be
simon@1719 150 removed then reapplied.
simon@1719 151 </p>
simon@1719 152
dino@1908 153 <p>
dino@1908 154 The end of the animation is defined by the combination of the
dino@1908 155 <span class="prop-name">'animation-duration'</span>,
dino@1908 156 <span class="prop-name">'animation-iteration-count'</span> and
dino@1908 157 <span class="prop-name">'animation-fill-mode'</span> properties.
simon@1719 158 </p>
simon@1719 159
simon@1719 160 <div class="example">
simon@1719 161 <p style="display:none">
simon@1719 162 Example(s):
simon@1719 163 </p>
simon@1719 164 <pre>
simon@1719 165 div {
simon@1719 166 animation-name: diagonal-slide;
simon@1719 167 animation-duration: 5s;
simon@1719 168 animation-iteration-count: 10;
simon@1719 169 }
simon@1719 170
simon@1719 171 @keyframes diagonal-slide {
simon@1719 172
simon@1719 173 from {
simon@1719 174 left: 0;
simon@1719 175 top: 0;
simon@1719 176 }
simon@1719 177
simon@1719 178 to {
simon@1719 179 left: 100px;
simon@1719 180 top: 100px;
simon@1719 181 }
simon@1719 182
simon@1719 183 }
simon@1719 184
simon@1719 185 </pre>This will produce an animation that moves an element from (0, 0) to (100px, 100px) over five seconds and repeats itself nine times (for a total of ten iterations).
simon@1719 186 </div>
simon@1719 187
simon@1719 188 <h2>Keyframes</h2>
dino@937 189 <p>
simon@1719 190 Keyframes are used to specify the values for the animating properties at various points
simon@1719 191 during the animation. The keyframes specify the behavior of one cycle of the animation;
simon@1719 192 the animation may iterate one or more times.
dino@937 193 </p>
dino@937 194 <p>
dino@937 195 Keyframes are specified using a specialized CSS at-rule. A <span
dino@937 196 class="prop-name">@keyframes</span> rule consists of the keyword
dino@937 197 "@keyframes", followed by an identifier giving a name for the animation
dino@937 198 (which will be referenced using <span
dino@937 199 class="prop-name">'animation-name'</span>), followed by a set of style
dino@937 200 rules (delimited by curly braces).
dino@937 201 </p>
dino@937 202 <p>
dino@937 203 The <i>keyframe selector</i> for a keyframe style rule consists of a
dino@937 204 comma-separated list of percentage values or the keywords 'from' or
dino@937 205 'to'. The selector is used to specify the percentage along the duration
dino@937 206 of the animation that the keyframe represents. The
dino@937 207 keyframe itself is specified by the block of property values declared on
cmarrin@1670 208 the selector. The keyword 'from' is equivalent to the value 0%. The
dino@937 209 keyword 'to' is equivalent to the value 100%. Note that the percentage
dino@937 210 unit specifier must be used on percentage values. Therefore, "0" is an
dino@937 211 invalid keyframe selector.
dino@937 212 </p>
dino@937 213 <p>
simon@1719 214 If a 0% or "from" keyframe is not specified, then the user agent
simon@1719 215 constructs a 0% keyframe using the computed values of the properties
simon@1719 216 being animated. If a 100% or "to" keyframe is not specified, then the user agent
simon@1719 217 constructs a 100% keyframe using the computed values of the properties
simon@1719 218 being animated.
simon@1719 219 </p>
dino@937 220 <p>
dino@937 221 The <i>keyframe declaration</i> for a keyframe rule consists of
dino@937 222 properties and values. Properties that are unable to be
dino@937 223 animated are ignored in these rules, with the exception of <span
dino@937 224 class="prop-name">animation-timing-function'</span>, the behavior
dino@937 225 of which is described below.
dino@937 226 </p>
simon@1719 227 <p class="note">
simon@1719 228 NOTE: describe what happens if a property is not present in all keyframes.
dino@937 229 </p>
dino@937 230 <p>
simon@1719 231 The @keyframes rule that is used by an animation will be the last one encountered in sorted rules order
simon@1719 232 that matches the name of the animation specified by the <span class="prop-name">'animation-name'</span> property.
simon@1719 233 <span class="prop-name">@keyframes</span> rules do not cascade;
simon@1719 234 therefore an animation will never derive keyframes from more than one <span class="prop-name">@keyframes</span> rule.
simon@1719 235 </p>
simon@1719 236 <p>
simon@1719 237 To determine the set of keyframes, all of the values in selectors are sorted in increasing order by time.
simon@1719 238 If there are any duplicates, then the last keyframe specified inside the <span class="prop-name">@keyframes</span> rule
simon@1719 239 will be used to provide the keyframe information for that time. There is no cascading within a
simon@1719 240 <span class="prop-name">@keyframes</span> rule if multiple keyframes specify the same keyframe selector values.
dino@937 241 </p>
dino@937 242 <div class="example">
dino@937 243 <p style="display:none">
dino@937 244 Example(s):
dino@937 245 </p>
dino@937 246 <pre>
simon@1719 247 @keyframes wobble {
dino@937 248
dino@937 249 0% {
dino@937 250 left: 100px;
dino@937 251 }
dino@937 252
dino@937 253 40% {
dino@937 254 left: 150px;
dino@937 255 }
dino@937 256
dino@937 257 60% {
dino@937 258 left: 75px;
dino@937 259 }
dino@937 260
dino@937 261 100% {
dino@937 262 left: 100px;
dino@937 263 }
dino@937 264
dino@937 265 }
dino@937 266
dino@937 267 </pre>Four keyframes are specified for the animation named "wobble". In the first keyframe, shown at the beginning of the animation cycle, the 'left' value of the animation is 100px. By 40% of the animation duration, 'left' value has animated to 150px. At 60% of the animation duration, the 'left' value has animated back to 75px. At the end of the animation cycle, the 'left' value has returned to 100px. The diagram below shows the state of the animation if it were given a duration of 10s.
dino@937 268 <div class="figure">
dino@937 269 <img src="animation1.png" alt="">
dino@937 270 </div>
dino@937 271 <p class="caption">
dino@937 272 Animations states specified by keyframes
dino@937 273 </p>
dino@937 274 </div>
dino@937 275
dino@937 276 <p>
dino@937 277 The following is the grammar for the keyframes rule.
dino@937 278 </p>
dino@937 279
dino@937 280 <pre>
dino@937 281 keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
dino@937 282
dino@937 283 keyframes-blocks: [ keyframe-selectors block ]* ;
dino@937 284
dino@937 285 keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
dino@937 286 </pre>
dino@937 287 <!-- ======================================================================================================= -->
dino@937 288 <h3>
dino@937 289 Timing functions for keyframes
dino@937 290 </h3>
dino@937 291 <p>
dino@937 292 A keyframe style rule may also declare the timing function that is to be used as the animation moves to the next keyframe.
dino@937 293 </p>
dino@937 294 <div class="example">
dino@937 295 <p style="display:none">
dino@937 296 Example(s):
dino@937 297 </p>
dino@937 298 <pre>
simon@1719 299 @keyframes bounce {
dino@937 300
dino@937 301 from {
dino@937 302 top: 100px;
dino@937 303 animation-timing-function: ease-out;
dino@937 304 }
dino@937 305
dino@937 306 25% {
dino@937 307 top: 50px;
dino@937 308 animation-timing-function: ease-in;
dino@937 309 }
dino@937 310
dino@937 311 50% {
dino@937 312 top: 100px;
dino@937 313 animation-timing-function: ease-out;
dino@937 314 }
dino@937 315
dino@937 316 75% {
dino@937 317 top: 75px;
dino@937 318 animation-timing-function: ease-in;
dino@937 319 }
dino@937 320
dino@937 321 to {
dino@937 322 top: 100px;
dino@937 323 }
dino@937 324
dino@937 325 }
dino@937 326
cmarrin@1670 327 </pre>Five keyframes are specified for the animation named "bounce". Between the first and second keyframe (ie. between 0 and 25%) an "ease-out" timing function is used. Between the second and third keyframe (ie. between 25% and 50%) an "ease-in" timing function is used. And so on. The effect will appear as an element that moves up the page 50px, slowing down as it reaches its highest point then speeding up as it falls back to 100px. The second half of the animation behaves in a similar manner, but only moves the element 25px units up the page. A timing function specified on the "to" or 100% keyframe is ignored
dino@937 328 </div>
dino@937 329 <p>
dino@937 330 See <a href="#animation-timing-function_tag">the <span class="prop-name">'animation-timing-function'</span> property</a> for more information.
dino@937 331 </p><!-- ======================================================================================================= -->
dino@937 332
dino@937 333 <!-- ======================================================================================================= -->
dino@937 334 <h3>
dino@937 335 The <span class="prop-name">'animation-name'</span> Property
dino@937 336 </h3>
dino@937 337 <p>
dino@937 338 The <span class="prop-name">'animation-name'</span> property defines a
dino@937 339 list of animations that apply. Each name is used to select the keyframe at-rule
dino@937 340 that provides the property values for the animation. If the name does
dino@937 341 not match any keyframe at-rule, there are no properties to be animated
dino@937 342 and the animation will not execute. Furthermore, if the animation name
dino@937 343 is 'none' then there will be no animation. This can be used to override
dino@2614 344 any animations coming from the cascade. If animations are attempting to
dino@2614 345 modify the same property, then the animation closest to the end of the
dino@2614 346 list of names wins.
dino@2614 347 </p>
dino@2614 348 <p>
dino@2614 349 Each animation listed by name should have a corresponding value
dino@2614 350 for the other animation properties listed below. In the case where the
dino@2614 351 other properties do not have lists of the correct length, their values
dino@2614 352 are repeated to form a list with the same number of entries as
dino@2614 353 <span class="prop-name">'animation-name'</span>.
dino@937 354 </p>
dino@937 355 <table class="propdef">
dino@937 356 <tbody>
dino@937 357 <tr>
dino@937 358 <td>
dino@937 359 <em>Name:</em>
dino@937 360 </td>
dino@937 361 <td>
dino@937 362 <dfn id="animation-name">animation-name</dfn>
dino@937 363 </td>
dino@937 364 </tr>
dino@937 365 <tr>
dino@937 366 <td>
dino@937 367 <em>Value:</em>
dino@937 368 </td>
dino@937 369 <td>
dino@937 370 none | IDENT [, none | IDENT ]*
dino@937 371 </td>
dino@937 372 </tr>
dino@937 373 <tr>
dino@937 374 <td>
dino@937 375 <em>Initial:</em>
dino@937 376 </td>
dino@937 377 <td>
dino@937 378 none
dino@937 379 </td>
dino@937 380 </tr>
dino@937 381 <tr>
dino@937 382 <td>
dino@937 383 <em>Applies&nbsp;to:</em>
dino@937 384 </td>
dino@937 385 <td>
dino@937 386 block-level and inline-level elements
dino@937 387 </td>
dino@937 388 </tr>
dino@937 389 <tr>
dino@937 390 <td>
dino@937 391 <em>Inherited:</em>
dino@937 392 </td>
dino@937 393 <td>
dino@937 394 no
dino@937 395 </td>
dino@937 396 </tr>
dino@937 397 <tr>
dino@937 398 <td>
dino@937 399 <em>Percentages:</em>
dino@937 400 </td>
dino@937 401 <td>
dino@937 402 N/A
dino@937 403 </td>
dino@937 404 </tr>
dino@937 405 <tr>
dino@937 406 <td>
dino@937 407 <em>Media:</em>
dino@937 408 </td>
dino@937 409 <td>
dino@937 410 visual
dino@937 411 </td>
dino@937 412 </tr>
dino@937 413 <tr>
dino@937 414 <td>
dino@937 415 <em>Computed value:</em>
dino@937 416 </td>
dino@937 417 <td>
dino@937 418 Same as specified value.
dino@937 419 </td>
dino@937 420 </tr>
dino@937 421 </tbody>
dino@937 422 </table>
dino@937 423
dino@937 424 <!--
dino@937 425 <p>
dino@937 426 It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on <span class="prop-name">opacity</span> will add together and animations on <span class="prop-name">transform</span> will have their transformation matrices multiplied.
dino@937 427 </p>
dino@937 428 <div class="example">
dino@937 429 <p style="display:none">
dino@937 430 Example(s):
dino@937 431 </p>
dino@937 432 <pre>
dino@937 433 @keyframes 'border-bloat' {
dino@937 434 from {
dino@937 435 border-width: 0;
dino@937 436 }
dino@937 437 to {
dino@937 438 border-width: 10px;
dino@937 439 }
dino@937 440 }
dino@937 441
dino@937 442 @keyframes 'border-diet' {
dino@937 443 from {
dino@937 444 border-width: 4px;
dino@937 445 }
dino@937 446 to {
dino@937 447 border-width: 2px;
dino@937 448 }
dino@937 449 }
dino@937 450
dino@937 451 div {
dino@937 452 animation-name: 'border-bloat', 'border-diet';
dino@937 453 animation-duration: 10s, 4s;
dino@937 454 }
dino@937 455 </pre>
dino@937 456 <p>
dino@937 457 The above example has two animations executing on the same property, <span class="prop-name">border-width</span>. The animations are additive. That is, the
dino@937 458 resulting value for the property will be the addition of the values from the
dino@937 459 two animations.
dino@937 460 </p>
dino@937 461 <p>
dino@937 462 At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
dino@937 463 At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
dino@937 464 At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
dino@937 465 'border-diet' as it is no longer executing).
dino@937 466 </p>
dino@937 467 </div>
dino@937 468 -->
dino@937 469
dino@937 470
dino@937 471 <!-- ======================================================================================================= -->
dino@937 472 <h3>
dino@937 473 The <span class="prop-name">'animation-duration'</span> Property
dino@937 474 </h3>
dino@937 475 <p>
dino@937 476 The <span class="prop-name">'animation-duration'</span> property defines the length of time that an animation takes to complete one cycle.
dino@937 477 </p>
dino@937 478 <table class="propdef">
dino@937 479 <tbody>
dino@937 480 <tr>
dino@937 481 <td>
dino@937 482 <em>Name:</em>
dino@937 483 </td>
dino@937 484 <td>
dino@937 485 <dfn id="animation-duration">animation-duration</dfn>
dino@937 486 </td>
dino@937 487 </tr>
dino@937 488 <tr>
dino@937 489 <td>
dino@937 490 <em>Value:</em>
dino@937 491 </td>
dino@937 492 <td>
dino@937 493 &lt;time&gt; [, &lt;time&gt;]*
dino@937 494 </td>
dino@937 495 </tr>
dino@937 496 <tr>
dino@937 497 <td>
dino@937 498 <em>Initial:</em>
dino@937 499 </td>
dino@937 500 <td>
dino@937 501 0
dino@937 502 </td>
dino@937 503 </tr>
dino@937 504 <tr>
dino@937 505 <td>
dino@937 506 <em>Applies&nbsp;to:</em>
dino@937 507 </td>
dino@937 508 <td>
dino@937 509 block-level and inline-level elements
dino@937 510 </td>
dino@937 511 </tr>
dino@937 512 <tr>
dino@937 513 <td>
dino@937 514 <em>Inherited:</em>
dino@937 515 </td>
dino@937 516 <td>
dino@937 517 no
dino@937 518 </td>
dino@937 519 </tr>
dino@937 520 <tr>
dino@937 521 <td>
dino@937 522 <em>Percentages:</em>
dino@937 523 </td>
dino@937 524 <td>
dino@937 525 N/A
dino@937 526 </td>
dino@937 527 </tr>
dino@937 528 <tr>
dino@937 529 <td>
dino@937 530 <em>Media:</em>
dino@937 531 </td>
dino@937 532 <td>
dino@937 533 visual
dino@937 534 </td>
dino@937 535 </tr>
dino@937 536 <tr>
dino@937 537 <td>
dino@937 538 <em>Computed value:</em>
dino@937 539 </td>
dino@937 540 <td>
dino@937 541 Same as specified value.
dino@937 542 </td>
dino@937 543 </tr>
dino@937 544 </tbody>
dino@937 545 </table>
dino@937 546
dino@937 547 <p>
dino@2616 548 By default the value is '0', meaning that the animation cycle is
dino@2616 549 immediate. A negative value for <span
dino@2616 550 class="prop-name">animation-duration</span> is treated as '0'. In this
dino@2616 551 case <span class="prop-name">animation-fill-mode</span> still applies,
dino@2616 552 so an animation that fills backwards will show the value of the 0%
dino@2616 553 keyframe during any delay period, and an animation that fill forwards
dino@2616 554 will retain the value specified at the 100% keyframe, even if the
dino@2616 555 animation was instantaneous. Also, animation events are still fired.
dino@937 556 </p>
dino@937 557
dino@937 558 <!-- ======================================================================================================= -->
dino@937 559 <h3 id="animation-timing-function_tag">
dino@937 560 The <span class="prop-name">'animation-timing-function'</span> Property
dino@937 561 </h3>
dino@937 562 <p>
bert@1104 563 The <span class="prop-name">'animation-timing-function'</span> property describes how the animation will progress over one cycle of its duration. See the <span class="prop-name">'transition-timing-function'</span> property [[!CSS3-TRANSITIONS]] for a complete description of timing function calculation.
dino@937 564 </p>
dino@937 565 <table class="propdef">
dino@937 566 <tbody>
dino@937 567 <tr>
dino@937 568 <td>
dino@937 569 <em>Name:</em>
dino@937 570 </td>
dino@937 571 <td>
dino@937 572 <dfn id="animation-timing-function">animation-timing-function</dfn>
dino@937 573 </td>
dino@937 574 </tr>
dino@937 575 <tr>
dino@937 576 <td>
dino@937 577 <em>Value:</em>
dino@937 578 </td>
dino@937 579 <td>
dino@1908 580 ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(&lt;number&gt;[, start | end ]) | cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;) [, ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(&lt;number&gt;[, start | end ]) | cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)]*
dino@937 581 </td>
dino@937 582 </tr>
dino@937 583 <tr>
dino@937 584 <td>
dino@937 585 <em>Initial:</em>
dino@937 586 </td>
dino@937 587 <td>
dino@937 588 ease
dino@937 589 </td>
dino@937 590 </tr>
dino@937 591 <tr>
dino@937 592 <td>
dino@937 593 <em>Applies&nbsp;to:</em>
dino@937 594 </td>
dino@937 595 <td>
dino@937 596 block-level and inline-level elements
dino@937 597 </td>
dino@937 598 </tr>
dino@937 599 <tr>
dino@937 600 <td>
dino@937 601 <em>Inherited:</em>
dino@937 602 </td>
dino@937 603 <td>
dino@937 604 no
dino@937 605 </td>
dino@937 606 </tr>
dino@937 607 <tr>
dino@937 608 <td>
dino@937 609 <em>Percentages:</em>
dino@937 610 </td>
dino@937 611 <td>
dino@937 612 N/A
dino@937 613 </td>
dino@937 614 </tr>
dino@937 615 <tr>
dino@937 616 <td>
dino@937 617 <em>Media:</em>
dino@937 618 </td>
dino@937 619 <td>
dino@937 620 visual
dino@937 621 </td>
dino@937 622 </tr>
dino@937 623 <tr>
dino@937 624 <td>
dino@937 625 <em>Computed value:</em>
dino@937 626 </td>
dino@937 627 <td>
dino@937 628 Same as specified value.
dino@937 629 </td>
dino@937 630 </tr>
dino@937 631 </tbody>
dino@937 632 </table>
dino@937 633
dino@937 634 <p>
dino@937 635 For a keyframed animation, the <span class="prop-name">'animation-timing-function'</span> applies
dino@937 636 between keyframes, not over the entire animation. For example, in the case of an ease-in-out timing function, an animation will ease in at the start of the keyframe and ease out at the end of the keyframe. A <span class="prop-name">'animation-timing-function'</span> defined within a keyframe block applies to that keyframe, otherwise the timing function specified for the animation is used.
dino@937 637 </p>
dino@937 638
dino@937 639 <!-- ======================================================================================================= -->
dino@937 640 <h3>
dino@937 641 The <span class="prop-name">'animation-iteration-count'</span> Property
dino@937 642 </h3>
dino@937 643 <p>
dino@937 644 The <span class="prop-name">'animation-iteration-count'</span> property defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once. A value of <span class="prop-value">'infinite'</span> will cause the animation to repeat forever. Non-integer numbers will cause the animation to end part-way through a cycle. Negative values for <span class="prop-name">'animation-iteration-count'</span> are treated as zero. This property is often used with an <span class="prop-name">'animation-direction'</span> value of <span class="prop-value">'alternate'</span>, which will cause the animation to play in reverse on alternate cycles.
dino@937 645 </p>
dino@937 646 <table class="propdef">
dino@937 647 <tbody>
dino@937 648 <tr>
dino@937 649 <td>
dino@937 650 <em>Name:</em>
dino@937 651 </td>
dino@937 652 <td>
dino@937 653 <dfn id="animation-iteration-count">animation-iteration-count</dfn>
dino@937 654 </td>
dino@937 655 </tr>
dino@937 656 <tr>
dino@937 657 <td>
dino@937 658 <em>Value:</em>
dino@937 659 </td>
dino@937 660 <td>
dino@937 661 infinite | &lt;number&gt; [, infinite | &lt;number&gt;]*
dino@937 662 </td>
dino@937 663 </tr>
dino@937 664 <tr>
dino@937 665 <td>
dino@937 666 <em>Initial:</em>
dino@937 667 </td>
dino@937 668 <td>
dino@937 669 1
dino@937 670 </td>
dino@937 671 </tr>
dino@937 672 <tr>
dino@937 673 <td>
dino@937 674 <em>Applies&nbsp;to:</em>
dino@937 675 </td>
dino@937 676 <td>
dino@937 677 block-level and inline-level elements
dino@937 678 </td>
dino@937 679 </tr>
dino@937 680 <tr>
dino@937 681 <td>
dino@937 682 <em>Inherited:</em>
dino@937 683 </td>
dino@937 684 <td>
dino@937 685 no
dino@937 686 </td>
dino@937 687 </tr>
dino@937 688 <tr>
dino@937 689 <td>
dino@937 690 <em>Percentages:</em>
dino@937 691 </td>
dino@937 692 <td>
dino@937 693 N/A
dino@937 694 </td>
dino@937 695 </tr>
dino@937 696 <tr>
dino@937 697 <td>
dino@937 698 <em>Media:</em>
dino@937 699 </td>
dino@937 700 <td>
dino@937 701 visual
dino@937 702 </td>
dino@937 703 </tr>
dino@937 704 <tr>
dino@937 705 <td>
dino@937 706 <em>Computed value:</em>
dino@937 707 </td>
dino@937 708 <td>
dino@937 709 Same as specified value.
dino@937 710 </td>
dino@937 711 </tr>
dino@937 712 </tbody>
dino@937 713 </table><!-- ======================================================================================================= -->
dino@937 714 <h3>
dino@937 715 The <span class="prop-name">'animation-direction'</span> Property
dino@937 716 </h3>
dino@937 717 <p>
dino@937 718 The <span class="prop-name">'animation-direction'</span> property defines whether or not the animation should play in reverse on alternate cycles. If <span class="prop-value">'alternate'</span> is specified, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.
dino@937 719 </p>
dino@937 720 <table class="propdef">
dino@937 721 <tbody>
dino@937 722 <tr>
dino@937 723 <td>
dino@937 724 <em>Name:</em>
dino@937 725 </td>
dino@937 726 <td>
dino@937 727 <dfn id="animation-direction">animation-direction</dfn>
dino@937 728 </td>
dino@937 729 </tr>
dino@937 730 <tr>
dino@937 731 <td>
dino@937 732 <em>Value:</em>
dino@937 733 </td>
dino@937 734 <td>
dino@937 735 normal | alternate [, normal | alternate]*
dino@937 736 </td>
dino@937 737 </tr>
dino@937 738 <tr>
dino@937 739 <td>
dino@937 740 <em>Initial:</em>
dino@937 741 </td>
dino@937 742 <td>
dino@937 743 normal
dino@937 744 </td>
dino@937 745 </tr>
dino@937 746 <tr>
dino@937 747 <td>
dino@937 748 <em>Applies&nbsp;to:</em>
dino@937 749 </td>
dino@937 750 <td>
dino@937 751 block-level and inline-level elements
dino@937 752 </td>
dino@937 753 </tr>
dino@937 754 <tr>
dino@937 755 <td>
dino@937 756 <em>Inherited:</em>
dino@937 757 </td>
dino@937 758 <td>
dino@937 759 no
dino@937 760 </td>
dino@937 761 </tr>
dino@937 762 <tr>
dino@937 763 <td>
dino@937 764 <em>Percentages:</em>
dino@937 765 </td>
dino@937 766 <td>
dino@937 767 N/A
dino@937 768 </td>
dino@937 769 </tr>
dino@937 770 <tr>
dino@937 771 <td>
dino@937 772 <em>Media:</em>
dino@937 773 </td>
dino@937 774 <td>
dino@937 775 visual
dino@937 776 </td>
dino@937 777 </tr>
dino@937 778 <tr>
dino@937 779 <td>
dino@937 780 <em>Computed value:</em>
dino@937 781 </td>
dino@937 782 <td>
dino@937 783 Same as specified value.
dino@937 784 </td>
dino@937 785 </tr>
dino@937 786 </tbody>
dino@937 787 </table><!-- ======================================================================================================= -->
dino@937 788 <h3>
dino@937 789 The <span class="prop-name">'animation-play-state'</span> Property
dino@937 790 </h3>
dino@937 791
dino@937 792 <p>
dino@937 793 The <span class="prop-name">'animation-play-state'</span> property defines whether the animation is running or paused. A running animation can be paused by setting this property to <span class="prop-value">'paused'</span>. To continue running a paused animation this property can be set to <span class="prop-value">'running'</span>. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation.
dino@937 794 </p>
dino@937 795 <table class="propdef">
dino@937 796 <tbody>
dino@937 797 <tr>
dino@937 798 <td>
dino@937 799 <em>Name:</em>
dino@937 800 </td>
dino@937 801 <td>
dino@937 802 <dfn id="animation-play-state">animation-play-state</dfn>
dino@937 803 </td>
dino@937 804 </tr>
dino@937 805 <tr>
dino@937 806 <td>
dino@937 807 <em>Value:</em>
dino@937 808 </td>
dino@937 809 <td>
dino@937 810 running | paused [, running | paused]*
dino@937 811 </td>
dino@937 812 </tr>
dino@937 813 <tr>
dino@937 814 <td>
dino@937 815 <em>Initial:</em>
dino@937 816 </td>
dino@937 817 <td>
dino@937 818 running
dino@937 819 </td>
dino@937 820 </tr>
dino@937 821 <tr>
dino@937 822 <td>
dino@937 823 <em>Applies&nbsp;to:</em>
dino@937 824 </td>
dino@937 825 <td>
dino@937 826 block-level and inline-level elements
dino@937 827 </td>
dino@937 828 </tr>
dino@937 829 <tr>
dino@937 830 <td>
dino@937 831 <em>Inherited:</em>
dino@937 832 </td>
dino@937 833 <td>
dino@937 834 no
dino@937 835 </td>
dino@937 836 </tr>
dino@937 837 <tr>
dino@937 838 <td>
dino@937 839 <em>Percentages:</em>
dino@937 840 </td>
dino@937 841 <td>
dino@937 842 N/A
dino@937 843 </td>
dino@937 844 </tr>
dino@937 845 <tr>
dino@937 846 <td>
dino@937 847 <em>Media:</em>
dino@937 848 </td>
dino@937 849 <td>
dino@937 850 visual
dino@937 851 </td>
dino@937 852 </tr>
dino@937 853 <tr>
dino@937 854 <td>
dino@937 855 <em>Computed value:</em>
dino@937 856 </td>
dino@937 857 <td>
dino@937 858 Same as specified value.
dino@937 859 </td>
dino@937 860 </tr>
dino@937 861 </tbody>
dino@937 862 </table><!-- ======================================================================================================= -->
dino@937 863 <h3>
dino@937 864 The <span class="prop-name">'animation-delay'</span> Property
dino@937 865 </h3>
dino@937 866 <p>
dino@1908 867 The <span class="prop-name">'animation-delay'</span> property defines
dino@1908 868 when the animation will start. It allows an animation to begin
dino@1908 869 execution some time after it is applied. An <span
dino@1908 870 class="prop-name">'animation-delay'</span> value of '0' means the
dino@1908 871 animation will execute as soon as it is applied. Otherwise, the value
dino@1908 872 specifies an offset from the moment the animation is applied, and the
dino@1908 873 animation will delay execution by that offset.
dino@937 874 </p>
dino@937 875 <p>
dino@1908 876 If the value for <span class="prop-name">'animation-delay'</span> is a
dino@1908 877 negative time offset then the animation will execute the moment it is
dino@1908 878 applied, but will appear to have begun execution at the specified
dino@1908 879 offset. That is, the animation will appear to begin part-way through
dino@1908 880 its play cycle. In the case where an animation has implied starting
dino@1908 881 values and a negative <span
dino@1908 882 class="prop-name">'animation-delay'</span>, the starting values are
dino@1908 883 taken from the moment the animation is applied.
dino@937 884 </p>
dino@937 885 <table class="propdef">
dino@937 886 <tbody>
dino@937 887 <tr>
dino@937 888 <td>
dino@937 889 <em>Name:</em>
dino@937 890 </td>
dino@937 891 <td>
dino@1908 892 <dfn id="animation-delay">animation-delay</dfn>
dino@937 893 </td>
dino@937 894 </tr>
dino@937 895 <tr>
dino@937 896 <td>
dino@937 897 <em>Value:</em>
dino@937 898 </td>
dino@937 899 <td>
dino@937 900 &lt;time&gt; [, &lt;time&gt;]*
dino@937 901 </td>
dino@937 902 </tr>
dino@937 903 <tr>
dino@937 904 <td>
dino@937 905 <em>Initial:</em>
dino@937 906 </td>
dino@937 907 <td>
dino@937 908 0
dino@937 909 </td>
dino@937 910 </tr>
dino@937 911 <tr>
dino@937 912 <td>
dino@937 913 <em>Applies&nbsp;to:</em>
dino@937 914 </td>
dino@937 915 <td>
dino@937 916 block-level and inline-level elements
dino@937 917 </td>
dino@937 918 </tr>
dino@937 919 <tr>
dino@937 920 <td>
dino@937 921 <em>Inherited:</em>
dino@937 922 </td>
dino@937 923 <td>
dino@937 924 no
dino@937 925 </td>
dino@937 926 </tr>
dino@937 927 <tr>
dino@937 928 <td>
dino@937 929 <em>Percentages:</em>
dino@937 930 </td>
dino@937 931 <td>
dino@937 932 N/A
dino@937 933 </td>
dino@937 934 </tr>
dino@937 935 <tr>
dino@937 936 <td>
dino@937 937 <em>Media:</em>
dino@937 938 </td>
dino@937 939 <td>
dino@937 940 visual
dino@937 941 </td>
dino@937 942 </tr>
dino@937 943 <tr>
dino@937 944 <td>
dino@937 945 <em>Computed value:</em>
dino@937 946 </td>
dino@937 947 <td>
dino@937 948 Same as specified value.
dino@937 949 </td>
dino@937 950 </tr>
dino@937 951 </tbody>
dino@937 952 </table><!-- ======================================================================================================= -->
dino@937 953 <h3>
dino@1908 954 The <span class="prop-name">'animation-fill-mode'</span> Property
dino@1908 955 </h3>
dino@1908 956 <p>
dino@1908 957 The <span class="prop-name">'animation-fill-mode'</span> property defines
dino@1908 958 what values are applied by the animation outside the time it is executing.
dino@1908 959 By default, an animation will not affect property values between the
dino@1908 960 time it is applied (the <span class="prop-name">'animation-name'</span> property is
dino@1908 961 set on an element) and the time it begins execution (which is determined by
dino@1908 962 the <span class="prop-name">'animation-delay'</span> property). Also, by
dino@1908 963 default an animation does not affect property values after the animation
dino@1908 964 ends (determined by the <span class="prop-name">'animation-duration'</span> property).
dino@1908 965 The value of <span class="prop-name">'animation-fill-mode'</span> can
dino@1908 966 override this behavior.
dino@1908 967 </p>
dino@1908 968 <p>
dino@1908 969 If the value for <span class="prop-name">'animation-fill-mode'</span> is
dino@1908 970 <span class="prop-value">'backwards'</span>, then the animation will
dino@1908 971 apply the property values defined in its 0% or 'from' keyframe as soon
dino@1908 972 as the animation is applied, during the period defined by
dino@1908 973 <span class="prop-name">'animation-delay'</span>.
dino@1908 974 </p>
dino@1908 975 <p>
dino@1908 976 If the value for <span class="prop-name">'animation-fill-mode'</span>
dino@1908 977 is <span class="prop-value">'forwards'</span>, then the animation will
dino@1908 978 apply the property values defined in its last executing keyframe after
dino@1908 979 the final iteration of the animation, until the animation style is
dino@1908 980 removed. The last executing keyframe is the 'to' or '100%' keyframe,
dino@1908 981 unless the animation has <span
dino@1908 982 class="prop-name">'animation-direction'</span> set to <span
dino@1908 983 class="prop-value">'alternate'</span> and both a finite and even
dino@1908 984 iteration count, in which case it is the 'from' or '0%' keyframe.
dino@1908 985 </p>
dino@1908 986 <p>
dino@1908 987 If the value for <span class="prop-name">'animation-fill-mode'</span>
dino@1908 988 is <span class="prop-value">'both'</span>, then the animation will
dino@1908 989 follow the rules for both 'forwards' and 'backwards'. That is, it will
dino@1908 990 extend the animation properties in both directions.
dino@1908 991 </p>
dino@1908 992 <table class="propdef">
dino@1908 993 <tbody>
dino@1908 994 <tr>
dino@1908 995 <td>
dino@1908 996 <em>Name:</em>
dino@1908 997 </td>
dino@1908 998 <td>
dino@1908 999 <dfn id="animation-fill-mode">animation-fill-mode</dfn>
dino@1908 1000 </td>
dino@1908 1001 </tr>
dino@1908 1002 <tr>
dino@1908 1003 <td>
dino@1908 1004 <em>Value:</em>
dino@1908 1005 </td>
dino@1908 1006 <td>
dino@1908 1007 none | forwards | backwards | both [, none | forwards | backwards | both]*
dino@1908 1008 </td>
dino@1908 1009 </tr>
dino@1908 1010 <tr>
dino@1908 1011 <td>
dino@1908 1012 <em>Initial:</em>
dino@1908 1013 </td>
dino@1908 1014 <td>
dino@1908 1015 none
dino@1908 1016 </td>
dino@1908 1017 </tr>
dino@1908 1018 <tr>
dino@1908 1019 <td>
dino@1908 1020 <em>Applies&nbsp;to:</em>
dino@1908 1021 </td>
dino@1908 1022 <td>
dino@1908 1023 block-level and inline-level elements
dino@1908 1024 </td>
dino@1908 1025 </tr>
dino@1908 1026 <tr>
dino@1908 1027 <td>
dino@1908 1028 <em>Inherited:</em>
dino@1908 1029 </td>
dino@1908 1030 <td>
dino@1908 1031 no
dino@1908 1032 </td>
dino@1908 1033 </tr>
dino@1908 1034 <tr>
dino@1908 1035 <td>
dino@1908 1036 <em>Percentages:</em>
dino@1908 1037 </td>
dino@1908 1038 <td>
dino@1908 1039 N/A
dino@1908 1040 </td>
dino@1908 1041 </tr>
dino@1908 1042 <tr>
dino@1908 1043 <td>
dino@1908 1044 <em>Media:</em>
dino@1908 1045 </td>
dino@1908 1046 <td>
dino@1908 1047 visual
dino@1908 1048 </td>
dino@1908 1049 </tr>
dino@1908 1050 <tr>
dino@1908 1051 <td>
dino@1908 1052 <em>Computed value:</em>
dino@1908 1053 </td>
dino@1908 1054 <td>
dino@1908 1055 Same as specified value.
dino@1908 1056 </td>
dino@1908 1057 </tr>
dino@1908 1058 </tbody>
dino@1908 1059 </table><!-- ======================================================================================================= -->
dino@1908 1060 <h3>
dino@937 1061 The <span class="prop-name">'animation'</span> Shorthand Property
dino@937 1062 </h3>
dino@937 1063 <p>
dino@1908 1064 The <span class="prop-name">'animation'</span> shorthand property
dino@1908 1065 combines seven of the animation properties into a single property.
dino@937 1066 </p>
simon@2323 1067 <p>
simon@2323 1068 Note that order is important in this property. The first value that can be
simon@2323 1069 parsed as a time is assigned to the animation-duration. The second value that
simon@2323 1070 can be parsed as a time is assigned to animation-delay.
simon@2323 1071 </p>
simon@2323 1072 <p class="issue">
simon@2323 1073 An alternative proposal is to accept the font shorthand approach of
simon@2323 1074 using a "/" character between the values of the same type. eg. 2s/4s would
simon@2323 1075 mean a duration of 2 seconds and a delay of 4 seconds.
simon@2323 1076 </p>
dino@937 1077 <table class="propdef">
dino@937 1078 <tbody>
dino@937 1079 <tr>
dino@937 1080 <td>
dino@937 1081 <em>Name:</em>
dino@937 1082 </td>
dino@937 1083 <td>
dino@937 1084 <dfn id="animation">animation</dfn>
dino@937 1085 </td>
dino@937 1086 </tr>
dino@937 1087 <tr>
dino@937 1088 <td>
dino@937 1089 <em>Value:</em>
dino@937 1090 </td>
dino@937 1091 <td>
dino@937 1092 [&lt;animation-name&gt; ||
dino@937 1093 &lt;animation-duration&gt; ||
dino@937 1094 &lt;animation-timing-function&gt; ||
dino@937 1095 &lt;animation-delay&gt; ||
dino@937 1096 &lt;animation-iteration-count&gt; ||
dino@1908 1097 &lt;animation-direction&gt; ||
dino@1908 1098 &lt;animation-fill-mode&gt;]
dino@937 1099 [, [&lt;animation-name&gt; ||
dino@937 1100 &lt;animation-duration&gt; ||
dino@937 1101 &lt;animation-timing-function&gt; ||
dino@937 1102 &lt;animation-delay&gt; ||
dino@937 1103 &lt;animation-iteration-count&gt; ||
dino@1908 1104 &lt;animation-direction&gt; ||
dino@1908 1105 &lt;animation-fill-mode&gt;] ]*
dino@937 1106 </td>
dino@937 1107 </tr>
dino@937 1108 <tr>
dino@937 1109 <td>
dino@937 1110 <em>Initial:</em>
dino@937 1111 </td>
dino@937 1112 <td>
dino@937 1113 see individual properties
dino@937 1114 </td>
dino@937 1115 </tr>
dino@937 1116 <tr>
dino@937 1117 <td>
dino@937 1118 <em>Applies&nbsp;to:</em>
dino@937 1119 </td>
dino@937 1120 <td>
dino@937 1121 block-level and inline-level elements
dino@937 1122 </td>
dino@937 1123 </tr>
dino@937 1124 <tr>
dino@937 1125 <td>
dino@937 1126 <em>Inherited:</em>
dino@937 1127 </td>
dino@937 1128 <td>
dino@937 1129 no
dino@937 1130 </td>
dino@937 1131 </tr>
dino@937 1132 <tr>
dino@937 1133 <td>
dino@937 1134 <em>Percentages:</em>
dino@937 1135 </td>
dino@937 1136 <td>
dino@937 1137 N/A
dino@937 1138 </td>
dino@937 1139 </tr>
dino@937 1140 <tr>
dino@937 1141 <td>
dino@937 1142 <em>Media:</em>
dino@937 1143 </td>
dino@937 1144 <td>
dino@937 1145 visual
dino@937 1146 </td>
dino@937 1147 </tr>
dino@937 1148 <tr>
dino@937 1149 <td>
dino@937 1150 <em>Computed value:</em>
dino@937 1151 </td>
dino@937 1152 <td>
dino@937 1153 Same as specified value.
dino@937 1154 </td>
dino@937 1155 </tr>
dino@937 1156 </tbody>
dino@937 1157 </table><!-- ======================================================================================================= -->
dino@937 1158 <h2>
dino@937 1159 Animation Events
dino@937 1160 </h2>
dino@937 1161 <p>
dino@937 1162 Several animation related events are available through the <a
dino@937 1163 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event
dino@937 1164 system</a>. The start and end of an animation, and the end of each
dino@937 1165 iteration of an animation all generate DOM events. An element can have
dino@937 1166 multiple properties being animated simultaneously. This can occur either
dino@937 1167 with a single <span class="prop-name">animation-name</span> value with
dino@937 1168 keyframes containing multiple properties, or with multiple <span
dino@937 1169 class="prop-name">animation-name</span> values. For the purposes of
dino@937 1170 events, each <span class="prop-name">animation-name</span> specifies a
dino@937 1171 single animation. Therefore an event will be generated for each <span
dino@937 1172 class="prop-name">animation-name</span> value and not necessarily for
dino@937 1173 each property being animated.
dino@937 1174 </p>
dino@937 1175 <p>
dino@937 1176 The time the animation has been running is sent with each event
dino@937 1177 generated. This allows the event handler to determine the current
dino@937 1178 iteration of a looping animation or the current position of an
dino@937 1179 alternating animation. This time does not include any time the animation
dino@937 1180 was in the <code>paused</code> play state.
dino@937 1181 </p>
dino@937 1182 <dl>
dino@937 1183 <dt>
dino@937 1184 <b>Interface <i><a id="Events-AnimationEvent" name='Events-AnimationEvent'>AnimationEvent</a></i></b>
dino@937 1185 </dt>
dino@937 1186 <dd>
dino@937 1187 <p>
dino@937 1188 The <code>AnimationEvent</code> interface provides specific contextual information associated with Animation events.
dino@937 1189 </p>
dino@937 1190 <dl>
dino@937 1191 <dt>
dino@937 1192 <br>
dino@937 1193 <b>IDL Definition</b>
dino@937 1194 </dt>
dino@937 1195 <dd>
dino@937 1196 <div class='idl-code'>
dino@937 1197 <pre>
dino@937 1198 interface AnimationEvent : Event {
dino@937 1199 readonly attribute DOMString animationName;
dino@937 1200 readonly attribute float elapsedTime;
dino@937 1201 void initAnimationEvent(in DOMString typeArg,
dino@937 1202 in boolean canBubbleArg,
dino@937 1203 in boolean cancelableArg,
dino@937 1204 in DOMString animationNameArg,
dino@937 1205 in float elapsedTimeArg);
dino@937 1206 };
dino@937 1207 </pre>
dino@937 1208 </div>
dino@937 1209 </dd>
dino@937 1210 <dt>
dino@937 1211 <b>Attributes</b>
dino@937 1212 </dt>
dino@937 1213 <dd>
dino@937 1214 <dl>
dino@937 1215 <dt>
dino@937 1216 <code class='attribute-name'><a id="Events-AnimationEvent-animationName" name='Events-AnimationEvent-animationName'>animationName</a></code> of type <code>DOMString</code>, readonly
dino@937 1217 </dt>
dino@937 1218 <dd>
dino@2614 1219 The value of the <span
dino@2614 1220 class="prop-name">animation-name</span> property of the
dino@2614 1221 animation that fired the event.
dino@937 1222 </dd>
dino@937 1223 </dl>
dino@937 1224 <dl>
dino@937 1225 <dt>
dino@937 1226 <code class='attribute-name'><a id="Events-AnimationEvent-elapsedTime" name='Events-AnimationEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly
dino@937 1227 </dt>
dino@937 1228 <dd>
dino@2614 1229 The amount of time the animation has been running, in
dino@2614 1230 seconds, when this event fired, excluding any time the
dino@2614 1231 animation was paused. For an "animationstart" event, the
dino@2614 1232 elapsedTime is zero unless there was a negative value for
dino@2614 1233 <span class="prop-name">animation-delay</span>, in which
dino@2614 1234 case the event will be fired with an elapsedTime of (-1 *
dino@2614 1235 delay).
dino@937 1236 </dd>
dino@937 1237 </dl>
dino@937 1238 </dd>
dino@937 1239 <dt>
dino@937 1240 <b>Methods</b>
dino@937 1241 </dt>
dino@937 1242 <dd>
dino@937 1243 <dl>
dino@937 1244 <dt>
dino@937 1245 <code class='method-name'><a id="Events-AnimationEvent-initAnimationEvent" name='Events-AnimtionEvent-initAnimationEvent'>initAnimationEvent</a></code>
dino@937 1246 </dt>
dino@937 1247 <dd>
dino@937 1248 <div class='method'>
bert@1104 1249 The <code>initAnimationEvent</code> method is used to initialize the value of an <code>AnimationEvent</code> created through the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent'><code>DocumentEvent</code></a> interface. This method may only be called before the <code>AnimationEvent</code> has been dispatched via the <code>dispatchEvent</code> method, though it may be called multiple times during that phase if necessary. If called multiple times, the final invocation takes precedence.
dino@937 1250 <div class='parameters'>
dino@937 1251 <b>Parameters</b>
dino@937 1252 <div class='paramtable'>
dino@937 1253 <dl>
dino@937 1254 <dt>
dino@937 1255 <code class='parameter-name'>typeArg</code> of type <code>DOMString</code>
dino@937 1256 </dt>
dino@937 1257 <dd>
dino@937 1258 Specifies the event type.<br>
dino@937 1259 </dd>
dino@937 1260 <dt>
dino@937 1261 <code class='parameter-name'>canBubbleArg</code> of type <code>boolean</code>
dino@937 1262 </dt>
dino@937 1263 <dd>
dino@937 1264 Specifies whether or not the event can bubble.<br>
dino@937 1265 </dd>
dino@937 1266 <dt>
dino@937 1267 <code class='parameter-name'>cancelableArg</code> of type <code>boolean</code>
dino@937 1268 </dt>
dino@937 1269 <dd>
dino@937 1270 Specifies whether or not the event's default action can be prevented.
dino@937 1271 </dd>
dino@937 1272 <dt>
dino@937 1273 <code class='parameter-name'>animationNameArg</code> of type <code>DOMString</code>
dino@937 1274 </dt>
dino@937 1275 <dd>
bert@1104 1276 Specifies the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event'><code>Event</code></a>'s animation name.<br>
dino@937 1277 </dd>
dino@937 1278 <dt>
dino@937 1279 <code class='parameter-name'>elapsedTimeArg</code> of type <code>float</code>
dino@937 1280 </dt>
dino@937 1281 <dd>
dino@937 1282 Specifies the amount of time, in seconds, the animation has been running at the time of initialization.
dino@937 1283 </dd>
dino@937 1284 </dl>
dino@937 1285 </div>
dino@937 1286 </div><!-- parameters -->
dino@937 1287 <div>
dino@937 1288 <b>No Return Value</b>
dino@937 1289 </div>
dino@937 1290 <div>
dino@937 1291 <b>No Exceptions</b>
dino@937 1292 </div>
dino@937 1293 </div><!-- method -->
dino@937 1294 </dd>
dino@937 1295 </dl>
dino@937 1296 </dd>
dino@937 1297 </dl>
dino@937 1298 </dd>
dino@937 1299 </dl>
dino@937 1300 <p>
dino@937 1301 The different types of Animation events that can occur are:
dino@937 1302 </p>
dino@937 1303 <dl>
dino@937 1304 <dt>
dino@937 1305 <b>animationstart</b>
dino@937 1306 </dt>
dino@937 1307 <dd>
dino@2614 1308 The 'animationstart' event occurs at the start of the animation. If there is an <span
dino@2614 1309 class="prop-name">animation-delay</span> then this event will fire once the delay period
dino@2614 1310 has expired. A negative delay will cause the event to fire with an elapsedTime equal to
dino@2614 1311 the absolute value of the delay.
dino@937 1312 <ul>
dino@937 1313 <li>Bubbles: Yes
dino@937 1314 </li>
dino@937 1315 <li>Cancelable: Yes
dino@937 1316 </li>
dino@937 1317 <li>Context Info: animationName
dino@937 1318 </li>
dino@937 1319 </ul>
dino@937 1320 </dd>
dino@937 1321 <dt>
dino@937 1322 <b>animationend</b>
dino@937 1323 </dt>
dino@937 1324 <dd>
dino@937 1325 The 'animationend' event occurs when the animation finishes.
dino@937 1326 <ul>
dino@937 1327 <li>Bubbles: Yes
dino@937 1328 </li>
dino@937 1329 <li>Cancelable: Yes
dino@937 1330 </li>
dino@937 1331 <li>Context Info: animationName, elapsedTime
dino@937 1332 </li>
dino@937 1333 </ul>
dino@937 1334 </dd>
dino@937 1335 <dt>
dino@937 1336 <b>animationiteration</b>
dino@937 1337 </dt>
dino@937 1338 <dd>
dino@937 1339 The 'animationiteration' event occurs at the end of each iteration of an animation for which <code>animation-iteration-count</code> is greater than one. This event does not occur for animations with an iteration count of one.
dino@937 1340 <ul>
dino@937 1341 <li>Bubbles: Yes
dino@937 1342 </li>
dino@937 1343 <li>Cancelable: Yes
dino@937 1344 </li>
dino@937 1345 <li>Context Info: animationName, elapsedTime
dino@937 1346 </li>
dino@937 1347 </ul>
dino@937 1348 </dd>
dino@937 1349 </dl>
dino@937 1350 <!-- ======================================================================================================= -->
dino@937 1351 <h2>
dino@937 1352 DOM Interfaces
dino@937 1353 </h2>
dino@937 1354 <p>
dino@937 1355 CSS animation is exposed to the CSSOM through a pair of new interfaces
dino@937 1356 describing the keyframes.
dino@937 1357 </p>
dino@937 1358 <dl>
dino@937 1359 <dt>
dino@937 1360 <b>Interface <i><a id="DOM-CSSRule" name='DOM-CSSRule'>CSSRule</a></i></b>
dino@937 1361 </dt>
dino@937 1362 <dd>
dino@937 1363 <p>
dino@937 1364 The following 2 rule types are added to the <code>CSSRule</code> interface. They provide identification for the new keyframe and keyframes rules.
dino@937 1365 </p>
dino@937 1366 <dl>
dino@937 1367
dino@937 1368 <dt>
dino@937 1369 <b>IDL Definition</b>
dino@937 1370 </dt>
dino@937 1371 <dd>
dino@937 1372 <div class='idl-code'>
dino@937 1373 <pre>
dino@937 1374 interface CSSRule {
dino@937 1375 ...
dino@937 1376 const unsigned short KEYFRAMES_RULE = 7;
dino@937 1377 const unsigned short KEYFRAME_RULE = 8;
dino@937 1378 ...
dino@937 1379 };</pre>
dino@937 1380 </div>
dino@937 1381 </dd> <!-- IDL -->
dino@937 1382 </dl>
dino@937 1383 </dd>
dino@937 1384
dino@937 1385 <dt>
dino@937 1386 <b>Interface <i><a id="DOM-CSSKeyframeRule" name='DOM-CSSKeyframeRule'>CSSKeyframeRule</a></i></b>
dino@937 1387 </dt>
dino@937 1388 <dd>
dino@937 1389 <p>
dino@937 1390 The <code>CSSKeyframeRule</code> interface represents the style rule for a single key.
dino@937 1391 </p>
dino@937 1392 <dl>
dino@937 1393 <dt>
dino@937 1394 <br>
dino@937 1395 <b>IDL Definition</b>
dino@937 1396 </dt>
dino@937 1397 <dd>
dino@937 1398 <div class='idl-code'>
dino@937 1399 <pre>
dino@937 1400 interface CSSKeyframeRule : CSSRule {
dino@937 1401 attribute DOMString keyText;
dino@937 1402 readonly attribute CSSStyleDeclaration style;
dino@937 1403 };
dino@937 1404 </pre>
dino@937 1405 </div><br>
dino@937 1406 </dd>
dino@937 1407 <dt>
dino@937 1408 <b>Attributes</b>
dino@937 1409 </dt>
dino@937 1410 <dd>
dino@937 1411 <dl>
dino@937 1412 <dt>
dino@937 1413 <code class='attribute-name'><a id="DOM-CSSKeyframeRule-keyText" name='DOM-CSSKeyframeRule-keyText'>keyText</a></code> of type <code>DOMString</code>
dino@937 1414 </dt>
dino@937 1415 <dd>
dino@937 1416 This attribute represents the key as the string representation of a floating point number between 0 and 1. If the value
dino@937 1417 in the CSS style is <code>from</code> this value will be 0, and if the value in the CSS style is <code>to</code> this
dino@937 1418 value will be 1.<br>
dino@937 1419 </dd>
dino@937 1420 </dl>
dino@937 1421 </dd>
dino@937 1422 <dd>
dino@937 1423 <dl>
dino@937 1424 <dt>
dino@937 1425 <code class='attribute-name'><a id="DOM-CSSKeyframeRule-style" name='DOM-CSSKeyframeRule-style'>style</a></code> of type <code>CSSStyleDeclaration</code>
dino@937 1426 </dt>
dino@937 1427 <dd>
dino@937 1428 This attribute represents the style associated with this keyframe.<br>
dino@937 1429 </dd>
dino@937 1430 </dl>
dino@937 1431 </dd>
dino@937 1432 <dt>
dino@937 1433 <b>No Methods</b>
dino@937 1434 </dt>
dino@937 1435 </dl>
dino@937 1436 </dd>
dino@937 1437 </dl>
dino@937 1438 <dl>
dino@937 1439 <dt>
dino@937 1440 <b>Interface <i><a id="DOM-CSSKeyframesRule" name='DOM-CSSKeyframesRule'>CSSKeyframesRule</a></i></b>
dino@937 1441 </dt>
dino@937 1442 <dd>
dino@937 1443 <p>
dino@937 1444 The <code>CSSKeyframesRule</code> interface represents a complete set of keyframes for a single animation.
dino@937 1445 </p>
dino@937 1446 <dl>
dino@937 1447 <dt>
dino@937 1448 <br>
dino@937 1449 <b>IDL Definition</b>
dino@937 1450 </dt>
dino@937 1451 <dd>
dino@937 1452 <div class='idl-code'>
dino@937 1453 <pre>
dino@937 1454 interface CSSKeyframesRule : CSSRule {
dino@937 1455 attribute DOMString name;
dino@937 1456 readonly attribute CSSRuleList cssRules;
dino@937 1457
dino@2614 1458 void appendRule(in DOMString rule);
dino@937 1459 void deleteRule(in DOMString key);
dino@937 1460 CSSKeyframeRule findRule(in DOMString key);
dino@937 1461 };
dino@937 1462 </pre>
dino@937 1463 </div><br>
dino@937 1464 </dd>
dino@937 1465 <dt>
dino@937 1466 <b>Attributes</b>
dino@937 1467 </dt>
dino@937 1468 <dd>
dino@937 1469 <dl>
dino@937 1470 <dt>
dino@937 1471 <code class='attribute-name'><a id="DOM-CSSKeyframesRule-name" name='DOM-CSSKeyframesRule-name'>name</a></code> of type <code>DOMString</code>
dino@937 1472 </dt>
dino@937 1473 <dd>
dino@937 1474 This attribute is the name of the keyframes, used by the <code>animation-name</code> property.<br>
dino@937 1475 </dd>
dino@937 1476 </dl>
dino@937 1477 </dd>
dino@937 1478 <dd>
dino@937 1479 <dl>
dino@937 1480 <dt>
dino@937 1481 <code class='attribute-name'><a id="DOM-CSSKeyframeRules-cssRules" name='DOM-CSSKeyframeRules-cssRules'>cssRules</a></code> of type <code>CSSRuleList</code>
dino@937 1482 </dt>
dino@937 1483 <dd>
dino@937 1484 This attribute gives access to the keyframes in the list.<br>
dino@937 1485 </dd>
dino@937 1486 </dl>
dino@937 1487 </dd>
dino@937 1488 <dt>
dino@937 1489 <b>Methods</b>
dino@937 1490 <dd>
dino@937 1491 <dl>
dino@937 1492 <!-- ======================================================================================================= -->
dino@937 1493 <dt>
dino@2614 1494 <code class='method-name'><a id="DOM-CSSKeyframesRule-appendRule" name='DOM-CSSKeyframesRule-appendRule'>appendRule</a></code>
dino@937 1495 </dt>
dino@937 1496 <dd>
dino@937 1497 <div class='method'>
dino@2614 1498 The <code>appendRule</code> method appends the passed CSSKeyframeRule into the list at the passed key.
dino@937 1499 <div class='parameters'>
dino@937 1500 <b>Parameters</b>
dino@937 1501 <div class='paramtable'>
dino@937 1502 <dl>
dino@937 1503 <dt>
dino@937 1504 <code class='parameter-name'>rule</code> of type <code>DOMString</code>
dino@937 1505 </dt>
dino@937 1506 <dd>
dino@2614 1507 The rule to be appended, expressed in the same syntax as one entry in the
dino@2614 1508 <code>@keyframes</code> rule.
dino@937 1509 </dd>
dino@937 1510 </dl>
dino@937 1511 </div>
dino@937 1512 </div><!-- parameters -->
dino@937 1513 <div class='return-value'>
dino@937 1514 <b>No Return Value</b>
dino@937 1515 </div>
dino@937 1516 <div>
dino@937 1517 <b>No Exceptions</b>
dino@937 1518 </div>
dino@937 1519 </div><!-- ======================================================================================================= -->
dino@937 1520 </dd>
dino@937 1521 <dt>
dino@937 1522 <code class='method-name'><a id="DOM-CSSKeyframesRule-deleteRule" name='DOM-CSSKeyframesRule-deleteRule'>deleteRule</a></code>
dino@937 1523 </dt>
dino@937 1524 <dd>
dino@937 1525 <div class='method'>
dino@937 1526 The <code>deleteRule</code> method deletes the CSSKeyframeRule with the passed key. If a rule with this key
dino@937 1527 does not exist, the method does nothing.
dino@937 1528 <div class='parameters'>
dino@937 1529 <b>Parameters</b>
dino@937 1530 <div class='paramtable'>
dino@937 1531 <dl>
dino@937 1532 <dt>
dino@937 1533 <code class='parameter-name'>key</code> of type <code>DOMString</code>
dino@937 1534 </dt>
dino@937 1535 <dd>
dino@937 1536 The key which describes the rule to be deleted. The key must
dino@937 1537 resolve to a number between 0 and 1, or the rule is ignored.<br>
dino@937 1538 </dd>
dino@937 1539 </dl>
dino@937 1540 </div>
dino@937 1541 </div><!-- parameters -->
dino@937 1542 <div class='return-value'>
dino@937 1543 <b>No Return Value</b>
dino@937 1544 </div>
dino@937 1545 <div>
dino@937 1546 <b>No Exceptions</b>
dino@937 1547 </div>
dino@937 1548 </div><!-- ======================================================================================================= -->
dino@937 1549 </dd>
dino@937 1550 <dt>
dino@937 1551 <code class='method-name'><a id="DOM-CSSKeyframesRule-findRule" name='DOM-CSSKeyframesRule-findRule'>findRule</a></code>
dino@937 1552 </dt>
dino@937 1553 <dd>
dino@937 1554 <div class='method'>
dino@937 1555 The <code>findRule</code> method returns the rule with a key matching the passed key. If no such rule
dino@937 1556 exists, a null value is returned.
dino@937 1557 <div class='parameters'>
dino@937 1558 <b>Parameters</b>
dino@937 1559 <div class='paramtable'>
dino@937 1560 <dl>
dino@937 1561 <dt>
dino@937 1562 <code class='parameter-name'>key</code> of type <code>DOMString</code>
dino@937 1563 </dt>
dino@937 1564 <dd>
dino@937 1565 The key which described the rule to find. The key must
dino@937 1566 resolve to a number between 0 and 1, or the rule is ignored.<br>
dino@937 1567 </dd>
dino@937 1568 </dl>
dino@937 1569 </div>
dino@937 1570 </div><!-- parameters -->
dino@937 1571 <div class='return-value'>
dino@937 1572 <b>Return Value</b>
dino@937 1573 <div class='returnvalue'>
dino@937 1574 <dl>
dino@937 1575 <dt>
dino@937 1576 <code>CSSKeyframeRule</code>
dino@937 1577 </dt>
dino@937 1578 <dd>
dino@937 1579 The found rule.<br>
dino@937 1580 </dd>
dino@937 1581 </dl>
dino@937 1582 </div>
dino@937 1583 </div>
dino@937 1584 <div>
dino@937 1585 <b>No Exceptions</b>
dino@937 1586 </div>
dino@937 1587 </div><!-- ======================================================================================================= -->
dino@937 1588 </dd>
dino@937 1589 </dl><!-- method -->
dino@937 1590 </dd>
dino@937 1591 </dt>
dino@937 1592 </dl>
dino@937 1593 </dd>
dino@937 1594 </dl>
dino@937 1595
dino@937 1596 <h2>References</h2>
dino@937 1597
dino@937 1598 <h3 class="no-num">Normative references</h3>
dino@937 1599 <!--normative-->
dino@937 1600
dino@937 1601 <h3 class="no-num">Other references</h3>
dino@937 1602 <!--informative-->
dino@937 1603
dino@937 1604
dino@937 1605
dino@937 1606 <h2 class="no-num">Property index</h2>
dino@937 1607 <!-- properties -->
dino@937 1608
dino@937 1609
dino@937 1610
dino@937 1611 <h2 class="no-num" id="index">Index</h2>
dino@937 1612 <!--index-->
dino@937 1613
dino@937 1614 </body>
dino@937 1615 </html>
dino@937 1616 <!-- Keep this comment at the end of the file
dino@937 1617 Local variables:
dino@937 1618 mode: sgml
dino@937 1619 sgml-default-doctype-name:"html"
dino@937 1620 sgml-minimize-attributes:t
dino@937 1621 End:
dino@937 1622 -->

mercurial