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