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