css3-animations/Overview.src.html

Wed, 28 Mar 2012 22:14:48 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Wed, 28 Mar 2012 22:14:48 -0700
changeset 5304
b531bcdc39f7
parent 5303
083f80ca0535
child 5312
f2453d922d28
permissions
-rw-r--r--

Add two additional values for animation-direction: reverse and alternate-reverse .

This is as proposed in
http://lists.w3.org/Archives/Public/www-style/2011May/0548.html
and resolved in the group's 2012 March 28 teleconference per
http://lists.w3.org/Archives/Public/www-style/2012Mar/0655.html

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

mercurial