css3-animations/Overview.src.html

Mon, 30 Jan 2012 15:24:47 +0000

author
Simon Fraser <simon.fraser@apple.com>
date
Mon, 30 Jan 2012 15:24:47 +0000
changeset 4368
d93b59bab65a
parent 4174
419909ea4220
child 4369
2de9d888d065
permissions
-rw-r--r--

2012-01-30 simon.fraser@apple.com
- Clarify behavior of missing properties in keyframes:
https://www.w3.org/Bugs/Public/show_bug.cgi?id=14636
https://www.w3.org/Style/CSS/Tracker/actions/389

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

mercurial