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