css3-animations/Overview.src.html

Tue, 03 Apr 2012 12:09:39 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Tue, 03 Apr 2012 12:09:39 -0700
changeset 5370
2ea917cf2779
parent 5369
0ed99ba5e0c4
child 5383
a49f4a812efd
permissions
-rw-r--r--

Copy clearer wording on list repetition from css3-transitions (which was in turn partly taken from css3-background).

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

mercurial