css3-animations/Overview.src.html

Thu, 29 Mar 2012 13:05:47 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Thu, 29 Mar 2012 13:05:47 -0700
changeset 5318
1a7463c1d7f7
parent 5317
db80fef343f8
child 5320
a8cc1c867298
permissions
-rw-r--r--

Remove BOM and add meta-charset.

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
bert@1104 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:
bert@1104 31 <dd><a href="http://www.w3.org/TR/2009/WD-css3-animations-20090320/">
bert@1104 32 http://www.w3.org/TR/2009/WD-css3-animations-20090320/</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
simon@1719 99 <h2>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 <!-- ======================================================================================================= -->
dino@937 298 <h3>
dino@937 299 Timing functions for keyframes
dino@937 300 </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 <!-- ======================================================================================================= -->
dino@937 345 <h3>
simon@4369 346 The <code class="property">'animation-name'</code> Property
dino@937 347 </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>
dino@2614 359 <p>
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
dino@2614 362 other properties do not have lists of the correct length, their values
dino@2614 363 are repeated to form a list with the same number of entries as
simon@4369 364 <code class="property">'animation-name'</code>.
dino@937 365 </p>
dino@937 366 <table class="propdef">
dino@937 367 <tbody>
dino@937 368 <tr>
dino@937 369 <td>
dino@937 370 <em>Name:</em>
dino@937 371 </td>
dino@937 372 <td>
dino@937 373 <dfn id="animation-name">animation-name</dfn>
dino@937 374 </td>
dino@937 375 </tr>
dino@937 376 <tr>
dino@937 377 <td>
dino@937 378 <em>Value:</em>
dino@937 379 </td>
dino@937 380 <td>
dbaron@5312 381 [ none | IDENT ] [, [ none | IDENT ] ]*
dino@937 382 </td>
dino@937 383 </tr>
dino@937 384 <tr>
dino@937 385 <td>
dino@937 386 <em>Initial:</em>
dino@937 387 </td>
dino@937 388 <td>
dino@937 389 none
dino@937 390 </td>
dino@937 391 </tr>
dino@937 392 <tr>
dino@937 393 <td>
dino@937 394 <em>Applies&nbsp;to:</em>
dino@937 395 </td>
dino@937 396 <td>
dbaron@3966 397 all elements, :before and :after pseudo elements
dino@937 398 </td>
dino@937 399 </tr>
dino@937 400 <tr>
dino@937 401 <td>
dino@937 402 <em>Inherited:</em>
dino@937 403 </td>
dino@937 404 <td>
dino@937 405 no
dino@937 406 </td>
dino@937 407 </tr>
dino@937 408 <tr>
dino@937 409 <td>
dino@937 410 <em>Percentages:</em>
dino@937 411 </td>
dino@937 412 <td>
dino@937 413 N/A
dino@937 414 </td>
dino@937 415 </tr>
dino@937 416 <tr>
dino@937 417 <td>
dino@937 418 <em>Media:</em>
dino@937 419 </td>
dino@937 420 <td>
dino@937 421 visual
dino@937 422 </td>
dino@937 423 </tr>
dino@937 424 <tr>
dino@937 425 <td>
dino@937 426 <em>Computed value:</em>
dino@937 427 </td>
dino@937 428 <td>
dino@937 429 Same as specified value.
dino@937 430 </td>
dino@937 431 </tr>
dino@937 432 </tbody>
dino@937 433 </table>
dino@937 434
dino@937 435 <!--
dino@937 436 <p>
simon@4369 437 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 438 </p>
dino@937 439 <div class="example">
dino@937 440 <p style="display:none">
dino@937 441 Example(s):
dino@937 442 </p>
dino@937 443 <pre>
dino@937 444 @keyframes 'border-bloat' {
dino@937 445 from {
dino@937 446 border-width: 0;
dino@937 447 }
dino@937 448 to {
dino@937 449 border-width: 10px;
dino@937 450 }
dino@937 451 }
dino@937 452
dino@937 453 @keyframes 'border-diet' {
dino@937 454 from {
dino@937 455 border-width: 4px;
dino@937 456 }
dino@937 457 to {
dino@937 458 border-width: 2px;
dino@937 459 }
dino@937 460 }
dino@937 461
dino@937 462 div {
dino@937 463 animation-name: 'border-bloat', 'border-diet';
dino@937 464 animation-duration: 10s, 4s;
dino@937 465 }
dino@937 466 </pre>
dino@937 467 <p>
simon@4369 468 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 469 resulting value for the property will be the addition of the values from the
dino@937 470 two animations.
dino@937 471 </p>
dino@937 472 <p>
dino@937 473 At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
dino@937 474 At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
dino@937 475 At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
dino@937 476 'border-diet' as it is no longer executing).
dino@937 477 </p>
dino@937 478 </div>
dino@937 479 -->
dino@937 480
dino@937 481
dino@937 482 <!-- ======================================================================================================= -->
dino@937 483 <h3>
simon@4369 484 The <code class="property">'animation-duration'</code> Property
dino@937 485 </h3>
dino@937 486 <p>
simon@4369 487 The <code class="property">'animation-duration'</code> property defines the length of time that an animation takes to complete one cycle.
dino@937 488 </p>
dino@937 489 <table class="propdef">
dino@937 490 <tbody>
dino@937 491 <tr>
dino@937 492 <td>
dino@937 493 <em>Name:</em>
dino@937 494 </td>
dino@937 495 <td>
dino@937 496 <dfn id="animation-duration">animation-duration</dfn>
dino@937 497 </td>
dino@937 498 </tr>
dino@937 499 <tr>
dino@937 500 <td>
dino@937 501 <em>Value:</em>
dino@937 502 </td>
dino@937 503 <td>
dino@937 504 &lt;time&gt; [, &lt;time&gt;]*
dino@937 505 </td>
dino@937 506 </tr>
dino@937 507 <tr>
dino@937 508 <td>
dino@937 509 <em>Initial:</em>
dino@937 510 </td>
dino@937 511 <td>
dino@3190 512 0s
dino@937 513 </td>
dino@937 514 </tr>
dino@937 515 <tr>
dino@937 516 <td>
dino@937 517 <em>Applies&nbsp;to:</em>
dino@937 518 </td>
dino@937 519 <td>
dbaron@3966 520 all elements, :before and :after pseudo elements
dino@937 521 </td>
dino@937 522 </tr>
dino@937 523 <tr>
dino@937 524 <td>
dino@937 525 <em>Inherited:</em>
dino@937 526 </td>
dino@937 527 <td>
dino@937 528 no
dino@937 529 </td>
dino@937 530 </tr>
dino@937 531 <tr>
dino@937 532 <td>
dino@937 533 <em>Percentages:</em>
dino@937 534 </td>
dino@937 535 <td>
dino@937 536 N/A
dino@937 537 </td>
dino@937 538 </tr>
dino@937 539 <tr>
dino@937 540 <td>
dino@937 541 <em>Media:</em>
dino@937 542 </td>
dino@937 543 <td>
dino@937 544 visual
dino@937 545 </td>
dino@937 546 </tr>
dino@937 547 <tr>
dino@937 548 <td>
dino@937 549 <em>Computed value:</em>
dino@937 550 </td>
dino@937 551 <td>
dino@937 552 Same as specified value.
dino@937 553 </td>
dino@937 554 </tr>
dino@937 555 </tbody>
dino@937 556 </table>
dino@937 557
dino@937 558 <p>
dino@3190 559 By default the value is '0s', meaning that the animation cycle is
simon@4369 560 immediate. A negative value for <code
simon@4369 561 class="property">'animation-duration'</code> is treated as '0s'. In this
simon@4369 562 case <code class="property">'animation-fill-mode'</code> still applies,
dino@2616 563 so an animation that fills backwards will show the value of the 0%
dino@2616 564 keyframe during any delay period, and an animation that fill forwards
dino@2616 565 will retain the value specified at the 100% keyframe, even if the
dino@2616 566 animation was instantaneous. Also, animation events are still fired.
dino@937 567 </p>
dino@937 568
dino@937 569 <!-- ======================================================================================================= -->
dino@937 570 <h3 id="animation-timing-function_tag">
simon@4369 571 The <code class="property">'animation-timing-function'</code> Property
dino@937 572 </h3>
dino@937 573 <p>
simon@4369 574 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 575 </p>
dino@937 576 <table class="propdef">
dino@937 577 <tbody>
dino@937 578 <tr>
dino@937 579 <td>
dino@937 580 <em>Name:</em>
dino@937 581 </td>
dino@937 582 <td>
dino@937 583 <dfn id="animation-timing-function">animation-timing-function</dfn>
dino@937 584 </td>
dino@937 585 </tr>
dino@937 586 <tr>
dino@937 587 <td>
dino@937 588 <em>Value:</em>
dino@937 589 </td>
dino@937 590 <td>
dbaron@5312 591 [ 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 592 </td>
dino@937 593 </tr>
dino@937 594 <tr>
dino@937 595 <td>
dino@937 596 <em>Initial:</em>
dino@937 597 </td>
dino@937 598 <td>
dino@937 599 ease
dino@937 600 </td>
dino@937 601 </tr>
dino@937 602 <tr>
dino@937 603 <td>
dino@937 604 <em>Applies&nbsp;to:</em>
dino@937 605 </td>
dino@937 606 <td>
dbaron@3966 607 all elements, :before and :after pseudo elements
dino@937 608 </td>
dino@937 609 </tr>
dino@937 610 <tr>
dino@937 611 <td>
dino@937 612 <em>Inherited:</em>
dino@937 613 </td>
dino@937 614 <td>
dino@937 615 no
dino@937 616 </td>
dino@937 617 </tr>
dino@937 618 <tr>
dino@937 619 <td>
dino@937 620 <em>Percentages:</em>
dino@937 621 </td>
dino@937 622 <td>
dino@937 623 N/A
dino@937 624 </td>
dino@937 625 </tr>
dino@937 626 <tr>
dino@937 627 <td>
dino@937 628 <em>Media:</em>
dino@937 629 </td>
dino@937 630 <td>
dino@937 631 visual
dino@937 632 </td>
dino@937 633 </tr>
dino@937 634 <tr>
dino@937 635 <td>
dino@937 636 <em>Computed value:</em>
dino@937 637 </td>
dino@937 638 <td>
dino@937 639 Same as specified value.
dino@937 640 </td>
dino@937 641 </tr>
dino@937 642 </tbody>
dino@937 643 </table>
dino@937 644
dino@937 645 <p>
simon@4369 646 For a keyframed animation, the <code class="property">'animation-timing-function'</code> applies
simon@4369 647 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 648 </p>
dino@937 649
dino@937 650 <!-- ======================================================================================================= -->
dino@937 651 <h3>
simon@4369 652 The <code class="property">'animation-iteration-count'</code> Property
dino@937 653 </h3>
dino@937 654 <p>
simon@4369 655 The <code class="property">'animation-iteration-count'</code> property defines the number of times
simon@4369 656 an animation cycle is played. The default value is one, meaning the animation will play from
simon@4369 657 beginning to end once. A value of <code class="css">'infinite'</code> will cause the animation to
simon@4369 658 repeat forever. Non-integer numbers will cause the animation to end part-way through a cycle.
simon@4369 659 Negative values of <code class="property">'animation-iteration-count'</code> are invalid.
simon@4369 660 This property is often used with an <code class="property">'animation-direction'</code> value of
simon@4369 661 <code class="css">alternate</code>, which will cause the animation to play in reverse on alternate cycles.
dino@937 662 </p>
dino@937 663 <table class="propdef">
dino@937 664 <tbody>
dino@937 665 <tr>
dino@937 666 <td>
dino@937 667 <em>Name:</em>
dino@937 668 </td>
dino@937 669 <td>
dino@937 670 <dfn id="animation-iteration-count">animation-iteration-count</dfn>
dino@937 671 </td>
dino@937 672 </tr>
dino@937 673 <tr>
dino@937 674 <td>
dino@937 675 <em>Value:</em>
dino@937 676 </td>
dino@937 677 <td>
dbaron@5312 678 [ infinite | &lt;number&gt; ] [, [ infinite | &lt;number&gt; ] ]*
dino@937 679 </td>
dino@937 680 </tr>
dino@937 681 <tr>
dino@937 682 <td>
dino@937 683 <em>Initial:</em>
dino@937 684 </td>
dino@937 685 <td>
dino@937 686 1
dino@937 687 </td>
dino@937 688 </tr>
dino@937 689 <tr>
dino@937 690 <td>
dino@937 691 <em>Applies&nbsp;to:</em>
dino@937 692 </td>
dino@937 693 <td>
dbaron@3966 694 all elements, :before and :after pseudo elements
dino@937 695 </td>
dino@937 696 </tr>
dino@937 697 <tr>
dino@937 698 <td>
dino@937 699 <em>Inherited:</em>
dino@937 700 </td>
dino@937 701 <td>
dino@937 702 no
dino@937 703 </td>
dino@937 704 </tr>
dino@937 705 <tr>
dino@937 706 <td>
dino@937 707 <em>Percentages:</em>
dino@937 708 </td>
dino@937 709 <td>
dino@937 710 N/A
dino@937 711 </td>
dino@937 712 </tr>
dino@937 713 <tr>
dino@937 714 <td>
dino@937 715 <em>Media:</em>
dino@937 716 </td>
dino@937 717 <td>
dino@937 718 visual
dino@937 719 </td>
dino@937 720 </tr>
dino@937 721 <tr>
dino@937 722 <td>
dino@937 723 <em>Computed value:</em>
dino@937 724 </td>
dino@937 725 <td>
dino@937 726 Same as specified value.
dino@937 727 </td>
dino@937 728 </tr>
dino@937 729 </tbody>
dino@937 730 </table><!-- ======================================================================================================= -->
dino@937 731 <h3>
simon@4369 732 The <code class="property">'animation-direction'</code> Property
dino@937 733 </h3>
dino@937 734 <p>
dbaron@5304 735 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 736 </p>
dino@937 737 <table class="propdef">
dino@937 738 <tbody>
dino@937 739 <tr>
dino@937 740 <td>
dino@937 741 <em>Name:</em>
dino@937 742 </td>
dino@937 743 <td>
dino@937 744 <dfn id="animation-direction">animation-direction</dfn>
dino@937 745 </td>
dino@937 746 </tr>
dino@937 747 <tr>
dino@937 748 <td>
dino@937 749 <em>Value:</em>
dino@937 750 </td>
dino@937 751 <td>
dbaron@5312 752 [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*
dino@937 753 </td>
dino@937 754 </tr>
dino@937 755 <tr>
dino@937 756 <td>
dino@937 757 <em>Initial:</em>
dino@937 758 </td>
dino@937 759 <td>
dino@937 760 normal
dino@937 761 </td>
dino@937 762 </tr>
dino@937 763 <tr>
dino@937 764 <td>
dino@937 765 <em>Applies&nbsp;to:</em>
dino@937 766 </td>
dino@937 767 <td>
dbaron@3966 768 all elements, :before and :after pseudo elements
dino@937 769 </td>
dino@937 770 </tr>
dino@937 771 <tr>
dino@937 772 <td>
dino@937 773 <em>Inherited:</em>
dino@937 774 </td>
dino@937 775 <td>
dino@937 776 no
dino@937 777 </td>
dino@937 778 </tr>
dino@937 779 <tr>
dino@937 780 <td>
dino@937 781 <em>Percentages:</em>
dino@937 782 </td>
dino@937 783 <td>
dino@937 784 N/A
dino@937 785 </td>
dino@937 786 </tr>
dino@937 787 <tr>
dino@937 788 <td>
dino@937 789 <em>Media:</em>
dino@937 790 </td>
dino@937 791 <td>
dino@937 792 visual
dino@937 793 </td>
dino@937 794 </tr>
dino@937 795 <tr>
dino@937 796 <td>
dino@937 797 <em>Computed value:</em>
dino@937 798 </td>
dino@937 799 <td>
dino@937 800 Same as specified value.
dino@937 801 </td>
dino@937 802 </tr>
dino@937 803 </tbody>
dbaron@5304 804 </table>
dbaron@5304 805 <dl>
dbaron@5304 806 <dt>normal</dt>
dbaron@5304 807 <dd>All iterations of the animation are played as specified.</dd>
dbaron@5304 808 <dt>reverse</dt>
dbaron@5304 809 <dd>All iterations of the animation are played in the reverse direction from the way they were specified.</dd>
dbaron@5304 810 <dt>alternate</dt>
dbaron@5304 811 <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 812 <dt>alternate-reverse</dt>
dbaron@5304 813 <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 814 </dl>
dbaron@5304 815 <!-- ======================================================================================================= -->
dino@937 816 <h3>
simon@4369 817 The <code class="property">'animation-play-state'</code> Property
dino@937 818 </h3>
dino@937 819
dino@937 820 <p>
simon@4369 821 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 822 </p>
dino@937 823 <table class="propdef">
dino@937 824 <tbody>
dino@937 825 <tr>
dino@937 826 <td>
dino@937 827 <em>Name:</em>
dino@937 828 </td>
dino@937 829 <td>
dino@937 830 <dfn id="animation-play-state">animation-play-state</dfn>
dino@937 831 </td>
dino@937 832 </tr>
dino@937 833 <tr>
dino@937 834 <td>
dino@937 835 <em>Value:</em>
dino@937 836 </td>
dino@937 837 <td>
dbaron@5312 838 [ running | paused ] [, [ running | paused ] ]*
dino@937 839 </td>
dino@937 840 </tr>
dino@937 841 <tr>
dino@937 842 <td>
dino@937 843 <em>Initial:</em>
dino@937 844 </td>
dino@937 845 <td>
dino@937 846 running
dino@937 847 </td>
dino@937 848 </tr>
dino@937 849 <tr>
dino@937 850 <td>
dino@937 851 <em>Applies&nbsp;to:</em>
dino@937 852 </td>
dino@937 853 <td>
dbaron@3966 854 all elements, :before and :after pseudo elements
dino@937 855 </td>
dino@937 856 </tr>
dino@937 857 <tr>
dino@937 858 <td>
dino@937 859 <em>Inherited:</em>
dino@937 860 </td>
dino@937 861 <td>
dino@937 862 no
dino@937 863 </td>
dino@937 864 </tr>
dino@937 865 <tr>
dino@937 866 <td>
dino@937 867 <em>Percentages:</em>
dino@937 868 </td>
dino@937 869 <td>
dino@937 870 N/A
dino@937 871 </td>
dino@937 872 </tr>
dino@937 873 <tr>
dino@937 874 <td>
dino@937 875 <em>Media:</em>
dino@937 876 </td>
dino@937 877 <td>
dino@937 878 visual
dino@937 879 </td>
dino@937 880 </tr>
dino@937 881 <tr>
dino@937 882 <td>
dino@937 883 <em>Computed value:</em>
dino@937 884 </td>
dino@937 885 <td>
dino@937 886 Same as specified value.
dino@937 887 </td>
dino@937 888 </tr>
dino@937 889 </tbody>
dino@937 890 </table><!-- ======================================================================================================= -->
dino@937 891 <h3>
simon@4369 892 The <code class="property">'animation-delay'</code> Property
dino@937 893 </h3>
dino@937 894 <p>
simon@4369 895 The <code class="property">'animation-delay'</code> property defines
dino@1908 896 when the animation will start. It allows an animation to begin
simon@4369 897 execution some time after it is applied. An <code
simon@4369 898 class="property">'animation-delay'</code> value of '0s' means the
dino@1908 899 animation will execute as soon as it is applied. Otherwise, the value
dino@1908 900 specifies an offset from the moment the animation is applied, and the
dino@1908 901 animation will delay execution by that offset.
dino@937 902 </p>
dino@937 903 <p>
simon@4369 904 If the value for <code class="property">'animation-delay'</code> is a
dino@1908 905 negative time offset then the animation will execute the moment it is
dino@1908 906 applied, but will appear to have begun execution at the specified
dino@1908 907 offset. That is, the animation will appear to begin part-way through
dino@1908 908 its play cycle. In the case where an animation has implied starting
simon@4369 909 values and a negative <code class="property">'animation-delay'</code>,
simon@4369 910 the starting values are taken from the moment the animation is applied.
dino@937 911 </p>
dino@937 912 <table class="propdef">
dino@937 913 <tbody>
dino@937 914 <tr>
dino@937 915 <td>
dino@937 916 <em>Name:</em>
dino@937 917 </td>
dino@937 918 <td>
dino@1908 919 <dfn id="animation-delay">animation-delay</dfn>
dino@937 920 </td>
dino@937 921 </tr>
dino@937 922 <tr>
dino@937 923 <td>
dino@937 924 <em>Value:</em>
dino@937 925 </td>
dino@937 926 <td>
dino@937 927 &lt;time&gt; [, &lt;time&gt;]*
dino@937 928 </td>
dino@937 929 </tr>
dino@937 930 <tr>
dino@937 931 <td>
dino@937 932 <em>Initial:</em>
dino@937 933 </td>
dino@937 934 <td>
dino@3190 935 0s
dino@937 936 </td>
dino@937 937 </tr>
dino@937 938 <tr>
dino@937 939 <td>
dino@937 940 <em>Applies&nbsp;to:</em>
dino@937 941 </td>
dino@937 942 <td>
dbaron@3966 943 all elements, :before and :after pseudo elements
dino@937 944 </td>
dino@937 945 </tr>
dino@937 946 <tr>
dino@937 947 <td>
dino@937 948 <em>Inherited:</em>
dino@937 949 </td>
dino@937 950 <td>
dino@937 951 no
dino@937 952 </td>
dino@937 953 </tr>
dino@937 954 <tr>
dino@937 955 <td>
dino@937 956 <em>Percentages:</em>
dino@937 957 </td>
dino@937 958 <td>
dino@937 959 N/A
dino@937 960 </td>
dino@937 961 </tr>
dino@937 962 <tr>
dino@937 963 <td>
dino@937 964 <em>Media:</em>
dino@937 965 </td>
dino@937 966 <td>
dino@937 967 visual
dino@937 968 </td>
dino@937 969 </tr>
dino@937 970 <tr>
dino@937 971 <td>
dino@937 972 <em>Computed value:</em>
dino@937 973 </td>
dino@937 974 <td>
dino@937 975 Same as specified value.
dino@937 976 </td>
dino@937 977 </tr>
dino@937 978 </tbody>
dino@937 979 </table><!-- ======================================================================================================= -->
dino@937 980 <h3>
simon@4369 981 The <code class="property">'animation-fill-mode'</code> Property
dino@1908 982 </h3>
dino@1908 983 <p>
simon@4369 984 The <code class="property">'animation-fill-mode'</code> property defines
dino@1908 985 what values are applied by the animation outside the time it is executing.
dino@1908 986 By default, an animation will not affect property values between the
simon@4369 987 time it is applied (the <code class="property">'animation-name'</code> property is
dino@1908 988 set on an element) and the time it begins execution (which is determined by
simon@4369 989 the <code class="property">'animation-delay'</code> property). Also, by
dino@1908 990 default an animation does not affect property values after the animation
simon@4369 991 ends (determined by the <code class="property">'animation-duration'</code> property).
simon@4369 992 The value of <code class="property">'animation-fill-mode'</code> can
dino@1908 993 override this behavior.
dino@1908 994 </p>
dino@1908 995 <p>
simon@4369 996 If the value for <code class="property">'animation-fill-mode'</code> is
simon@4369 997 <code class="css">'backwards'</code>, then the animation will
dino@1908 998 apply the property values defined in its 0% or 'from' keyframe as soon
dino@1908 999 as the animation is applied, during the period defined by
simon@4369 1000 <code class="property">'animation-delay'</code>.
dino@1908 1001 </p>
dino@1908 1002 <p>
simon@4369 1003 If the value for <code class="property">'animation-fill-mode'</code>
simon@4369 1004 is <code class="css">'forwards'</code>, then the animation will
dino@1908 1005 apply the property values defined in its last executing keyframe after
dino@1908 1006 the final iteration of the animation, until the animation style is
dino@1908 1007 removed. The last executing keyframe is the 'to' or '100%' keyframe,
simon@4369 1008 unless the animation has <code
simon@4369 1009 class="property">'animation-direction'</code> set to <code
simon@4369 1010 class="css">'alternate'</code> and both a finite and even
dino@1908 1011 iteration count, in which case it is the 'from' or '0%' keyframe.
dino@1908 1012 </p>
dino@1908 1013 <p>
simon@4369 1014 If the value for <code class="property">'animation-fill-mode'</code>
simon@4369 1015 is <code class="css">'both'</code>, then the animation will
dino@1908 1016 follow the rules for both 'forwards' and 'backwards'. That is, it will
dino@1908 1017 extend the animation properties in both directions.
dino@1908 1018 </p>
dino@1908 1019 <table class="propdef">
dino@1908 1020 <tbody>
dino@1908 1021 <tr>
dino@1908 1022 <td>
dino@1908 1023 <em>Name:</em>
dino@1908 1024 </td>
dino@1908 1025 <td>
dino@1908 1026 <dfn id="animation-fill-mode">animation-fill-mode</dfn>
dino@1908 1027 </td>
dino@1908 1028 </tr>
dino@1908 1029 <tr>
dino@1908 1030 <td>
dino@1908 1031 <em>Value:</em>
dino@1908 1032 </td>
dino@1908 1033 <td>
dbaron@5312 1034 [ none | forwards | backwards | both ] [, [ none | forwards | backwards | both ] ]*
dino@1908 1035 </td>
dino@1908 1036 </tr>
dino@1908 1037 <tr>
dino@1908 1038 <td>
dino@1908 1039 <em>Initial:</em>
dino@1908 1040 </td>
dino@1908 1041 <td>
dino@1908 1042 none
dino@1908 1043 </td>
dino@1908 1044 </tr>
dino@1908 1045 <tr>
dino@1908 1046 <td>
dino@1908 1047 <em>Applies&nbsp;to:</em>
dino@1908 1048 </td>
dino@1908 1049 <td>
dbaron@3966 1050 all elements, :before and :after pseudo elements
dino@1908 1051 </td>
dino@1908 1052 </tr>
dino@1908 1053 <tr>
dino@1908 1054 <td>
dino@1908 1055 <em>Inherited:</em>
dino@1908 1056 </td>
dino@1908 1057 <td>
dino@1908 1058 no
dino@1908 1059 </td>
dino@1908 1060 </tr>
dino@1908 1061 <tr>
dino@1908 1062 <td>
dino@1908 1063 <em>Percentages:</em>
dino@1908 1064 </td>
dino@1908 1065 <td>
dino@1908 1066 N/A
dino@1908 1067 </td>
dino@1908 1068 </tr>
dino@1908 1069 <tr>
dino@1908 1070 <td>
dino@1908 1071 <em>Media:</em>
dino@1908 1072 </td>
dino@1908 1073 <td>
dino@1908 1074 visual
dino@1908 1075 </td>
dino@1908 1076 </tr>
dino@1908 1077 <tr>
dino@1908 1078 <td>
dino@1908 1079 <em>Computed value:</em>
dino@1908 1080 </td>
dino@1908 1081 <td>
dino@1908 1082 Same as specified value.
dino@1908 1083 </td>
dino@1908 1084 </tr>
dino@1908 1085 </tbody>
dino@1908 1086 </table><!-- ======================================================================================================= -->
dino@1908 1087 <h3>
simon@4369 1088 The <code class="property">'animation'</code> Shorthand Property
dino@937 1089 </h3>
dino@937 1090 <p>
simon@4369 1091 The <code class="property">'animation'</code> shorthand property
dino@1908 1092 combines seven of the animation properties into a single property.
dino@937 1093 </p>
simon@2323 1094 <p>
simon@2323 1095 Note that order is important in this property. The first value that can be
simon@2323 1096 parsed as a time is assigned to the animation-duration. The second value that
simon@2323 1097 can be parsed as a time is assigned to animation-delay.
simon@2323 1098 </p>
simon@2323 1099 <p class="issue">
simon@2323 1100 An alternative proposal is to accept the font shorthand approach of
dbaron@4551 1101 using a "/" character between the values of the same type. e.g. 2s/4s would
simon@2323 1102 mean a duration of 2 seconds and a delay of 4 seconds.
simon@2323 1103 </p>
dino@937 1104 <table class="propdef">
dino@937 1105 <tbody>
dino@937 1106 <tr>
dino@937 1107 <td>
dino@937 1108 <em>Name:</em>
dino@937 1109 </td>
dino@937 1110 <td>
dino@937 1111 <dfn id="animation">animation</dfn>
dino@937 1112 </td>
dino@937 1113 </tr>
dino@937 1114 <tr>
dino@937 1115 <td>
dino@937 1116 <em>Value:</em>
dino@937 1117 </td>
dino@937 1118 <td>
dino@937 1119 [&lt;animation-name&gt; ||
dino@937 1120 &lt;animation-duration&gt; ||
dino@937 1121 &lt;animation-timing-function&gt; ||
dino@937 1122 &lt;animation-delay&gt; ||
dino@937 1123 &lt;animation-iteration-count&gt; ||
dino@1908 1124 &lt;animation-direction&gt; ||
dino@1908 1125 &lt;animation-fill-mode&gt;]
dino@937 1126 [, [&lt;animation-name&gt; ||
dino@937 1127 &lt;animation-duration&gt; ||
dino@937 1128 &lt;animation-timing-function&gt; ||
dino@937 1129 &lt;animation-delay&gt; ||
dino@937 1130 &lt;animation-iteration-count&gt; ||
dino@1908 1131 &lt;animation-direction&gt; ||
dino@1908 1132 &lt;animation-fill-mode&gt;] ]*
dino@937 1133 </td>
dino@937 1134 </tr>
dino@937 1135 <tr>
dino@937 1136 <td>
dino@937 1137 <em>Initial:</em>
dino@937 1138 </td>
dino@937 1139 <td>
dino@937 1140 see individual properties
dino@937 1141 </td>
dino@937 1142 </tr>
dino@937 1143 <tr>
dino@937 1144 <td>
dino@937 1145 <em>Applies&nbsp;to:</em>
dino@937 1146 </td>
dino@937 1147 <td>
dbaron@3966 1148 all elements, :before and :after pseudo elements
dino@937 1149 </td>
dino@937 1150 </tr>
dino@937 1151 <tr>
dino@937 1152 <td>
dino@937 1153 <em>Inherited:</em>
dino@937 1154 </td>
dino@937 1155 <td>
dino@937 1156 no
dino@937 1157 </td>
dino@937 1158 </tr>
dino@937 1159 <tr>
dino@937 1160 <td>
dino@937 1161 <em>Percentages:</em>
dino@937 1162 </td>
dino@937 1163 <td>
dino@937 1164 N/A
dino@937 1165 </td>
dino@937 1166 </tr>
dino@937 1167 <tr>
dino@937 1168 <td>
dino@937 1169 <em>Media:</em>
dino@937 1170 </td>
dino@937 1171 <td>
dino@937 1172 visual
dino@937 1173 </td>
dino@937 1174 </tr>
dino@937 1175 <tr>
dino@937 1176 <td>
dino@937 1177 <em>Computed value:</em>
dino@937 1178 </td>
dino@937 1179 <td>
dino@937 1180 Same as specified value.
dino@937 1181 </td>
dino@937 1182 </tr>
dino@937 1183 </tbody>
dino@937 1184 </table><!-- ======================================================================================================= -->
dino@937 1185 <h2>
dino@937 1186 Animation Events
dino@937 1187 </h2>
dino@937 1188 <p>
dino@937 1189 Several animation related events are available through the <a
dino@937 1190 href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event
dino@937 1191 system</a>. The start and end of an animation, and the end of each
dino@937 1192 iteration of an animation all generate DOM events. An element can have
dino@937 1193 multiple properties being animated simultaneously. This can occur either
simon@4369 1194 with a single <code class="property">animation-name</code> value with
simon@4369 1195 keyframes containing multiple properties, or with multiple <code
simon@4369 1196 class="property">animation-name</code> values. For the purposes of
simon@4369 1197 events, each <code class="property">animation-name</code> specifies a
simon@4369 1198 single animation. Therefore an event will be generated for each <code
simon@4369 1199 class="property">animation-name</code> value and not necessarily for
dino@937 1200 each property being animated.
dino@937 1201 </p>
dino@937 1202 <p>
dino@937 1203 The time the animation has been running is sent with each event
dino@937 1204 generated. This allows the event handler to determine the current
dino@937 1205 iteration of a looping animation or the current position of an
dino@937 1206 alternating animation. This time does not include any time the animation
dino@937 1207 was in the <code>paused</code> play state.
dino@937 1208 </p>
dino@937 1209 <dl>
dino@937 1210 <dt>
dino@937 1211 <b>Interface <i><a id="Events-AnimationEvent" name='Events-AnimationEvent'>AnimationEvent</a></i></b>
dino@937 1212 </dt>
dino@937 1213 <dd>
dino@937 1214 <p>
dino@937 1215 The <code>AnimationEvent</code> interface provides specific contextual information associated with Animation events.
dino@937 1216 </p>
dino@937 1217 <dl>
dino@937 1218 <dt>
dino@937 1219 <br>
dino@937 1220 <b>IDL Definition</b>
dino@937 1221 </dt>
dino@937 1222 <dd>
dino@937 1223 <div class='idl-code'>
dino@937 1224 <pre>
dino@937 1225 interface AnimationEvent : Event {
dino@937 1226 readonly attribute DOMString animationName;
dino@937 1227 readonly attribute float elapsedTime;
dino@937 1228 void initAnimationEvent(in DOMString typeArg,
dino@937 1229 in boolean canBubbleArg,
dino@937 1230 in boolean cancelableArg,
dino@937 1231 in DOMString animationNameArg,
dino@937 1232 in float elapsedTimeArg);
dino@937 1233 };
dino@937 1234 </pre>
dino@937 1235 </div>
dino@937 1236 </dd>
dino@937 1237 <dt>
dino@937 1238 <b>Attributes</b>
dino@937 1239 </dt>
dino@937 1240 <dd>
dino@937 1241 <dl>
dino@937 1242 <dt>
dino@937 1243 <code class='attribute-name'><a id="Events-AnimationEvent-animationName" name='Events-AnimationEvent-animationName'>animationName</a></code> of type <code>DOMString</code>, readonly
dino@937 1244 </dt>
dino@937 1245 <dd>
simon@4369 1246 The value of the <code class="property">animation-name</code> property of the
dino@2614 1247 animation that fired the event.
dino@937 1248 </dd>
dino@937 1249 </dl>
dino@937 1250 <dl>
dino@937 1251 <dt>
dino@937 1252 <code class='attribute-name'><a id="Events-AnimationEvent-elapsedTime" name='Events-AnimationEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly
dino@937 1253 </dt>
dino@937 1254 <dd>
dino@2614 1255 The amount of time the animation has been running, in
dino@2614 1256 seconds, when this event fired, excluding any time the
dino@2614 1257 animation was paused. For an "animationstart" event, the
dino@2614 1258 elapsedTime is zero unless there was a negative value for
simon@4369 1259 <code class="property">animation-delay</code>, in which
dino@2614 1260 case the event will be fired with an elapsedTime of (-1 *
dino@2614 1261 delay).
dino@937 1262 </dd>
dino@937 1263 </dl>
dino@937 1264 </dd>
dino@937 1265 <dt>
dino@937 1266 <b>Methods</b>
dino@937 1267 </dt>
dino@937 1268 <dd>
dino@937 1269 <dl>
dino@937 1270 <dt>
dino@937 1271 <code class='method-name'><a id="Events-AnimationEvent-initAnimationEvent" name='Events-AnimtionEvent-initAnimationEvent'>initAnimationEvent</a></code>
dino@937 1272 </dt>
dino@937 1273 <dd>
dino@937 1274 <div class='method'>
bert@1104 1275 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 1276 <div class='parameters'>
dino@937 1277 <b>Parameters</b>
dino@937 1278 <div class='paramtable'>
dino@937 1279 <dl>
dino@937 1280 <dt>
dino@937 1281 <code class='parameter-name'>typeArg</code> of type <code>DOMString</code>
dino@937 1282 </dt>
dino@937 1283 <dd>
dino@937 1284 Specifies the event type.<br>
dino@937 1285 </dd>
dino@937 1286 <dt>
dino@937 1287 <code class='parameter-name'>canBubbleArg</code> of type <code>boolean</code>
dino@937 1288 </dt>
dino@937 1289 <dd>
dino@937 1290 Specifies whether or not the event can bubble.<br>
dino@937 1291 </dd>
dino@937 1292 <dt>
dino@937 1293 <code class='parameter-name'>cancelableArg</code> of type <code>boolean</code>
dino@937 1294 </dt>
dino@937 1295 <dd>
dino@937 1296 Specifies whether or not the event's default action can be prevented.
dino@937 1297 </dd>
dino@937 1298 <dt>
dino@937 1299 <code class='parameter-name'>animationNameArg</code> of type <code>DOMString</code>
dino@937 1300 </dt>
dino@937 1301 <dd>
bert@1104 1302 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 1303 </dd>
dino@937 1304 <dt>
dino@937 1305 <code class='parameter-name'>elapsedTimeArg</code> of type <code>float</code>
dino@937 1306 </dt>
dino@937 1307 <dd>
dino@937 1308 Specifies the amount of time, in seconds, the animation has been running at the time of initialization.
dino@937 1309 </dd>
dino@937 1310 </dl>
dino@937 1311 </div>
dino@937 1312 </div><!-- parameters -->
dino@937 1313 <div>
dino@937 1314 <b>No Return Value</b>
dino@937 1315 </div>
dino@937 1316 <div>
dino@937 1317 <b>No Exceptions</b>
dino@937 1318 </div>
dino@937 1319 </div><!-- method -->
dino@937 1320 </dd>
dino@937 1321 </dl>
dino@937 1322 </dd>
dino@937 1323 </dl>
dino@937 1324 </dd>
dino@937 1325 </dl>
dino@937 1326 <p>
dino@937 1327 The different types of Animation events that can occur are:
dino@937 1328 </p>
dino@937 1329 <dl>
dino@937 1330 <dt>
dino@937 1331 <b>animationstart</b>
dino@937 1332 </dt>
dino@937 1333 <dd>
simon@4369 1334 The 'animationstart' event occurs at the start of the animation. If there is an
simon@4369 1335 <code class="property">animation-delay</code> then this event will fire once the delay period
dino@2614 1336 has expired. A negative delay will cause the event to fire with an elapsedTime equal to
dino@2614 1337 the absolute value of the delay.
dino@937 1338 <ul>
dino@937 1339 <li>Bubbles: Yes
dino@937 1340 </li>
simon@4466 1341 <li>Cancelable: No
dino@937 1342 </li>
dino@937 1343 <li>Context Info: animationName
dino@937 1344 </li>
dino@937 1345 </ul>
dino@937 1346 </dd>
dino@937 1347 <dt>
dino@937 1348 <b>animationend</b>
dino@937 1349 </dt>
dino@937 1350 <dd>
dino@937 1351 The 'animationend' event occurs when the animation finishes.
dino@937 1352 <ul>
dino@937 1353 <li>Bubbles: Yes
dino@937 1354 </li>
simon@4466 1355 <li>Cancelable: No
dino@937 1356 </li>
dino@937 1357 <li>Context Info: animationName, elapsedTime
dino@937 1358 </li>
dino@937 1359 </ul>
dino@937 1360 </dd>
dino@937 1361 <dt>
dino@937 1362 <b>animationiteration</b>
dino@937 1363 </dt>
dino@937 1364 <dd>
dino@937 1365 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 1366 <ul>
dino@937 1367 <li>Bubbles: Yes
dino@937 1368 </li>
simon@4466 1369 <li>Cancelable: No
dino@937 1370 </li>
dino@937 1371 <li>Context Info: animationName, elapsedTime
dino@937 1372 </li>
dino@937 1373 </ul>
dino@937 1374 </dd>
dino@937 1375 </dl>
dino@937 1376 <!-- ======================================================================================================= -->
dino@937 1377 <h2>
dino@937 1378 DOM Interfaces
dino@937 1379 </h2>
dino@937 1380 <p>
dino@937 1381 CSS animation is exposed to the CSSOM through a pair of new interfaces
dino@937 1382 describing the keyframes.
dino@937 1383 </p>
dino@937 1384 <dl>
dino@937 1385 <dt>
dino@937 1386 <b>Interface <i><a id="DOM-CSSRule" name='DOM-CSSRule'>CSSRule</a></i></b>
dino@937 1387 </dt>
dino@937 1388 <dd>
dino@937 1389 <p>
dino@937 1390 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 1391 </p>
dino@937 1392 <dl>
dino@937 1393
dino@937 1394 <dt>
dino@937 1395 <b>IDL Definition</b>
dino@937 1396 </dt>
dino@937 1397 <dd>
dino@937 1398 <div class='idl-code'>
dino@937 1399 <pre>
dino@937 1400 interface CSSRule {
dino@937 1401 ...
dino@937 1402 const unsigned short KEYFRAMES_RULE = 7;
dino@937 1403 const unsigned short KEYFRAME_RULE = 8;
dino@937 1404 ...
dino@937 1405 };</pre>
dino@937 1406 </div>
dino@937 1407 </dd> <!-- IDL -->
dino@937 1408 </dl>
dino@937 1409 </dd>
dino@937 1410
dino@937 1411 <dt>
dino@937 1412 <b>Interface <i><a id="DOM-CSSKeyframeRule" name='DOM-CSSKeyframeRule'>CSSKeyframeRule</a></i></b>
dino@937 1413 </dt>
dino@937 1414 <dd>
dino@937 1415 <p>
dino@937 1416 The <code>CSSKeyframeRule</code> interface represents the style rule for a single key.
dino@937 1417 </p>
dino@937 1418 <dl>
dino@937 1419 <dt>
dino@937 1420 <br>
dino@937 1421 <b>IDL Definition</b>
dino@937 1422 </dt>
dino@937 1423 <dd>
dino@937 1424 <div class='idl-code'>
dino@937 1425 <pre>
dino@937 1426 interface CSSKeyframeRule : CSSRule {
dino@937 1427 attribute DOMString keyText;
dino@937 1428 readonly attribute CSSStyleDeclaration style;
dino@937 1429 };
dino@937 1430 </pre>
dino@937 1431 </div><br>
dino@937 1432 </dd>
dino@937 1433 <dt>
dino@937 1434 <b>Attributes</b>
dino@937 1435 </dt>
dino@937 1436 <dd>
dino@937 1437 <dl>
dino@937 1438 <dt>
dino@937 1439 <code class='attribute-name'><a id="DOM-CSSKeyframeRule-keyText" name='DOM-CSSKeyframeRule-keyText'>keyText</a></code> of type <code>DOMString</code>
dino@937 1440 </dt>
dino@937 1441 <dd>
dino@937 1442 This attribute represents the key as the string representation of a floating point number between 0 and 1. If the value
dino@937 1443 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 1444 value will be 1.<br>
dino@937 1445 </dd>
dino@937 1446 </dl>
dino@937 1447 </dd>
dino@937 1448 <dd>
dino@937 1449 <dl>
dino@937 1450 <dt>
dino@937 1451 <code class='attribute-name'><a id="DOM-CSSKeyframeRule-style" name='DOM-CSSKeyframeRule-style'>style</a></code> of type <code>CSSStyleDeclaration</code>
dino@937 1452 </dt>
dino@937 1453 <dd>
dino@937 1454 This attribute represents the style associated with this keyframe.<br>
dino@937 1455 </dd>
dino@937 1456 </dl>
dino@937 1457 </dd>
dino@937 1458 <dt>
dino@937 1459 <b>No Methods</b>
dino@937 1460 </dt>
dino@937 1461 </dl>
dino@937 1462 </dd>
dino@937 1463 </dl>
dino@937 1464 <dl>
dino@937 1465 <dt>
dino@937 1466 <b>Interface <i><a id="DOM-CSSKeyframesRule" name='DOM-CSSKeyframesRule'>CSSKeyframesRule</a></i></b>
dino@937 1467 </dt>
dino@937 1468 <dd>
dino@937 1469 <p>
dino@937 1470 The <code>CSSKeyframesRule</code> interface represents a complete set of keyframes for a single animation.
dino@937 1471 </p>
dino@937 1472 <dl>
dino@937 1473 <dt>
dino@937 1474 <br>
dino@937 1475 <b>IDL Definition</b>
dino@937 1476 </dt>
dino@937 1477 <dd>
dino@937 1478 <div class='idl-code'>
dino@937 1479 <pre>
dino@937 1480 interface CSSKeyframesRule : CSSRule {
dino@937 1481 attribute DOMString name;
dino@937 1482 readonly attribute CSSRuleList cssRules;
dino@937 1483
dino@2614 1484 void appendRule(in DOMString rule);
dino@937 1485 void deleteRule(in DOMString key);
dino@937 1486 CSSKeyframeRule findRule(in DOMString key);
dino@937 1487 };
dino@937 1488 </pre>
dino@937 1489 </div><br>
dino@937 1490 </dd>
dino@937 1491 <dt>
dino@937 1492 <b>Attributes</b>
dino@937 1493 </dt>
dino@937 1494 <dd>
dino@937 1495 <dl>
dino@937 1496 <dt>
dino@937 1497 <code class='attribute-name'><a id="DOM-CSSKeyframesRule-name" name='DOM-CSSKeyframesRule-name'>name</a></code> of type <code>DOMString</code>
dino@937 1498 </dt>
dino@937 1499 <dd>
dino@937 1500 This attribute is the name of the keyframes, used by the <code>animation-name</code> property.<br>
dino@937 1501 </dd>
dino@937 1502 </dl>
dino@937 1503 </dd>
dino@937 1504 <dd>
dino@937 1505 <dl>
dino@937 1506 <dt>
dino@937 1507 <code class='attribute-name'><a id="DOM-CSSKeyframeRules-cssRules" name='DOM-CSSKeyframeRules-cssRules'>cssRules</a></code> of type <code>CSSRuleList</code>
dino@937 1508 </dt>
dino@937 1509 <dd>
dino@937 1510 This attribute gives access to the keyframes in the list.<br>
dino@937 1511 </dd>
dino@937 1512 </dl>
dino@937 1513 </dd>
dino@937 1514 <dt>
dino@937 1515 <b>Methods</b>
dbaron@5317 1516 </dt>
dbaron@5317 1517 <dd>
dbaron@5317 1518 <dl>
dbaron@5317 1519 <!-- ======================================================================================================= -->
dbaron@5317 1520 <dt>
dbaron@5317 1521 <code class='method-name'><a id="DOM-CSSKeyframesRule-appendRule" name='DOM-CSSKeyframesRule-appendRule'>appendRule</a></code>
dbaron@5317 1522 </dt>
dbaron@5317 1523 <dd>
dbaron@5317 1524 <div class='method'>
dbaron@5317 1525 The <code>appendRule</code> method appends the passed CSSKeyframeRule into the list at the passed key.
dbaron@5317 1526 <div class='parameters'>
dbaron@5317 1527 <b>Parameters</b>
dbaron@5317 1528 <div class='paramtable'>
dbaron@5317 1529 <dl>
dbaron@5317 1530 <dt>
dbaron@5317 1531 <code class='parameter-name'>rule</code> of type <code>DOMString</code>
dbaron@5317 1532 </dt>
dbaron@5317 1533 <dd>
dbaron@5317 1534 The rule to be appended, expressed in the same syntax as one entry in the
dbaron@5317 1535 <code>@keyframes</code> rule.
dbaron@5317 1536 </dd>
dbaron@5317 1537 </dl>
dino@937 1538 </div>
dbaron@5317 1539 </div><!-- parameters -->
dbaron@5317 1540 <div class='return-value'>
dbaron@5317 1541 <b>No Return Value</b>
dbaron@5317 1542 </div>
dbaron@5317 1543 <div>
dbaron@5317 1544 <b>No Exceptions</b>
dbaron@5317 1545 </div>
dbaron@5317 1546 </div><!-- ======================================================================================================= -->
dbaron@5317 1547 </dd>
dbaron@5317 1548 <dt>
dbaron@5317 1549 <code class='method-name'><a id="DOM-CSSKeyframesRule-deleteRule" name='DOM-CSSKeyframesRule-deleteRule'>deleteRule</a></code>
dbaron@5317 1550 </dt>
dbaron@5317 1551 <dd>
dbaron@5317 1552 <div class='method'>
dbaron@5317 1553 The <code>deleteRule</code> method deletes the CSSKeyframeRule with the passed key. If a rule with this key
dbaron@5317 1554 does not exist, the method does nothing.
dbaron@5317 1555 <div class='parameters'>
dbaron@5317 1556 <b>Parameters</b>
dbaron@5317 1557 <div class='paramtable'>
dbaron@5317 1558 <dl>
dbaron@5317 1559 <dt>
dbaron@5317 1560 <code class='parameter-name'>key</code> of type <code>DOMString</code>
dbaron@5317 1561 </dt>
dbaron@5317 1562 <dd>
dbaron@5317 1563 The key which describes the rule to be deleted. The key must
dbaron@5317 1564 resolve to a number between 0 and 1, or the rule is ignored.<br>
dbaron@5317 1565 </dd>
dbaron@5317 1566 </dl>
dino@937 1567 </div>
dbaron@5317 1568 </div><!-- parameters -->
dbaron@5317 1569 <div class='return-value'>
dbaron@5317 1570 <b>No Return Value</b>
dbaron@5317 1571 </div>
dbaron@5317 1572 <div>
dbaron@5317 1573 <b>No Exceptions</b>
dbaron@5317 1574 </div>
dbaron@5317 1575 </div><!-- ======================================================================================================= -->
dbaron@5317 1576 </dd>
dbaron@5317 1577 <dt>
dbaron@5317 1578 <code class='method-name'><a id="DOM-CSSKeyframesRule-findRule" name='DOM-CSSKeyframesRule-findRule'>findRule</a></code>
dbaron@5317 1579 </dt>
dbaron@5317 1580 <dd>
dbaron@5317 1581 <div class='method'>
dbaron@5317 1582 The <code>findRule</code> method returns the rule with a key matching the passed key. If no such rule
dbaron@5317 1583 exists, a null value is returned.
dbaron@5317 1584 <div class='parameters'>
dbaron@5317 1585 <b>Parameters</b>
dbaron@5317 1586 <div class='paramtable'>
dbaron@5317 1587 <dl>
dbaron@5317 1588 <dt>
dbaron@5317 1589 <code class='parameter-name'>key</code> of type <code>DOMString</code>
dbaron@5317 1590 </dt>
dbaron@5317 1591 <dd>
dbaron@5317 1592 The key which described the rule to find. The key must
dbaron@5317 1593 resolve to a number between 0 and 1, or the rule is ignored.<br>
dbaron@5317 1594 </dd>
dbaron@5317 1595 </dl>
dino@937 1596 </div>
dbaron@5317 1597 </div><!-- parameters -->
dbaron@5317 1598 <div class='return-value'>
dbaron@5317 1599 <b>Return Value</b>
dbaron@5317 1600 <div class='returnvalue'>
dbaron@5317 1601 <dl>
dbaron@5317 1602 <dt>
dbaron@5317 1603 <code>CSSKeyframeRule</code>
dbaron@5317 1604 </dt>
dbaron@5317 1605 <dd>
dbaron@5317 1606 The found rule.<br>
dbaron@5317 1607 </dd>
dbaron@5317 1608 </dl>
dino@937 1609 </div>
dbaron@5317 1610 </div>
dbaron@5317 1611 <div>
dbaron@5317 1612 <b>No Exceptions</b>
dbaron@5317 1613 </div>
dbaron@5317 1614 </div><!-- ======================================================================================================= -->
dbaron@5317 1615 </dd>
dbaron@5317 1616 </dl><!-- method -->
dbaron@5317 1617 </dd>
dino@937 1618 </dl>
dino@937 1619 </dd>
dino@937 1620 </dl>
dino@937 1621
dbaron@5304 1622 <h2 id="acknowledgments">Acknowledgments</h2>
dbaron@5304 1623
dbaron@5304 1624 <p>Thanks especially to the feedback from
dbaron@5312 1625 Tab Atkins,
dbaron@5312 1626 Estelle Weyl,
dbaron@5304 1627 and all the rest of the
dbaron@5304 1628 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.</p>
dbaron@5304 1629
dino@937 1630 <h2>References</h2>
dino@937 1631
dino@937 1632 <h3 class="no-num">Normative references</h3>
dino@937 1633 <!--normative-->
dino@937 1634
dino@937 1635 <h3 class="no-num">Other references</h3>
dino@937 1636 <!--informative-->
dino@937 1637
dino@937 1638
dino@937 1639
dino@937 1640 <h2 class="no-num">Property index</h2>
dino@937 1641 <!-- properties -->
dino@937 1642
dino@937 1643
dino@937 1644
dino@937 1645 <h2 class="no-num" id="index">Index</h2>
dino@937 1646 <!--index-->
dino@937 1647
dino@937 1648 </body>
dino@937 1649 </html>
dino@937 1650 <!-- Keep this comment at the end of the file
dino@937 1651 Local variables:
dino@937 1652 mode: sgml
dino@937 1653 sgml-default-doctype-name:"html"
dino@937 1654 sgml-minimize-attributes:t
dino@937 1655 End:
dino@937 1656 -->

mercurial