css3-animations/Overview.src.html

Thu, 20 Sep 2012 12:31:33 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Thu, 20 Sep 2012 12:31:33 -0700
changeset 6739
f4ccc8c2ecf0
parent 6737
ef8f9efb1230
child 6806
fddad400b1ff
permissions
-rw-r--r--

[css3-transitions][css3-animations] Make single-* productions introduced earlier today have hyperlinks and better ids.

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

mercurial