css3-animations/Overview.src.html

Thu, 04 Oct 2012 13:17:51 -0700

author
Sylvain Galineau <sylvaing@microsoft.com>
date
Thu, 04 Oct 2012 13:17:51 -0700
changeset 6814
6fe144869eeb
parent 6807
217bbc27fc0f
child 6815
39dafac3efc5
permissions
-rw-r--r--

[css3-animations] Fix CSSKeyframeRule.keyText definition to match current implementations i.e. a comma-separated list of percentage values (bug 18580)

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

mercurial