css3-animations/Overview.html

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

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

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

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

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

mercurial