css3-animations/Overview.html

Mon, 04 Feb 2013 21:51:58 -0700

author
L. David Baron <dbaron@dbaron.org>
date
Mon, 04 Feb 2013 21:51:58 -0700
changeset 7313
5df9b029337c
parent 7230
550175952d0f
child 7391
f4da51999dd9
permissions
-rw-r--r--

[css3-animations][css3-transitions] Add warning about dynamic content causing seizures, with link to WCAG.

Fixes:
https://www.w3.org/Bugs/Public/show_bug.cgi?id=14669
https://www.w3.org/Style/CSS/Tracker/actions/399
as resolved in:
http://lists.w3.org/Archives/Public/www-style/2011Nov/0712.html

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

mercurial