changeset
[css-animations][bikeshed] Remove Overview.src.html. Generate new Overview.html
Sat, 05 Apr 2014 15:42:29 -0700
- author
- Sylvain Galineau <galineau@adobe.com>
- date
- Sat, 05 Apr 2014 15:42:29 -0700
- changeset 13677
- cd69f7e8600c
- parent 13676
- 3e45563964a5
- child 13678
- bdc8bb061f95
[css-animations][bikeshed] Remove Overview.src.html. Generate new Overview.html
| css-animations/Overview.html | file | annotate | diff | comparison | revisions | |
| css-animations/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-animations/Overview.html Sat Apr 05 10:59:13 2014 -0700 1.2 +++ b/css-animations/Overview.html Sat Apr 05 15:42:29 2014 -0700 1.3 @@ -1,477 +1,269 @@ 1.4 -<!DOCTYPE html> 1.5 +<!DOCTYPE html><html lang=en><head> 1.6 + <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 1.7 + <title>CSS Animations Level 1</title> 1.8 + <link href=../default.css rel=stylesheet type=text/css> 1.9 + <link href=../csslogo.ico rel="shortcut icon" type=image/x-icon> 1.10 + <style> 1.11 + body { 1.12 + background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white; 1.13 + background-attachment: fixed; 1.14 + color: black; 1.15 + font-family: sans-serif; 1.16 + margin: 0 auto; 1.17 + max-width: 50em; 1.18 + padding: 2em 1em 2em 70px; 1.19 + } 1.20 + :link { color: #00C; background: transparent } 1.21 + :visited { color: #609; background: transparent } 1.22 + a[href]:active { color: #C00; background: transparent } 1.23 + a[href]:hover { background: #ffa } 1.24 1.25 -<html lang=en> 1.26 - <head> 1.27 - <title>CSS Animations</title> 1.28 - <!-- 1.29 - <link href="http://purl.org/dc/terms/" rel="schema.dcterms"> 1.30 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights"> 1.31 - --> 1.32 + a[href] img { border-style: none } 1.33 1.34 - <meta content="CSS Animations" name=dcterms.title> 1.35 - <meta content=text name=dcterms.type> 1.36 - <meta content=2014-04-02 name=dcterms.date> 1.37 - <meta content="L. David Baron" name=dcterms.creator> 1.38 - <meta content=W3C name=dcterms.publisher> 1.39 - <meta content="http://dev.w3.org/csswg/css3-animations/" 1.40 - name=dcterms.identifier> 1.41 - <script defer=defer 1.42 - src="http://test.csswg.org/harness/annotate.js#css-animations-1_dev" 1.43 - type="text/javascript"></script> 1.44 - <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 1.45 - <link href="../default.css" rel=stylesheet type="text/css"> 1.46 - <style type="text/css"> 1.47 - div.prod { margin: 1em 2em; } 1.48 - </style> 1.49 - <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 1.50 - type="text/css"> 1.51 + h1, h2, h3, h4, h5, h6 { text-align: left } 1.52 + h1, h2, h3 { color: #005A9C; } 1.53 + h1 { font: 170% sans-serif } 1.54 + h2 { font: 140% sans-serif } 1.55 + h3 { font: 120% sans-serif } 1.56 + h4 { font: bold 100% sans-serif } 1.57 + h5 { font: italic 100% sans-serif } 1.58 + h6 { font: small-caps 100% sans-serif } 1.59 1.60 - <body> 1.61 - <div class=head> <!--begin-logo--> 1.62 - <p><a href="http://www.w3.org/"><img alt=W3C height=48 1.63 - src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 1.64 + .hide { display: none } 1.65 1.66 - <h1>CSS Animations</h1> 1.67 + div.head { margin-bottom: 1em } 1.68 + div.head h1 { margin-top: 2em; clear: both } 1.69 + div.head table { margin-left: 2em; margin-top: 2em } 1.70 1.71 - <h2 class="no-num no-toc">Editor's Draft 2 April 2014</h2> 1.72 + p.copyright { font-size: small } 1.73 + p.copyright small { font-size: small } 1.74 1.75 - <dl> 1.76 - <dt>This version: 1.77 + pre { margin-left: 2em } 1.78 + dt { font-weight: bold } 1.79 1.80 - <dd><a 1.81 - href="http://dev.w3.org/csswg/css3-animations/">http://dev.w3.org/csswg/css3-animations/</a> 1.82 + ul.toc, ol.toc { 1.83 + list-style: none; 1.84 + } 1.85 + </style> 1.86 1.87 - <dt>Latest version: 1.88 + <script defer src=//test.csswg.org/harness/annotate.js#css-animations-1_dev type=text/javascript></script> 1.89 +</head> 1.90 +<body class=h-entry> 1.91 +<div class=head> 1.92 + <p data-fill-with=logo><a class=logo href=http://www.w3.org/> 1.93 + <img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72> 1.94 +</a> 1.95 +</p> 1.96 + <h1 class="p-name no-ref" id=title>CSS Animations Level 1</h1> 1.97 + <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft, 1.98 + <span class=dt-updated><span class=value-title title=20140405>5 April 2014</span></span></span></h2> 1.99 + <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css3-animations/>http://dev.w3.org/csswg/css3-animations/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-animations/>http://www.w3.org/TR/css3-animations/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css3-animations/>http://dev.w3.org/csswg/css3-animations/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css3-animations-20130219/ rel=previous>http://www.w3.org/TR/2013/WD-css3-animations-20130219/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-animations-20120403/ rel=previous>http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a> 1.100 + <dt>Feedback:</dt> 1.101 + <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-animations%5D%20feedback">www-style@w3.org</a> 1.102 + with subject line 1.103 + “<kbd>[css-animations] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd><a href=http://test.csswg.org/suites/css-animations-1/nightly-unstable/>http://test.csswg.org/suites/css-animations-1/nightly-unstable/</a><dt>Editors: 1.104 +<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:dino@apple.com>Dean Jackson</a> (<span class="p-org org">Apple Inc.</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:dbaron@dbaron.org>L. David Baron</a> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:galineau@adobe.com>Sylvain Galineau</a> (<span class="p-org org">Adobe</span>)<dt>Former Editors: 1.105 +<dd class="p-author h-card vcard"><span class="p-name fn">David Hyatt</span> (<span class="p-org org">Apple Inc.</span>)<dd class="p-author h-card vcard"><span class="p-name fn">Chris Marrin</span> (<span class="p-org org">Apple Inc.</span>)</dl></div> 1.106 + <div data-fill-with=warning></div> 1.107 + <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply. 1.108 +</p> 1.109 + <hr title="Separator for header"> 1.110 +</div> 1.111 1.112 - <dd><a 1.113 - href="http://www.w3.org/TR/css3-animations/">http://www.w3.org/TR/css3-animations/</a> 1.114 +<h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2> 1.115 +<p class=p-summary data-fill-with=abstract>This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior. 1.116 +<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents 1.117 +(such as HTML and XML) 1.118 +on screen, on paper, in speech, etc.</p> 1.119 1.120 - <dt>Editor's draft: 1.121 +<h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2> 1.122 +<div data-fill-with=status><p> 1.123 + This is a public copy of the editors’ draft. 1.124 + It is provided for discussion only and may change at any moment. 1.125 + Its publication here does not imply endorsement of its contents by W3C. 1.126 + Don’t cite this document other than as work in progress. 1.127 1.128 - <dd><a 1.129 - href="http://dev.w3.org/csswg/css3-animations/">http://dev.w3.org/csswg/css3-animations/</a> 1.130 - (<a 1.131 - href="https://dvcs.w3.org/hg/csswg/log/tip/css-animations/Overview.src.html">change 1.132 - log</a>, <a 1.133 - href="https://dvcs.w3.org/hg/csswg/log/tip/css3-animations/Overview.src.html">older 1.134 - change log</a>) 1.135 +<p> 1.136 + The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list 1.137 + <a href="mailto:www-style@w3.org?Subject=%5Bcss-animations%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a> 1.138 + (see <a href=http://www.w3.org/Mail/Request>instructions</a>) 1.139 + is preferred for discussion of this specification. 1.140 + When sending e-mail, 1.141 + please put the text “css-animations” in the subject, 1.142 + preferably like this: 1.143 + “[css-animations] <em>…summary of comment…</em>” 1.144 1.145 - <dt>Previous version: 1.146 +<p> 1.147 + This document was produced by the <a href=http://www.w3.org/Style/CSS/members>CSS Working Group</a> 1.148 + (part of the <a href=http://www.w3.org/Style/>Style Activity</a>). 1.149 1.150 - <dd><a href="http://www.w3.org/TR/2012/WD-css3-animations-20130219/"> 1.151 - http://www.w3.org/TR/2012/WD-css3-animations-20130219/</a> 1.152 +<p> 1.153 + This document was produced by a group operating under 1.154 + the <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>. 1.155 + W3C maintains a <a href=http://www.w3.org/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a> 1.156 + made in connection with the deliverables of the group; 1.157 + that page also includes instructions for disclosing a patent. 1.158 + An individual who has actual knowledge of a patent which the individual believes contains <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a> 1.159 + must disclose the information in accordance with <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.</div> 1.160 +<div data-fill-with=at-risk></div> 1.161 1.162 - <dt id=editors-list>Editors: 1.163 +<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2> 1.164 +<div data-fill-with=table-of-contents><ul class=toc> 1.165 + <li><a href=#intro><span class=secno>1</span> Introduction</a> 1.166 + <li><a href=#values><span class=secno>2</span> Values</a> 1.167 + <li><a href=#animations><span class=secno>3</span> Animations</a> 1.168 + <li><a href=#keyframes><span class=secno>4</span> Keyframes</a> 1.169 + <ul class=toc> 1.170 + <li><a href=#timing-funtions><span class=secno>4.1</span> Timing functions for keyframes</a> 1.171 + <li><a href=#animation-name><span class=secno>4.2</span> The <span class=property data-link-type=propdesc title=animation-name>animation-name</span> property</a> 1.172 + <li><a href=#animation-duration><span class=secno>4.3</span> The <span class=property data-link-type=propdesc title=animation-duration>animation-duration</span> property</a> 1.173 + <li><a href=#animation-timing-function><span class=secno>4.4</span> The <span class=property data-link-type=propdesc title=animation-timing-function>animation-timing-function</span> property</a> 1.174 + <li><a href=#animation-iteration-count><span class=secno>4.5</span> The <span class=property data-link-type=propdesc title=animation-iteration-count>animation-iteration-count</span> property</a> 1.175 + <li><a href=#animation-direction><span class=secno>4.6</span> The <span class=property data-link-type=propdesc title=animation-direction>animation-direction</span> property</a> 1.176 + <li><a href=#animation-play-state><span class=secno>4.7</span> The <span class=property data-link-type=propdesc title=animation-play-state>animation-play-state</span> property</a> 1.177 + <li><a href=#animation-delay><span class=secno>4.8</span> The <span class=property data-link-type=propdesc title=animation-delay>animation-delay</span> property</a> 1.178 + <li><a href=#animation-fill-mode><span class=secno>4.9</span> The <span class=property data-link-type=propdesc title=animation-fill-mode>animation-fill-mode</span> property</a> 1.179 + <li><a href=#animation><span class=secno>4.10</span> The <span class=property data-link-type=propdesc title=animation>animation</span> shorthand property</a></ul> 1.180 + <li><a href=#events><span class=secno>5</span> Animation Events</a> 1.181 + <ul class=toc> 1.182 + <li><a href=#interface-animationevent><span class=secno>5.1</span> The <code>AnimationEvent</code> Interface</a> 1.183 + <ul class=toc> 1.184 + <li><a href=#interface-animationevent-idl><span class=secno>5.1.1</span> IDL Definition</a> 1.185 + <li><a href=#interface-animationevent-attributes><span class=secno>5.1.2</span> Attributes</a></ul> 1.186 + <li><a href=#event-animationevent><span class=secno>5.2</span> Types of <code>AnimationEvent</code></a></ul> 1.187 + <li><a href=#interface-dom><span class=secno>6</span> DOM Interfaces</a> 1.188 + <ul class=toc> 1.189 + <li><a href=#interface-cssrule><span class=secno>6.1</span> The <code>CSSRule</code> Interface</a> 1.190 + <ul class=toc> 1.191 + <li><a href=#interface-cssrule-idl><span class=secno>6.1.1</span> IDL Definition</a></ul> 1.192 + <li><a href=#interface-csskeyframerule><span class=secno>6.2</span> The <code>CSSKeyframeRule</code> Interface</a> 1.193 + <ul class=toc> 1.194 + <li><a href=#interface-csskeyframerule-idl><span class=secno>6.2.1</span> IDL Definition</a> 1.195 + <li><a href=#interface-csskeyframerule-attributes><span class=secno>6.2.2</span> Attributes</a></ul> 1.196 + <li><a href=#interface-csskeyframesrule><span class=secno>6.3</span> The <code>CSSKeyframesRule</code> Interface</a> 1.197 + <ul class=toc> 1.198 + <li><a href=#interface-csskeyframesrule-idl><span class=secno>6.3.1</span> IDL Definition</a> 1.199 + <li><a href=#interface-csskeyframesrule-attributes><span class=secno>6.3.2</span> Attributes</a> 1.200 + <li><a href=#interface-csskeyframesrule-appendrule><span class=secno>6.3.3</span> The <code>appendRule</code> method</a> 1.201 + <li><a href=#interface-csskeyframesrule-deleterule><span class=secno>6.3.4</span> The <code>deleteRule</code> method</a> 1.202 + <li><a href=#interface-csskeyframesrule-findrule><span class=secno>6.3.5</span> The <code>findRule</code> method</a></ul></ul> 1.203 + <li><a href=#acknowledgements><span class=secno>7</span> Acknowledgements</a> 1.204 + <li><a href=#wg-resolutions-pending><span class=secno>8</span> Working Group Resolutions that are pending editing</a> 1.205 + <li><a href=#conformance><span class=secno></span> Conformance</a> 1.206 + <ul class=toc> 1.207 + <li><a href=#conventions><span class=secno></span> Document conventions</a> 1.208 + <li><a href=#conformance-classes><span class=secno></span> Conformance classes</a> 1.209 + <li><a href=#partial><span class=secno></span> Partial implementations</a> 1.210 + <li><a href=#experimental><span class=secno></span> Experimental implementations</a> 1.211 + <li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul> 1.212 + <li><a href=#references><span class=secno></span> References</a> 1.213 + <ul class=toc> 1.214 + <li><a href=#normative><span class=secno></span> Normative References</a> 1.215 + <li><a href=#informative><span class=secno></span> Informative References</a></ul> 1.216 + <li><a href=#index><span class=secno></span> Index</a> 1.217 + <li><a href=#property-index><span class=secno></span> Property index</a></ul></div> 1.218 1.219 - <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a 1.220 - href="http://www.apple.com/">Apple Inc</a>) 1.221 1.222 - <dd><a href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (<a 1.223 - class=org href="http://www.microsoft.com/">Microsoft</a>) 1.224 1.225 - <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a> 1.226 - (<a class=org href="http://www.mozilla.org/">Mozilla</a>) 1.227 1.228 - <dt>Former editors: 1.229 +<h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </span><span class=content> 1.230 +Introduction</span><a class=self-link href=#intro></a></h2> 1.231 1.232 - <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a 1.233 - href="http://www.apple.com/">Apple Inc</a>) 1.234 +<p> <em>This section is not normative</em> 1.235 1.236 - <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a 1.237 - href="http://www.apple.com/">Apple Inc</a>) 1.238 +<p> CSS Transitions <a data-biblio-type=informative data-link-type=biblio href=#css3-transitions title=css3-transitions>[CSS3-TRANSITIONS]</a> provide a way to interpolate 1.239 + CSS property values when they change as a result of underlying 1.240 + property changes. This provides an easy way to do simple animation, 1.241 + but the start and end states of the animation are controlled by the 1.242 + existing property values, and transitions provide little control to 1.243 + the author on how the animation progresses. 1.244 1.245 - <dd>Sylvain Galineau, Microsoft 1.246 +<p> This proposal introduces defined animations, in which the author can 1.247 + specify the changes in CSS properties over time as a set of keyframes. 1.248 + Animations are similar to transitions in that they change the 1.249 + presentational value of CSS properties over time. The principal difference 1.250 + is that while transitions trigger implicitly when property values change, 1.251 + animations are explicitly executed when the animation properties are applied. 1.252 + Because of this, animations require explicit values for the properties 1.253 + being animated. These values are specified using animation keyframes, 1.254 + described below. 1.255 1.256 - <dt>Issues list: 1.257 +<p> Many aspects of the animation can be controlled, including how many times 1.258 + the animation iterates, whether or not it alternates between the begin and 1.259 + end values, and whether or not the animation should be running or paused. 1.260 + An animation can also delay its start time. 1.261 1.262 - <dd>In Bugzilla: <a 1.263 - href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Animations&resolution=---&status_whiteboard=defer%20to%20level%202&status_whiteboard_type=notregexp">for 1.264 - this level</a>, <a 1.265 - href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Animations&resolution=---">for 1.266 - all levels</a> 1.267 +<h2 class="heading settled heading" data-level=2 id=values><span class=secno>2 </span><span class=content> 1.268 +Values</span><a class=self-link href=#values></a></h2> 1.269 1.270 - <dd>In Document: <a href="#issues-to-edit">list of pending edits</a> 1.271 +<p> This specification follows the CSS property definition conventions 1.272 + from <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>. Value types not defined in this specification are 1.273 + defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>. Other CSS modules may 1.274 + expand the definitions of these value types: for example <a data-biblio-type=normative data-link-type=biblio href=#css3val title=css3val>[CSS3VAL]</a>, 1.275 + when combined with this module, expands the definition of the 1.276 + <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>"><length></a> value type as used in this specification. 1.277 1.278 - <dt>Feedback: 1.279 +<p> In addition to the property-specific values listed in their definitions, 1.280 + all properties defined in this specification also accept the ‘initial’ 1.281 + and ‘inherit’ keyword as their property value. For readability it has 1.282 + not been repeated explicitly. 1.283 1.284 - <dd><a 1.285 - href="mailto:www-style@w3.org?subject=%5Bcss-animations%5D%20feedback">www-style@w3.org</a> 1.286 - with subject line “<kbd>[css-animations] <var>… message topic 1.287 - …</var></kbd>” (<a 1.288 - href="http://lists.w3.org/Archives/Public/www-style/" 1.289 - rel=discussion>archives</a>) 1.290 +<h2 class="heading settled heading" data-level=3 id=animations><span class=secno>3 </span><span class=content> 1.291 +Animations</span><a class=self-link href=#animations></a></h2> 1.292 1.293 - <dt>Test suite: 1.294 +<p> CSS Animations affect computed property values. This effect happens by 1.295 + adding a specified value to the CSS cascade (<a data-biblio-type=normative data-link-type=biblio href=#css3cascade title=css3cascade>[CSS3CASCADE]</a>) (at the 1.296 + level for CSS Animations) that will produce the correct computed value 1.297 + for the current state of the animation. As defined in <a data-biblio-type=normative data-link-type=biblio href=#css3cascade title=css3cascade>[CSS3CASCADE]</a>, 1.298 + animations override all normal rules, but are overridden by !important 1.299 + rules. 1.300 1.301 - <dd><a 1.302 - href="http://test.csswg.org/suites/css-animations-1/nightly-unstable/">http://test.csswg.org/suites/css-animations-1/nightly-unstable/</a> 1.303 - </dl> 1.304 - <!--begin-copyright--> 1.305 - <p class=copyright><a 1.306 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.307 - rel=license>Copyright</a> © 2014 <a href="http://www.w3.org/"><abbr 1.308 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 1.309 - href="http://www.csail.mit.edu/"><abbr 1.310 - title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 1.311 - href="http://www.ercim.eu/"><abbr 1.312 - title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 1.313 - <a href="http://www.keio.ac.jp/">Keio</a>, <a 1.314 - href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a 1.315 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 1.316 - <a 1.317 - href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 1.318 - and <a 1.319 - href="http://www.w3.org/Consortium/Legal/copyright-documents">document 1.320 - use</a> rules apply.</p> 1.321 - <!--end-copyright--> 1.322 - <hr title="Separator for header"> 1.323 - </div> 1.324 +<p> If at one point in time there are multiple animations specifying behavior 1.325 + for the same property, the animation whose name occurs last in the value 1.326 + of <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> will override the other animations at that point. 1.327 1.328 - <h2 class="no-num no-toc" id=abstract> Abstract</h2> 1.329 +<p> An animation does not affect the computed value before the application of 1.330 + the animation, before the animation delay has expired, and after the end of 1.331 + the animation. 1.332 1.333 - <p> This CSS module describes a way for authors to animate the values of 1.334 - CSS properties over time, using keyframes. The behavior of these keyframe 1.335 - animations can be controlled by specifying their duration, number of 1.336 - repeats, and repeating behavior. 1.337 + </p><figure> 1.338 + <img alt="" src=./sandwich.png> 1.339 + <figcaption>Computation of animated property values</figcaption> 1.340 + </figure> 1.341 1.342 - <h2 class="no-num no-toc" id=status> Status of this document</h2> 1.343 - <!--begin-status--> 1.344 +<p> The diagram above shows how property values are computed. The intrinsic 1.345 + style is shown at the top of the diagram. The computed value is derived 1.346 + from intrinsic style at the times when an animation is not running and 1.347 + also when an animation is delayed (see below for specification of animation 1.348 + delay). During an animation, the computed style is derived from the 1.349 + animated value. 1.350 1.351 - <p>This is a public copy of the editors' draft. It is provided for 1.352 - discussion only and may change at any moment. Its publication here does 1.353 - not imply endorsement of its contents by W3C. Don't cite this document 1.354 - other than as work in progress. 1.355 +<p> The start time of an animation is the latter of two moments: the time at 1.356 + which the style is resolved that specifies the animation, or the time the 1.357 + document’s load event is fired. Therefore, an animation specified in the 1.358 + document style sheet will begin at the document load. An animation specified 1.359 + on an element by modifying the style after the document has loaded will start 1.360 + when the style is resolved. That may be immediately in the case of a pseudo 1.361 + style rule such as hover, or may be when the scripting engine returns control 1.362 + to the browser (in the case of style applied by script). 1.363 1.364 - <p>The (<a 1.365 - href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 1.366 - mailing list <a 1.367 - href="mailto:www-style@w3.org?Subject=%5Bcss3-animations%5D%20PUT%20SUBJECT%20HERE"> 1.368 - www-style@w3.org</a> (see <a 1.369 - href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 1.370 - discussion of this specification. When sending e-mail, please put the text 1.371 - “css3-animations” in the subject, preferably like this: 1.372 - “[<!---->css3-animations<!---->] <em>…summary of comment…</em>” 1.373 +<p> An animation applies to an element if its name appears as one of the 1.374 + identifiers in the computed value of the <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> property. Once an 1.375 + animation has started it continues until it ends or the <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> is 1.376 + removed. The values used for the keyframes and animation properties are 1.377 + snapshotted at the time the animation starts. Changing them during the 1.378 + execution of the animation has no effect. Note also that changing the value 1.379 + of <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> does not necessarily restart an animation (e.g., if a list 1.380 + of animations are applied and one is removed from the list, only that animation 1.381 + will stop; The other animations will continue). In order to restart an animation, 1.382 + it must be removed then reapplied. 1.383 1.384 - <p>This document was produced by the <a 1.385 - href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of 1.386 - the <a href="http://www.w3.org/Style/">Style Activity</a>). 1.387 +<p> The end of the animation is defined by the combination of the 1.388 + <a class=property data-link-type=propdesc href=#propdef-animation-duration title=animation-duration>animation-duration</a>, <a class=property data-link-type=propdesc href=#propdef-animation-iteration-count title=animation-iteration-count>animation-iteration-count</a> and <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> 1.389 + properties. 1.390 1.391 - <p>This document was produced by a group operating under the <a 1.392 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 1.393 - 2004 W3C Patent Policy</a>. W3C maintains a <a 1.394 - href="http://www.w3.org/2004/01/pp-impl/32061/status" 1.395 - rel=disclosure>public list of any patent disclosures</a> made in 1.396 - connection with the deliverables of the group; that page also includes 1.397 - instructions for disclosing a patent. An individual who has actual 1.398 - knowledge of a patent which the individual believes contains <a 1.399 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential 1.400 - Claim(s)</a> must disclose the information in accordance with <a 1.401 - href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 1.402 - 6 of the W3C Patent Policy</a>.</p> 1.403 - <!--end-status--> 1.404 - 1.405 - <h3 class="no-num no-toc" id=issues-to-edit> Working Group Resolutions that 1.406 - still need to be edited</h3> 1.407 - 1.408 - <p>The editors are currently behind on editing this spec. The following 1.409 - working group resolutions still need to be edited in: 1.410 - 1.411 - <ul> 1.412 - <li> <a 1.413 - href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0261.html">2012-10-29 1.414 - minutes</a> 1.415 - <ul> 1.416 - <li>Change the animation properties to be dynamically changeable 1.417 - 1.418 - <li>@keyframes can be dynamically changed 1.419 - 1.420 - <li>When you encounter duplicate animations names, last one wins. 1.421 - 1.422 - <li>Make *animations* transition *all* properties. Unless otherwise 1.423 - specified, discrete properties take their starting values below 50% 1.424 - timing function progress, and end values above 50% timing function 1.425 - progress. 1.426 - </ul> 1.427 - 1.428 - <li> <a 1.429 - href="http://lists.w3.org/Archives/Public/www-style/2012Dec/0188.html">2012-12-12 1.430 - minutes</a> and <a 1.431 - href="http://lists.w3.org/Archives/Public/www-style/2012Dec/0268.html">intermediate 1.432 - comments</a> and <a 1.433 - href="http://lists.w3.org/Archives/Public/www-style/2012Dec/0330.html">2012-12-19 1.434 - minutes</a> 1.435 - <ul> 1.436 - <li>??? Does anything still need to be done for these? 1.437 - </ul> 1.438 - 1.439 - <li> <a 1.440 - href="http://lists.w3.org/Archives/Public/www-style/2013Feb/0572.html">2013-02-20 1.441 - minutes</a> 1.442 - <ul> 1.443 - <li>Øyvind's clarification accepted 1.444 - 1.445 - <li>keyframe rules cascade 1.446 - 1.447 - <li>mark pseudoElement at-risk 1.448 - </ul> 1.449 - 1.450 - <li> <a 1.451 - href="http://lists.w3.org/Archives/Public/www-style/2013May/0783.html">2013-05-30 1.452 - minutes</a> 1.453 - <ul> 1.454 - <li>expectations on animations in non-interactive media 1.455 - </ul> 1.456 - 1.457 - <li> <a 1.458 - href="http://lists.w3.org/Archives/Public/www-style/2014Jan/0606.html">2014-01-27 1.459 - minutes</a> 1.460 - <ul> 1.461 - <li>remove text about waiting for document load 1.462 - </ul> 1.463 - </ul> 1.464 - 1.465 - <h2 class="no-num no-toc" id=contents> Table of contents</h2> 1.466 - <!--begin-toc--> 1.467 - 1.468 - <ul class=toc> 1.469 - <li><a href="#introduction"><span class=secno>1. </span> Introduction</a> 1.470 - 1.471 - <li><a href="#values"><span class=secno>2. </span> Values</a> 1.472 - 1.473 - <li><a href="#animations"><span class=secno>3. </span> Animations</a> 1.474 - 1.475 - <li><a href="#keyframes"><span class=secno>4. </span> Keyframes</a> 1.476 - <ul class=toc> 1.477 - <li><a href="#timing-functions"><span class=secno>4.1. </span> Timing 1.478 - functions for keyframes</a> 1.479 - 1.480 - <li><a href="#animation-name-property"><span class=secno>4.2. </span> 1.481 - The ‘<code class=property>animation-name</code>’ Property</a> 1.482 - 1.483 - <li><a href="#animation-duration-property"><span class=secno>4.3. 1.484 - </span> The ‘<code class=property>animation-duration</code>’ 1.485 - Property</a> 1.486 - 1.487 - <li><a href="#animation-timing-function-property"><span class=secno>4.4. 1.488 - </span> The ‘<code class=property>animation-timing-function</code>’ 1.489 - Property</a> 1.490 - 1.491 - <li><a href="#animation-iteration-count-property"><span class=secno>4.5. 1.492 - </span> The ‘<code class=property>animation-iteration-count</code>’ 1.493 - Property</a> 1.494 - 1.495 - <li><a href="#animation-direction-property"><span class=secno>4.6. 1.496 - </span> The ‘<code class=property>animation-direction</code>’ 1.497 - Property</a> 1.498 - 1.499 - <li><a href="#animation-play-state-property"><span class=secno>4.7. 1.500 - </span> The ‘<code class=property>animation-play-state</code>’ 1.501 - Property</a> 1.502 - 1.503 - <li><a href="#animation-delay-property"><span class=secno>4.8. </span> 1.504 - The ‘<code class=property>animation-delay</code>’ Property</a> 1.505 - 1.506 - <li><a href="#animation-fill-mode-property"><span class=secno>4.9. 1.507 - </span> The ‘<code class=property>animation-fill-mode</code>’ 1.508 - Property</a> 1.509 - 1.510 - <li><a href="#animation-shorthand-property"><span class=secno>4.10. 1.511 - </span> The ‘<code class=property>animation</code>’ Shorthand 1.512 - Property</a> 1.513 - </ul> 1.514 - 1.515 - <li><a href="#animation-events"><span class=secno>5. </span> Animation 1.516 - Events</a> 1.517 - <ul class=toc> 1.518 - <li><a href="#AnimationEvent-interface"><span class=secno>5.1. </span> 1.519 - Interface <code>AnimationEvent</code></a> 1.520 - <ul class=toc> 1.521 - <li><a href="#AnimationEvent-IDL"><span class=secno>5.1.1. </span> IDL 1.522 - Definition</a> 1.523 - 1.524 - <li><a href="#AnimationEvent-attributes"><span class=secno>5.1.2. 1.525 - </span> Attributes</a> 1.526 - </ul> 1.527 - 1.528 - <li><a href="#AnimationEvent-types"><span class=secno>5.2. </span> Types 1.529 - of <code>AnimationEvent</code></a> 1.530 - </ul> 1.531 - 1.532 - <li><a href="#dom-interfaces"><span class=secno>6. </span> DOM 1.533 - Interfaces</a> 1.534 - <ul class=toc> 1.535 - <li><a href="#CSSRule-interface"><span class=secno>6.1. </span> 1.536 - Interface <code>CSSRule</code></a> 1.537 - <ul class=toc> 1.538 - <li><a href="#CSSRule-IDL"><span class=secno>6.1.1. </span> IDL 1.539 - Definition</a> 1.540 - </ul> 1.541 - 1.542 - <li><a href="#CSSKeyframeRule-interface"><span class=secno>6.2. </span> 1.543 - Interface <code>CSSKeyframeRule</code></a> 1.544 - <ul class=toc> 1.545 - <li><a href="#CSSKeyframeRule-IDL"><span class=secno>6.2.1. </span> 1.546 - IDL Definition</a> 1.547 - 1.548 - <li><a href="#CSSKeyframeRule-attributes"><span class=secno>6.2.2. 1.549 - </span> Attributes</a> 1.550 - </ul> 1.551 - 1.552 - <li><a href="#CSSKeyframesRule-interface"><span class=secno>6.3. </span> 1.553 - Interface <code>CSSKeyframesRule</code></a> 1.554 - <ul class=toc> 1.555 - <li><a href="#CSSKeyframesRule-IDL"><span class=secno>6.3.1. </span> 1.556 - IDL Definition</a> 1.557 - 1.558 - <li><a href="#CSSKeyframesRule-attributes"><span class=secno>6.3.2. 1.559 - </span> Attributes</a> 1.560 - 1.561 - <li><a href="#CSSKeyframesRule-appendRule"><span class=secno>6.3.3. 1.562 - </span> The <code>appendRule</code> method</a> 1.563 - 1.564 - <li><a href="#CSSKeyframesRules-deleteRule"><span class=secno>6.3.4. 1.565 - </span> The <code>deleteRule</code> method</a> 1.566 - 1.567 - <li><a href="#CSSKeyframesRule-findRule"><span class=secno>6.3.5. 1.568 - </span> The <code>findRule</code> method</a> 1.569 - </ul> 1.570 - </ul> 1.571 - 1.572 - <li><a href="#acknowledgments"><span class=secno>7. 1.573 - </span>Acknowledgments</a> 1.574 - 1.575 - <li><a href="#references"><span class=secno>8. </span>References</a> 1.576 - <ul class=toc> 1.577 - <li class=no-num><a href="#normative-references">Normative 1.578 - references</a> 1.579 - 1.580 - <li class=no-num><a href="#other-references">Other references</a> 1.581 - </ul> 1.582 - 1.583 - <li class=no-num><a href="#property-index">Property index</a> 1.584 - 1.585 - <li class=no-num><a href="#index">Index</a> 1.586 - </ul> 1.587 - <!--end-toc--> 1.588 - 1.589 - <h2 id=introduction><span class=secno>1. </span> Introduction</h2> 1.590 - 1.591 - <p><em>This section is not normative.</em> 1.592 - 1.593 - <p> CSS Transitions <a 1.594 - href="#ref-CSS3-TRANSITIONS">[CSS3-TRANSITIONS]<!--{{CSS3-TRANSITIONS}}--></a> 1.595 - provide a way to interpolate CSS property values when they change as a 1.596 - result of underlying property changes. This provides an easy way to do 1.597 - simple animation, but the start and end states of the animation are 1.598 - controlled by the existing property values, and transitions provide little 1.599 - control to the author on how the animation progresses. 1.600 - 1.601 - <p> This proposal introduces <dfn id=defined-animations>defined 1.602 - animations</dfn>, in which the author can specify the changes in CSS 1.603 - properties over time as a set of keyframes. Animations are similar to 1.604 - transitions in that they change the presentational value of CSS properties 1.605 - over time. The principal difference is that while transitions trigger 1.606 - <em>implicitly</em> when property values change, animations are 1.607 - <em>explicitly</em> executed when the animation properties are applied. 1.608 - Because of this, animations require explicit values for the properties 1.609 - being animated. These values are specified using animation keyframes, 1.610 - described below. 1.611 - 1.612 - <p> Many aspects of the animation can be controlled, including how many 1.613 - times the animation iterates, whether or not it alternates between the 1.614 - begin and end values, and whether or not the animation should be running 1.615 - or paused. An animation can also delay its start time. 1.616 - 1.617 - <h2 id=values><span class=secno>2. </span> Values</h2> 1.618 - 1.619 - <p> This specification follows the <a 1.620 - href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 1.621 - definition conventions</a> from <a 1.622 - href="#ref-CSS21">[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in 1.623 - this specification are defined in CSS Level 2 Revision 1 <a 1.624 - href="#ref-CSS21">[CSS21]<!--{{!CSS21}}--></a>. Other CSS modules may 1.625 - expand the definitions of these value types: for example <a 1.626 - href="#ref-CSS3VAL">[CSS3VAL]<!--{{CSS3VAL}}--></a>, when combined with 1.627 - this module, expands the definition of the <var><length></var> value 1.628 - type as used in this specification. 1.629 - 1.630 - <p>In addition to the property-specific values listed in their definitions, 1.631 - all properties defined in this specification also accept the <a 1.632 - href="http://dev.w3.org/csswg/css3-values/#common-keywords">‘<code 1.633 - class=css>initial</code>’</a> and <a 1.634 - href="http://dev.w3.org/csswg/css3-values/#common-keywords">‘<code 1.635 - class=css>inherit</code>’</a> keyword as their property value. For 1.636 - readability it has not been repeated explicitly. 1.637 - 1.638 - <h2 id=animations><span class=secno>3. </span> Animations</h2> 1.639 - 1.640 - <p> CSS Animations affect computed property values. This effect happens by 1.641 - adding a specified value to the CSS cascade (<a 1.642 - href="#ref-CSS3CASCADE">[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>) (at the 1.643 - level for CSS Animations) that will produce the correct computed value for 1.644 - the current state of the animation. As defined in <a 1.645 - href="#ref-CSS3CASCADE">[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>, 1.646 - animations override all normal rules, but are overridden by !important 1.647 - rules. 1.648 - 1.649 - <p> If at one point in time there are multiple animations specifying 1.650 - behavior for the same property, the animation whose name occurs last in 1.651 - the value of ‘<a href="#animation-name"><code 1.652 - class=property>animation-name</code></a>’ will override the other 1.653 - animations at that point. 1.654 - 1.655 - <p> An animation does not affect the computed value before the application 1.656 - of the animation, before the animation delay has expired, and after the 1.657 - end of the animation. 1.658 - 1.659 - <div class=figure> <img alt="" src=sandwich.png> 1.660 - <p class=caption> Computation of animated property values 1.661 - </div> 1.662 - 1.663 - <p> The diagram above shows how property values are computed. The intrinsic 1.664 - style is shown at the top of the diagram. The computed value is derived 1.665 - from intrinsic style at the times when an animation is not running and 1.666 - also when an animation is delayed (see below for specification of 1.667 - animation delay). During an animation, the computed style is derived from 1.668 - the animated value. 1.669 - 1.670 - <p> The start time of an animation is the latter of two moments: the time 1.671 - at which the style is resolved that specifies the animation, or the time 1.672 - the document's load event is fired. Therefore, an animation specified in 1.673 - the document style sheet will begin at the document load. An animation 1.674 - specified on an element by modifying the style after the document has 1.675 - loaded will start when the style is resolved. That may be immediately in 1.676 - the case of a pseudo style rule such as hover, or may be when the 1.677 - scripting engine returns control to the browser (in the case of style 1.678 - applied by script). 1.679 - 1.680 - <p> An animation applies to an element if its name appears as one of the 1.681 - identifiers in the computed value of the ‘<a 1.682 - href="#animation-name"><code class=property>animation-name</code></a>’ 1.683 - property. Once an animation has started it continues until it ends or the 1.684 - ‘<a href="#animation-name"><code 1.685 - class=property>animation-name</code></a>’ is removed. The values used 1.686 - for the keyframes and <a href="#animation-properties">animation 1.687 - properties</a> are snapshotted at the time the animation starts. Changing 1.688 - them during the execution of the animation has no effect. Note also that 1.689 - changing the value of ‘<a href="#animation-name"><code 1.690 - class=property>animation-name</code></a>’ does not necessarily restart 1.691 - an animation (e.g., if a list of animations are applied and one is removed 1.692 - from the list, only that animation will stop; The other animations will 1.693 - continue). In order to restart an animation, it must be removed then 1.694 - reapplied. 1.695 - 1.696 - <p> The end of the animation is defined by the combination of the ‘<a 1.697 - href="#animation-duration"><code 1.698 - class=property>animation-duration</code></a>’, ‘<a 1.699 - href="#animation-iteration-count"><code 1.700 - class=property>animation-iteration-count</code></a>’ and ‘<a 1.701 - href="#animation-fill-mode"><code 1.702 - class=property>animation-fill-mode</code></a>’ properties. 1.703 - 1.704 - <div class=example> 1.705 - <pre> 1.706 -div { 1.707 + <div class=example> 1.708 + <pre>div { 1.709 animation-name: diagonal-slide; 1.710 animation-duration: 5s; 1.711 animation-iteration-count: 10; 1.712 @@ -489,106 +281,78 @@ 1.713 top: 100px; 1.714 } 1.715 1.716 -}</pre> 1.717 +} 1.718 +</pre> 1.719 +<p> This will produce an animation that moves an element from (0, 0) to 1.720 + (100px, 100px) over five seconds and repeats itself nine times 1.721 + (for a total of ten iterations). 1.722 1.723 - <p> This will produce an animation that moves an element from (0, 0) to 1.724 - (100px, 100px) over five seconds and repeats itself nine times (for a 1.725 - total of ten iterations). 1.726 - </div> 1.727 + </div> 1.728 1.729 - <p> Setting the display property to ‘<code class=property>none</code>’ 1.730 - will terminate any running animation applied to the element and its 1.731 - descendants. If an element has a display of ‘<code 1.732 - class=property>none</code>’, updating display to a value other than 1.733 - ‘<code class=property>none</code>’ will start all animations applied 1.734 - to the element by the ‘<a href="#animation-name"><code 1.735 - class=property>animation-name</code></a>’ property, as well as all 1.736 - animations applied to descendants with display other than ‘<code 1.737 - class=property>none</code>’. 1.738 +<p> Setting the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> property to <span class=css data-link-for=display data-link-type=maybe title=none>none</span> will terminate any running animation applied 1.739 + to the element and its descendants. If an element has a <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> of <span class=css data-link-for=display data-link-type=maybe title=none>none</span>, updating 1.740 + <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> to a value other than <span class=css data-link-for=display data-link-type=maybe title=none>none</span> will start all animations applied to the element 1.741 + by the <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> property, as well as all animations applied to descendants 1.742 + with <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visuren.html#propdef-display title=display>display</a> other than <span class=css data-link-for=display data-link-type=maybe title=none>none</span>. 1.743 1.744 - <p> While authors can use animations to create dynamically changing 1.745 - content, dynamically changing content can lead to seizures in some users. 1.746 - For information on how to avoid content that can lead to seizures, see <a 1.747 - href="http://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3: Seizures: Do 1.748 - not design content in a way that is known to cause seizures</a> (<a 1.749 - href="#ref-WCAG20">[WCAG20]<!--{{WCAG20}}--></a>). 1.750 +<p> While authors can use animations to create dynamically changing content, dynamically 1.751 + changing content can lead to seizures in some users. For information on how to avoid 1.752 + content that can lead to seizures, see Guideline 2.3: Seizures: Do not design content 1.753 + in a way that is known to cause seizures (<a data-biblio-type=normative data-link-type=biblio href=#wcag20 title=wcag20>[WCAG20]</a>). 1.754 1.755 - <h2 id=keyframes><span class=secno>4. </span> Keyframes</h2> 1.756 +<h2 class="heading settled heading" data-level=4 id=keyframes><span class=secno>4 </span><span class=content> 1.757 +Keyframes</span><a class=self-link href=#keyframes></a></h2> 1.758 1.759 - <p> Keyframes are used to specify the values for the animating properties 1.760 - at various points during the animation. The keyframes specify the behavior 1.761 - of one cycle of the animation; the animation may iterate one or more 1.762 - times. 1.763 +<p> Keyframes are used to specify the values for the animating properties at various points 1.764 + during the animation. The keyframes specify the behavior of one cycle of the animation; 1.765 + the animation may iterate one or more times. 1.766 1.767 - <p> Keyframes are specified using a specialized CSS at-rule. A @keyframes 1.768 - rule consists of the keyword "@keyframes", followed by an identifier 1.769 - giving a name for the animation (which will be referenced using ‘<a 1.770 - href="#animation-name"><code class=property>animation-name</code></a>’), 1.771 - followed by a set of style rules (delimited by curly braces). 1.772 +<p> Keyframes are specified using a specialized CSS at-rule. A <dfn class=css-code data-dfn-type=at-rule data-export="" id=at-ruledef-keyframes>@keyframes<a class=self-link href=#at-ruledef-keyframes></a></dfn> rule consists of the 1.773 + keyword "@keyframes", followed by an identifier giving a name for the animation (which will 1.774 + be referenced using <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a>), followed by a set of style rules (delimited by curly 1.775 + braces). 1.776 1.777 - <p> The <dfn id=keyframe-selector>keyframe selector</dfn> for a keyframe 1.778 - style rule consists of a comma-separated list of percentage values or the 1.779 - keywords ‘<code class=property>from</code>’ or ‘<code 1.780 - class=property>to</code>’. The selector is used to specify the 1.781 - percentage along the duration of the animation that the keyframe 1.782 - represents. The keyframe itself is specified by the block of property 1.783 - values declared on the selector. The keyword ‘<code 1.784 - class=property>from</code>’ is equivalent to the value ‘<code 1.785 - class=css>0%</code>’. The keyword ‘<code class=property>to</code>’ 1.786 - is equivalent to the value ‘<code class=css>100%</code>’. <span 1.787 - class=note>Note that the percentage unit specifier must be used on 1.788 - percentage values. Therefore, ‘<code class=css>0</code>’ is an invalid 1.789 - keyframe selector.</span> 1.790 +<p> The keyframe selector for a keyframe style rule consists of a comma-separated list of 1.791 + percentage values or the keywords <span class=css data-link-type=maybe title=from>from</span> or <span class=css data-link-type=maybe title=to>to</span>. The selector is used to specify the 1.792 + percentage along the duration of the animation that the keyframe represents. The keyframe 1.793 + itself is specified by the block of property values declared on the selector. The keyword 1.794 + <span class=css data-link-type=maybe title=from>from</span> is equivalent to the value <span class=css data-link-type=maybe title=0%>0%</span>. The keyword <span class=css data-link-type=maybe title=to>to</span> is equivalent to the value <span class=css data-link-type=maybe title=100%>100%</span>. 1.795 + <span class=note>Note that the percentage unit specifier must be used on percentage values. 1.796 + Therefore, <span class=css data-link-type=maybe title=0>0</span> is an invalid keyframe selector.</span> 1.797 1.798 - <p> If a ‘<code class=css>0%</code>’ or ‘<code 1.799 - class=css>from</code>’ keyframe is not specified, then the user agent 1.800 - constructs a ‘<code class=css>0%</code>’ keyframe using the computed 1.801 - values of the properties being animated. If a ‘<code 1.802 - class=css>100%</code>’ or ‘<code class=css>to</code>’ keyframe is 1.803 - not specified, then the user agent constructs a ‘<code 1.804 - class=css>100%</code>’ keyframe using the computed values of the 1.805 - properties being animated. If a keyframe selector specifies negative 1.806 - percentage values or values higher than 100%, then the keyframe will be 1.807 - ignored. 1.808 +<p> If a <span class=css data-link-type=maybe title=0%>0%</span> or <span class=css data-link-type=maybe title=from>from</span> keyframe is not specified, then the user agent constructs a <span class=css data-link-type=maybe title=0%>0%</span> keyframe 1.809 + using the computed values of the properties being animated. If a <span class=css data-link-type=maybe title=100%>100%</span> or <span class=css data-link-type=maybe title=to>to</span> keyframe is not 1.810 + specified, then the user agent constructs a <span class=css data-link-type=maybe title=100%>100%</span> keyframe using the computed values of the 1.811 + properties being animated. If a keyframe selector specifies negative percentage values or values 1.812 + higher than <span class=css data-link-type=maybe title=100%>100%</span>, then the keyframe will be ignored. 1.813 1.814 - <p> The <dfn id=keyframe-declaration-block>keyframe declaration block</dfn> 1.815 - for a keyframe rule consists of properties and values. Properties that are 1.816 - unable to be animated are ignored in these rules, with the exception of 1.817 - ‘<a href="#animation-timing-function"><code 1.818 - class=property>animation-timing-function</code></a>’, the behavior of 1.819 - which is described below. In addition, keyframe rule declarations 1.820 - qualified with !important are ignored. 1.821 +<p> The keyframe declaration block for a keyframe rule consists of properties and values. Properties 1.822 + that are unable to be animated are ignored in these rules, with the exception of 1.823 + <a class=property data-link-type=propdesc href=#propdef-animation-timing-function title=animation-timing-function>animation-timing-function</a>, the behavior of which is described below. In addition, keyframe rule 1.824 + declarations qualified with !important are ignored. 1.825 1.826 - <p class=issue> Need to describe what happens if a property is not present 1.827 - in all keyframes. 1.828 +<p> Issue: Need to describe what happens if a property is not present in all keyframes. 1.829 1.830 - <p> The @keyframes rule that is used by an animation will be the last one 1.831 - encountered in sorted rules order that matches the name of the animation 1.832 - specified by the ‘<a href="#animation-name"><code 1.833 - class=property>animation-name</code></a>’ property. @keyframes rules do 1.834 - not cascade; therefore, an animation will never derive keyframes from more 1.835 - than one @keyframes rule. 1.836 +<p> The @keyframes rule that is used by an animation will be the last one encountered in sorted rules 1.837 + order that matches the name of the animation specified by the <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> property. @keyframes 1.838 + rules do not cascade; therefore, an animation will never derive keyframes from more than one 1.839 + @keyframes rule. 1.840 1.841 - <p class=note> Note that since empty @keyframes rule are valid, they may 1.842 - hide the keyframes of those preceding animation definitions with a 1.843 - matching name. 1.844 +<p class=note> Note: Since empty @keyframes rule are valid, they may hide the keyframes of those 1.845 + preceding animation definitions with a matching name. 1.846 1.847 - <p> To determine the set of keyframes, all of the values in the selectors 1.848 - are sorted in increasing order by time. If there are any duplicates, then 1.849 - the last keyframe specified inside the @keyframes rule will be used to 1.850 - provide the keyframe information for that time. There is no cascading 1.851 - within a @keyframes rule if multiple keyframes specify the same keyframe 1.852 - selector values. 1.853 +<p> To determine the set of keyframes, all of the values in the selectors are sorted in increasing order 1.854 + by time. If there are any duplicates, then the last keyframe specified inside the <a class=css data-link-type=maybe href=#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule 1.855 + will be used to provide the keyframe information for that time. There is no cascading within a 1.856 + <a class=css data-link-type=maybe href=#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule if multiple keyframes specify the same keyframe selector values. 1.857 1.858 - <p> If a property is not specified for a keyframe, or is specified but 1.859 - invalid, the animation of that property proceeds as if that keyframe did 1.860 - not exist. Conceptually, it is as if a set of keyframes is constructed for 1.861 - each property that is present in any of the keyframes, and an animation is 1.862 - run independently for each property. 1.863 +<p> If a property is not specified for a keyframe, or is specified but invalid, the animation of that 1.864 + property proceeds as if that keyframe did not exist. Conceptually, it is as if a set of keyframes is 1.865 + constructed for each property that is present in any of the keyframes, and an animation is run 1.866 + independently for each property. 1.867 1.868 - <div class=example> 1.869 - <pre> 1.870 -@keyframes wobble { 1.871 + <div class=example> 1.872 + <pre>@keyframes wobble { 1.873 0% { 1.874 left: 100px; 1.875 } 1.876 @@ -604,48 +368,42 @@ 1.877 100% { 1.878 left: 100px; 1.879 } 1.880 -}</pre> 1.881 +} 1.882 +</pre> 1.883 +<p> Four keyframes are specified for the animation named "wobble". In the first keyframe, 1.884 + shown at the beginning of the animation cycle, the value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> property being 1.885 + animated is <span class=css data-link-type=maybe title=100px>100px</span>. By 40% of the animation duration, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> has animated to <span class=css data-link-type=maybe title=150px>150px</span>. 1.886 + At 60% of the animation duration, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> has animated back to <span class=css data-link-type=maybe title=75px>75px</span>. At the end of the 1.887 + animation cycle, the value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a> has returned to <span class=css data-link-type=maybe title=100px>100px</span>. The diagram below shows 1.888 + the state of the animation if it were given a duration of <span class=css data-link-type=maybe title=10s>10s</span>. 1.889 1.890 - <p> Four keyframes are specified for the animation named "wobble". In the 1.891 - first keyframe, shown at the beginning of the animation cycle, the value 1.892 - of the ‘<code class=property>left</code>’ property being animated is 1.893 - ‘<code class=css>100px</code>’. By 40% of the animation duration, 1.894 - ‘<code class=property>left</code>’ has animated to ‘<code 1.895 - class=css>150px</code>’. At 60% of the animation duration, ‘<code 1.896 - class=property>left</code>’ has animated back to ‘<code 1.897 - class=css>75px</code>’. At the end of the animation cycle, the value of 1.898 - ‘<code class=property>left</code>’ has returned to ‘<code 1.899 - class=css>100px</code>’. The diagram below shows the state of the 1.900 - animation if it were given a duration of ‘<code 1.901 - class=css>10s</code>’. 1.902 + </p><figure> 1.903 + <img alt="" src=./animation1.png> 1.904 + <figcaption>Animation states specified by keyframes</figcaption> 1.905 + </figure> 1.906 + </div> 1.907 1.908 - <div class=figure> <img alt="" src=animation1.png> 1.909 - <p class=caption> Animations states specified by keyframes 1.910 - </div> 1.911 - </div> 1.912 +<p> The following is the grammar for the keyframes rule: 1.913 1.914 - <p> The following is the grammar for the keyframes rule. 1.915 + <pre> keyframes_rule: KEYFRAMES_SYM S+ IDENT S* '{' S* keyframes_blocks '}' S*; 1.916 1.917 - <pre> 1.918 -keyframes_rule: KEYFRAMES_SYM S+ IDENT S* '{' S* keyframes_blocks '}' S*; 1.919 + keyframes_blocks: [ keyframe_selector '{' S* declaration? [ ';' S* declaration? ]* '}' S* ]* ; 1.920 1.921 -keyframes_blocks: [ keyframe_selector '{' S* declaration? [ ';' S* declaration? ]* '}' S* ]* ; 1.922 + keyframe_selector: [ FROM_SYM | TO_SYM | PERCENTAGE ] S* [ ',' S* [ FROM_SYM | TO_SYM | PERCENTAGE ] S* ]*; 1.923 1.924 -keyframe_selector: [ FROM_SYM | TO_SYM | PERCENTAGE ] S* [ ',' S* [ FROM_SYM | TO_SYM | PERCENTAGE ] S* ]*; 1.925 + @{K}{E}{Y}{F}{R}{A}{M}{E}{S} {return KEYFRAMES_SYM;} 1.926 + {F}{R}{O}{M} {return FROM_SYM;} 1.927 + {T}{O} {return TO_SYM;} 1.928 +</pre> 1.929 1.930 -@{K}{E}{Y}{F}{R}{A}{M}{E}{S} {return KEYFRAMES_SYM;} 1.931 -{F}{R}{O}{M} {return FROM_SYM;} 1.932 -{T}{O} {return TO_SYM;}</pre> 1.933 +<h3 class="heading settled heading" data-level=4.1 id=timing-funtions><span class=secno>4.1 </span><span class=content> 1.934 +Timing functions for keyframes</span><a class=self-link href=#timing-funtions></a></h3> 1.935 1.936 - <h3 id=timing-functions><span class=secno>4.1. </span> Timing functions for 1.937 - keyframes</h3> 1.938 +<p> A keyframe style rule may also declare the timing function that is to be used as the animation 1.939 + moves to the next keyframe. 1.940 1.941 - <p> A keyframe style rule may also declare the timing function that is to 1.942 - be used as the animation moves to the next keyframe. 1.943 - 1.944 - <div class=example> 1.945 - <pre> 1.946 -@keyframes bounce { 1.947 + <div class=example> 1.948 + <pre>@keyframes bounce { 1.949 1.950 from { 1.951 top: 100px; 1.952 @@ -671,1594 +429,816 @@ 1.953 top: 100px; 1.954 } 1.955 1.956 -}</pre> 1.957 +} 1.958 +</pre> 1.959 +<p> Five keyframes are specified for the animation named "bounce". Between the first and second 1.960 + keyframe (i.e., between 0% and 25%) an ease-out timing function is used. Between the second 1.961 + and third keyframe (i.e., between 25% and 50%) an ease-in timing function is used. And so on. 1.962 + The effect will appear as an element that moves up the page 50px, slowing down as it reaches 1.963 + its highest point then speeding up as it falls back to 100px. The second half of the animation 1.964 + behaves in a similar manner, but only moves the element 25px up the page. 1.965 + </div> 1.966 1.967 - <p> Five keyframes are specified for the animation named "bounce". Between 1.968 - the first and second keyframe (i.e., between 0% and 25%) an ‘<code 1.969 - class=css>ease-out</code>’ timing function is used. Between the second 1.970 - and third keyframe (i.e., between 25% and 50%) an ‘<code 1.971 - class=css>ease-in</code>’ timing function is used. And so on. The 1.972 - effect will appear as an element that moves up the page ‘<code 1.973 - class=css>50px</code>’, slowing down as it reaches its highest point 1.974 - then speeding up as it falls back to ‘<code class=css>100px</code>’. 1.975 - The second half of the animation behaves in a similar manner, but only 1.976 - moves the element ‘<code class=css>25px</code>’ up the page. 1.977 - </div> 1.978 +<p> A timing function specified on the <span class=css data-link-type=maybe title=to>to</span> or <span class=css data-link-type=maybe title=100%>100%</span> keyframe is ignored. 1.979 1.980 - <p> A timing function specified on the "to" or 100% keyframe is ignored. 1.981 +<p> See the <a class=property data-link-type=propdesc href=#propdef-animation-timing-function title=animation-timing-function>animation-timing-function</a> property for more information. 1.982 1.983 - <p> See the ‘<a href="#animation-timing-function"><code 1.984 - class=property>animation-timing-function</code></a>’ property for more 1.985 - information. 1.986 +<h3 class="heading settled heading" data-level=4.2 id=animation-name><span class=secno>4.2 </span><span class=content> 1.987 +The <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> property</span><a class=self-link href=#animation-name></a></h3> 1.988 1.989 - <h3 id=animation-name-property><span class=secno>4.2. </span> The ‘<a 1.990 - href="#animation-name"><code class=property>animation-name</code></a>’ 1.991 - Property</h3> 1.992 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation-name>animation-name<a class=self-link href=#propdef-animation-name></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-single-animation-name title="<single-animation-name>"><single-animation-name></a>#<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>none<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table> 1.993 +<p> <dfn class=css-code data-dfn-type=type data-export="" id=typedef-single-animation-name><single-animation-name><a class=self-link href=#typedef-single-animation-name></a></dfn> = none | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>"><custom-ident></a> 1.994 1.995 - <p> The ‘<a href="#animation-name"><code 1.996 - class=property>animation-name</code></a>’ property defines a list of 1.997 - animations that apply. Each name is used to select the keyframe at-rule 1.998 - that provides the property values for the animation. If the name does not 1.999 - match any keyframe at-rule, there are no properties to be animated and the 1.1000 - animation will not execute. Furthermore, if the animation name is ‘<code 1.1001 - class=css>none</code>’ then there will be no animation. This can be used 1.1002 - to override any animations coming from the cascade. If multiple animations 1.1003 - are attempting to modify the same property, then the animation closest to 1.1004 - the end of the list of names wins. 1.1005 +<p> The values of <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> have the following meanings: 1.1006 1.1007 - <p id=list-matching> Each animation listed by name should have a 1.1008 - corresponding value for the other <a 1.1009 - href="#animation-properties">animation properties</a> listed below. If the 1.1010 - lists of values for the other <a href="#animation-properties">animation 1.1011 - properties</a> do not have the same length, the length of the ‘<a 1.1012 - href="#animation-name"><code class=property>animation-name</code></a>’ 1.1013 - list determines the number of items in each list examined when starting 1.1014 - animations. The lists are matched up from the first value: excess values 1.1015 - at the end are not used. If one of the other properties doesn't have 1.1016 - enough comma-separated values to match the number of values of ‘<a 1.1017 - href="#animation-name"><code class=property>animation-name</code></a>’, 1.1018 - the UA must calculate its used value by repeating the list of values until 1.1019 - there are enough. This truncation or repetition does not affect the 1.1020 - computed value. <span class=note>Note: This is analogous to the behavior 1.1021 - of the ‘<code class=css>background-*</code>’properties, with ‘<code 1.1022 - class=property>background-image</code>’ analogous to ‘<a 1.1023 - href="#animation-name"><code 1.1024 - class=property>animation-name</code></a>’.</span> 1.1025 + <dl data-dfn-for=animation-name data-dfn-type=value> 1.1026 + <dt><dfn class=css-code data-dfn-for=animation-name data-dfn-type=value data-export="" id=valuedef-none0>none<a class=self-link href=#valuedef-none0></a></dfn> 1.1027 + <dd> 1.1028 + No keyframes are specified at all, so there will be no animation. 1.1029 + Any other animations properties specified for this animation have no effect. 1.1030 1.1031 - <table class=propdef> 1.1032 - <tbody> 1.1033 - <tr> 1.1034 - <th>Name: 1.1035 + <dt><dfn class=css-code data-dfn-for=animation-name data-dfn-type=value data-export="" id=valuedef-custom-ident><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>"><custom-ident></a><a class=self-link href=#valuedef-custom-ident></a></dfn> 1.1036 + <dd> 1.1037 + The animation will use the keyframes with the name specified by the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>"><custom-ident></a>, 1.1038 + if they exist. 1.1039 + If no such keyframes exist, 1.1040 + there is no animation. 1.1041 + </dl> 1.1042 1.1043 - <td><dfn id=animation-name>animation-name</dfn> 1.1044 +<h3 class="heading settled heading" data-level=4.3 id=animation-duration><span class=secno>4.3 </span><span class=content> 1.1045 +The <a class=property data-link-type=propdesc href=#propdef-animation-duration title=animation-duration>animation-duration</a> property</span><a class=self-link href=#animation-duration></a></h3> 1.1046 1.1047 - <tr> 1.1048 - <th><a href="#values">Value</a>: 1.1049 +<p> The <a class=property data-link-type=propdesc href=#propdef-animation-duration title=animation-duration>animation-duration</a> property defines duration of a single animation cycle. 1.1050 1.1051 - <td><a href="#single-animation-name"><single-animation-name></a> [ 1.1052 - ‘<code class=css>,</code>’ <a 1.1053 - href="#single-animation-name"><single-animation-name></a> ]* 1.1054 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation-duration>animation-duration<a class=self-link href=#propdef-animation-duration></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a>#<tr><th>Initial:<td>0s<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table> 1.1055 + <dl> 1.1056 + <dt><dfn class=css-code data-dfn-for=animation-duration data-dfn-type=value data-export="" id=valuedef-time0><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a><a class=self-link href=#valuedef-time0></a></dfn> 1.1057 + <dd> 1.1058 + The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a> specifies the length of time that an animation takes to complete one cycle. 1.1059 + A negative <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a> is invalid. 1.1060 1.1061 - <tr> 1.1062 - <th>Initial: 1.1063 +<p> If the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a> is <span class=css data-link-type=maybe title=0s>0s</span>, like the initial value, 1.1064 + the keyframes of the animation have no effect, 1.1065 + but the animation itself still occurs instantaneously. 1.1066 + That is, <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> applies as normal, 1.1067 + filling backwards or forwards as appropriate, 1.1068 + and animation events still fire. 1.1069 + </dl> 1.1070 1.1071 - <td>‘<code class=css>none</code>’ 1.1072 +<h3 class="heading settled heading" data-level=4.4 id=animation-timing-function><span class=secno>4.4 </span><span class=content> 1.1073 +The <a class=property data-link-type=propdesc href=#propdef-animation-timing-function title=animation-timing-function>animation-timing-function</a> property</span><a class=self-link href=#animation-timing-function></a></h3> 1.1074 1.1075 - <tr> 1.1076 - <th>Applies To: 1.1077 +<p> The <a class=property data-link-type=propdesc href=#propdef-animation-timing-function title=animation-timing-function>animation-timing-function</a> property describes how the animation will progress over 1.1078 + one cycle of its duration. See the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-transitions-1/#transition-timing-function title=transition-timing-function>transition-timing-function</a> property <a data-biblio-type=normative data-link-type=biblio href=#css3-transitions title=css3-transitions>[CSS3-TRANSITIONS]</a> 1.1079 + for a complete description of timing function calculation. 1.1080 1.1081 - <td>all elements, ::before and ::after pseudo-elements 1.1082 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation-timing-function>animation-timing-function<a class=self-link href=#propdef-animation-timing-function></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-single-timing-function title="<single-timing-function>"><single-timing-function></a>#<tr><th>Initial:<td>ease<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table> 1.1083 +<p> The values and meaning of <dfn class=css-code data-dfn-type=type data-export="" id=typedef-single-timing-function><single-timing-function><a class=self-link href=#typedef-single-timing-function></a></dfn> 1.1084 + are identical to those of <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-transitions-1/#single-transition-timing-function title="<single-transition-timing-function>"><single-transition-timing-function></a> <a data-biblio-type=normative data-link-type=biblio href=#css3-transitions title=css3-transitions>[CSS3-TRANSITIONS]</a>. 1.1085 1.1086 - <tr> 1.1087 - <th>Inherited: 1.1088 +<p> The timing function specified applies to each iteration of the animation, 1.1089 + not the entire animation in full. 1.1090 + For example, if an animation has <a class=css data-link-type=propdesc href=#propdef-animation-timing-function title=animation-timing-function>animation-timing-function: ease-in-out; animation-iteration-count: 2;</a>, 1.1091 + it will ease in at the start, 1.1092 + ease out as it approaches the end of its first iteration, 1.1093 + ease in at the start of its second iteration, 1.1094 + and ease out again as it approaches the end of the animation. 1.1095 1.1096 - <td>no 1.1097 +<p class=note> Note: Unlike other animation properties, 1.1098 + <a class=property data-link-type=propdesc href=#propdef-animation-timing-function title=animation-timing-function>animation-timing-function</a> has an effect when specified on an individual keyframe. 1.1099 + See <a href=#timing-functions section=""></a> for more detail on this. 1.1100 1.1101 - <tr> 1.1102 - <th>Animatable: 1.1103 +<h3 class="heading settled heading" data-level=4.5 id=animation-iteration-count><span class=secno>4.5 </span><span class=content> 1.1104 +The <a class=property data-link-type=propdesc href=#propdef-animation-iteration-count title=animation-iteration-count>animation-iteration-count</a> property</span><a class=self-link href=#animation-iteration-count></a></h3> 1.1105 1.1106 - <td>no 1.1107 +<p> The <a class=property data-link-type=propdesc href=#propdef-animation-iteration-count title=animation-iteration-count>animation-iteration-count</a> property specifies the number of times an animation cycle 1.1108 + is played. The initial value is <span class=css data-link-type=maybe title=1>1</span>, meaning the animation will play from beginning to end 1.1109 + once. This property is often used in conjunction with an 1.1110 + <a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a> value of <a class=css data-link-type=maybe href=#valuedef-alternate title=alternate>alternate</a>, which will cause the animation to play in 1.1111 + reverse on alternate cycles. 1.1112 1.1113 - <tr> 1.1114 - <th>Percentages: 1.1115 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation-iteration-count>animation-iteration-count<a class=self-link href=#propdef-animation-iteration-count></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-single-animation-iteration-count title="<single-animation-iteration-count>"><single-animation-iteration-count></a>#<tr><th>Initial:<td>1<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table> 1.1116 +<p> <dfn class=css-code data-dfn-type=type data-export="" id=typedef-single-animation-iteration-count><single-animation-iteration-count><a class=self-link href=#typedef-single-animation-iteration-count></a></dfn> = infinite | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>"><number></a> 1.1117 1.1118 - <td>N/A 1.1119 + <dl data-dfn-for=animation-iteration-count data-dfn-type=value> 1.1120 + <dt><dfn class=css-code data-dfn-for=animation-iteration-count data-dfn-type=value data-export="" id=valuedef-infinite>infinite<a class=self-link href=#valuedef-infinite></a></dfn> 1.1121 + <dd> 1.1122 + The animation will repeat forever. 1.1123 1.1124 - <tr> 1.1125 - <th>Media: 1.1126 + <dt><dfn class=css-code data-dfn-for=animation-iteration-count data-dfn-type=value data-export="" id=valuedef-number><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>"><number></a><a class=self-link href=#valuedef-number></a></dfn> 1.1127 + <dd> 1.1128 + The animation will repeat the specified number of times. 1.1129 + If the number is not an integer, 1.1130 + the animation will end partway through its last cycle. 1.1131 + Negative numbers are invalid. 1.1132 1.1133 - <td>visual 1.1134 +<p> A value of <span class=css data-link-type=maybe title=0>0</span> is valid and, 1.1135 + similar to an <a class=property data-link-type=propdesc href=#propdef-animation-duration title=animation-duration>animation-duration</a> of <span class=css data-link-type=maybe title=0s>0s</span>, 1.1136 + causes the animation to occur instantaneously. 1.1137 + </dl> 1.1138 1.1139 - <tr> 1.1140 - <th>Computed Value: 1.1141 1.1142 - <td>As specified 1.1143 +<h3 class="heading settled heading" data-level=4.6 id=animation-direction><span class=secno>4.6 </span><span class=content> 1.1144 +The <a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a> property</span><a class=self-link href=#animation-direction></a></h3> 1.1145 1.1146 - <tr> 1.1147 - <th>Canonical Order: 1.1148 +<p> The <a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a> property defines whether or not the animation should play in reverse 1.1149 + on some or all cycles. When an animation is played in reverse the timing functions are also 1.1150 + reversed. For example, when played in reverse an <span class=css data-link-type=maybe title=ease-in>ease-in</span> animation would appear to be an 1.1151 + <span class=css data-link-type=maybe title=ease-out>ease-out</span> animation. 1.1152 1.1153 - <td><abbr title="follows order of property value definition">per 1.1154 - grammar</abbr> 1.1155 - </table> 1.1156 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation-direction>animation-direction<a class=self-link href=#propdef-animation-direction></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-single-animation-direction title="<single-animation-direction>"><single-animation-direction></a>#<tr><th>Initial:<td>normal<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table> 1.1157 +<p> <dfn class=css-code data-dfn-type=type data-export="" id=typedef-single-animation-direction><single-animation-direction><a class=self-link href=#typedef-single-animation-direction></a></dfn> = normal | reverse | alternate | alternate-reverse 1.1158 1.1159 - <div class=prod> <dfn 1.1160 - id=single-animation-name><single-animation-name></dfn> = none | 1.1161 - <IDENT></div> 1.1162 - <!-- 1.1163 - <p> 1.1164 - 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. 1.1165 - 1.1166 - <div class="example"> 1.1167 - <p style="display:none"> 1.1168 - Example(s): 1.1169 - 1.1170 - <pre> 1.1171 - @keyframes 'border-bloat' { 1.1172 - from { 1.1173 - border-width: 0; 1.1174 - } 1.1175 - to { 1.1176 - border-width: 10px; 1.1177 - } 1.1178 - } 1.1179 + <dl data-dfn-for=animation-direction data-dfn-type=value> 1.1180 + <dt><dfn class=css-code data-dfn-for=animation-direction data-dfn-type=value data-export="" id=valuedef-normal>normal<a class=self-link href=#valuedef-normal></a></dfn> 1.1181 + <dd> 1.1182 + All iterations of the animation are played as specified. 1.1183 1.1184 - @keyframes 'border-diet' { 1.1185 - from { 1.1186 - border-width: 4px; 1.1187 - } 1.1188 - to { 1.1189 - border-width: 2px; 1.1190 - } 1.1191 - } 1.1192 + <dt><dfn class=css-code data-dfn-for=animation-direction data-dfn-type=value data-export="" id=valuedef-reverse>reverse<a class=self-link href=#valuedef-reverse></a></dfn> 1.1193 + <dd> 1.1194 + All iterations of the animation are played in the reverse direction 1.1195 + from the way they were specified. 1.1196 1.1197 - div { 1.1198 - animation-name: 'border-bloat', 'border-diet'; 1.1199 - animation-duration: 10s, 4s; 1.1200 - } 1.1201 - </pre> 1.1202 - <p> 1.1203 - The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 1.1204 - resulting value for the property will be the addition of the values from the 1.1205 - two animations. 1.1206 - 1.1207 - <p> 1.1208 - At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 1.1209 - At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 1.1210 - At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 1.1211 - 'border-diet' as it is no longer executing). 1.1212 - 1.1213 - </div> 1.1214 - --> 1.1215 + <dt><dfn class=css-code data-dfn-for=animation-direction data-dfn-type=value data-export="" id=valuedef-alternate>alternate<a class=self-link href=#valuedef-alternate></a></dfn> 1.1216 + <dd> 1.1217 + The animation cycle iterations that are odd counts are played in the 1.1218 + normal direction, and the animation cycle iterations that are even 1.1219 + counts are played in a reverse direction. 1.1220 1.1221 - <h3 id=animation-duration-property><span class=secno>4.3. </span> The ‘<a 1.1222 - href="#animation-duration"><code 1.1223 - class=property>animation-duration</code></a>’ Property</h3> 1.1224 + <dt><dfn class=css-code data-dfn-for=animation-direction data-dfn-type=value data-export="" id=valuedef-alternate-reverse>alternate-reverse<a class=self-link href=#valuedef-alternate-reverse></a></dfn> 1.1225 + <dd> 1.1226 + The animation cycle iterations that are odd counts are played in the 1.1227 + reverse direction, and the animation cycle iterations that are even 1.1228 + counts are played in a normal direction. 1.1229 + </dl> 1.1230 1.1231 - <p> The ‘<a href="#animation-duration"><code 1.1232 - class=property>animation-duration</code></a>’ property defines the 1.1233 - length of time that an animation takes to complete one cycle. 1.1234 +<p class=note> Note: For the purpose of determining whether an iteration is even or odd, 1.1235 + iterations start counting from 1. 1.1236 1.1237 - <table class=propdef> 1.1238 - <tbody> 1.1239 - <tr> 1.1240 - <th>Name: 1.1241 1.1242 - <td><dfn id=animation-duration>animation-duration</dfn> 1.1243 +<h3 class="heading settled heading" data-level=4.7 id=animation-play-state><span class=secno>4.7 </span><span class=content> 1.1244 +The <a class=property data-link-type=propdesc href=#propdef-animation-play-state title=animation-play-state>animation-play-state</a> property</span><a class=self-link href=#animation-play-state></a></h3> 1.1245 1.1246 - <tr> 1.1247 - <th><a href="#values">Value</a>: 1.1248 +<p> The <a class=property data-link-type=propdesc href=#propdef-animation-play-state title=animation-play-state>animation-play-state</a> property defines whether the animation is running or paused. 1.1249 1.1250 - <td> <span><time></span> [, <span><time></span>]* 1.1251 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation-play-state>animation-play-state<a class=self-link href=#propdef-animation-play-state></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-single-animation-play-state title="<single-animation-play-state>"><single-animation-play-state></a>#<tr><th>Initial:<td>running<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table> 1.1252 +<p> <dfn class=css-code data-dfn-type=type data-export="" id=typedef-single-animation-play-state><single-animation-play-state><a class=self-link href=#typedef-single-animation-play-state></a></dfn> = running | paused 1.1253 1.1254 - <tr> 1.1255 - <th>Initial: 1.1256 + <dl data-dfn-for=animation-play-state data-dfn-type=value> 1.1257 + <dt><dfn class=css-code data-dfn-for=animation-play-state data-dfn-type=value data-export="" id=valuedef-running>running<a class=self-link href=#valuedef-running></a></dfn> 1.1258 + <dd> 1.1259 + While this property is set to <a class=css data-link-type=maybe href=#valuedef-running title=running>running</a>, 1.1260 + the animation proceeds as normal. 1.1261 1.1262 - <td>‘<code class=css>0s</code>’ 1.1263 + <dt><dfn class=css-code data-dfn-for=animation-play-state data-dfn-type=value data-export="" id=valuedef-paused>paused<a class=self-link href=#valuedef-paused></a></dfn> 1.1264 + <dd> 1.1265 + While this property is set to <a class=css data-link-type=maybe href=#valuedef-paused title=paused>paused</a>, 1.1266 + the animation is paused. 1.1267 + The animation continues to apply to the element with the progress it had made before being paused. 1.1268 + When unpaused (set back to <a class=css data-link-type=maybe href=#valuedef-running title=running>running</a>), 1.1269 + it restarts from where it left off, 1.1270 + as if the "clock" that controls the animation had stopped and started again. 1.1271 + </dl> 1.1272 1.1273 - <tr> 1.1274 - <th>Applies To: 1.1275 +<h3 class="heading settled heading" data-level=4.8 id=animation-delay><span class=secno>4.8 </span><span class=content> 1.1276 +The <a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a> property</span><a class=self-link href=#animation-delay></a></h3> 1.1277 1.1278 - <td>all elements, ::before and ::after pseudo-elements 1.1279 +<p> The <a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a> property defines when the animation will start. It allows an animation 1.1280 + to begin execution some time after it is applied, 1.1281 + or to appear to have begun execution some time <em>before</em> it is applied. 1.1282 1.1283 - <tr> 1.1284 - <th>Inherited: 1.1285 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation-delay>animation-delay<a class=self-link href=#propdef-animation-delay></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a>#<tr><th>Initial:<td>0s<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table> 1.1286 + <dl> 1.1287 + <dt><dfn class=css-code data-dfn-for=animation-delay data-dfn-type=value data-export="" id=valuedef-time><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a><a class=self-link href=#valuedef-time></a></dfn> 1.1288 + <dd> 1.1289 + The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a> defines how long of a delay there is between the start of the animation 1.1290 + (when the animation is applied to the element via these properties) 1.1291 + and when it begins executing. 1.1292 + A delay of <span class=css data-link-type=maybe title=0s>0s</span> (the initial value) means that the animation will execute as soon as it is applied. 1.1293 1.1294 - <td>no 1.1295 +<p> A negative delay is <strong>valid</strong>. 1.1296 + Similar to a delay of <span class=css data-link-type=maybe title=0s>0s</span>, it means that the animation executes immediately, 1.1297 + but is automatically progressed by the absolute value of the delay, 1.1298 + as if the animation had started the specified time in the past, 1.1299 + and so it appears to start partway through its play-cycle already. 1.1300 + If an animation’s keyframes have an implied starting value, 1.1301 + the values are taken from the time the animation starts, 1.1302 + not some time in the past. 1.1303 + </dl> 1.1304 1.1305 - <tr> 1.1306 - <th>Animatable: 1.1307 +<h3 class="heading settled heading" data-level=4.9 id=animation-fill-mode><span class=secno>4.9 </span><span class=content> 1.1308 +The <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> property</span><a class=self-link href=#animation-fill-mode></a></h3> 1.1309 1.1310 - <td>no 1.1311 +<p> The <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> property defines what values are applied by the animation 1.1312 + outside the time it is executing. By default, an animation will not affect property 1.1313 + values between the time it is applied (the ‘animation-name’ property is set on an 1.1314 + element) and the time it begins execution (which is determined by the <a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a> 1.1315 + property). Also, by default an animation does not affect property values after the 1.1316 + animation ends (determined by the <a class=property data-link-type=propdesc href=#propdef-animation-duration title=animation-duration>animation-duration</a> and <a class=property data-link-type=propdesc href=#propdef-animation-iteration-count title=animation-iteration-count>animation-iteration-count</a> properties). 1.1317 + The 'animation-fill-mode’property can override this behavior. 1.1318 1.1319 - <tr> 1.1320 - <th>Percentages: 1.1321 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation-fill-mode>animation-fill-mode<a class=self-link href=#propdef-animation-fill-mode></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-single-animation-fill-mode title="<single-animation-fill-mode>"><single-animation-fill-mode></a>#<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table> 1.1322 +<p> <dfn class=css-code data-dfn-type=type data-export="" id=typedef-single-animation-fill-mode><single-animation-fill-mode><a class=self-link href=#typedef-single-animation-fill-mode></a></dfn> = none | forwards | backwards | both 1.1323 1.1324 - <td>N/A 1.1325 + <dl data-dfn-for=animation-fill-mode data-dfn-type=value> 1.1326 + <dt><dfn class=css-code data-dfn-for=animation-fill-mode data-dfn-type=value data-export="" id=valuedef-none>none<a class=self-link href=#valuedef-none></a></dfn> 1.1327 + <dd> 1.1328 + The animation has no effect when it is applied but not executing. 1.1329 1.1330 - <tr> 1.1331 - <th>Media: 1.1332 + <dt><dfn class=css-code data-dfn-for=animation-fill-mode data-dfn-type=value data-export="" id=valuedef-forwards>forwards<a class=self-link href=#valuedef-forwards></a></dfn> 1.1333 + <dd> 1.1334 + After the animation is done executing 1.1335 + (has played the number of times specified by its <a class=property data-link-type=propdesc href=#propdef-animation-iteration-count title=animation-iteration-count>animation-iteration-count</a> value) 1.1336 + it continues to apply the values that it ended its last complete iteration with. 1.1337 + This will be the values specified or implied for either its <span class=css data-link-type=maybe title=100%>100%</span> or <span class=css data-link-type=maybe title=0%>0%</span> keyframe, 1.1338 + depending on the direction that the last complete iteration was executing in 1.1339 + (per <a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a>). 1.1340 + If the animation didn’t complete an entire iteration 1.1341 + (if the iteration count was <span class=css data-link-type=maybe title=0>0</span> or a value less than 1) 1.1342 + the values specified or implied for its <span class=css data-link-type=maybe title=0%>0%</span> keyframe are used. 1.1343 1.1344 - <td>visual 1.1345 +<p class=note> Note: If <a class=property data-link-type=propdesc href=#propdef-animation-iteration-count title=animation-iteration-count>animation-iteration-count</a> is a non-integer value, 1.1346 + the animation will stop executing partway through its animation cycle, 1.1347 + but a forwards fill will still apply the values of the <span class=css data-link-type=maybe title=100%>100%</span> keyframe, 1.1348 + not whatever values were being applied at the time the animation stopped executing. 1.1349 1.1350 - <tr> 1.1351 - <th>Computed Value: 1.1352 +<p> Issue: Why does it ignore the progress made by a non-integer iteration count? 1.1353 1.1354 - <td>as specified 1.1355 +<p> Issue: What happens with <a class=css data-link-type=propdesc href=#propdef-animation-duration title=animation-duration>animation-duration: 0; animation-iteration-count: infinite;</a>? 1.1356 + The animation is instantaneous, 1.1357 + but there is no "last complete iteration". 1.1358 + In particular, you can’t tell whether to use the 0% or 100% keyframe. 1.1359 1.1360 - <tr> 1.1361 - <th>Canonical Order: 1.1362 + <dt><dfn class=css-code data-dfn-for=animation-fill-mode data-dfn-type=value data-export="" id=valuedef-backwards>backwards<a class=self-link href=#valuedef-backwards></a></dfn> 1.1363 + <dd> 1.1364 + Before the animation has begun executing 1.1365 + (during the period specified by <a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a>), 1.1366 + the animation applies the values that it will start the first iteration with. 1.1367 + If the <a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a> is <a class=css data-link-type=maybe href=#valuedef-normal title=normal>normal</a> or <a class=css data-link-type=maybe href=#valuedef-alternate title=alternate>alternate</a>, 1.1368 + the values specified or implied for its <span class=css data-link-type=maybe title=0%>0%</span> keyframe are used; 1.1369 + if the <a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a> is <a class=css data-link-type=maybe href=#valuedef-reverse title=reverse>reverse</a> or <a class=css data-link-type=maybe href=#valuedef-alternate-reverse title=alternate-reverse>alternate-reverse</a>, 1.1370 + the values specified or implied for its <span class=css data-link-type=maybe title=100%>100%</span> keyframe are used. 1.1371 1.1372 - <td><abbr title="follows order of property value definition">per 1.1373 - grammar</abbr> 1.1374 - </table> 1.1375 + <dt><dfn class=css-code data-dfn-for=animation-fill-mode data-dfn-type=value data-export="" id=valuedef-both>both<a class=self-link href=#valuedef-both></a></dfn> 1.1376 + <dd> 1.1377 + The effects of both <a class=css data-link-type=maybe href=#valuedef-forwards title=forwards>forwards</a> and <a class=css data-link-type=maybe href=#valuedef-backwards title=backwards>backwards</a> fill apply. 1.1378 + </dl> 1.1379 1.1380 - <p> The initial value is ‘<code class=css>0s</code>’, meaning that the 1.1381 - animation takes no time. When the duration is ‘<code 1.1382 - class=css>0s</code>’ ‘<a href="#animation-fill-mode"><code 1.1383 - class=property>animation-fill-mode</code></a>’ still applies, so an 1.1384 - animation that fills backwards will show the value of the 0% keyframe 1.1385 - during any delay period, and an animation that fills forwards will retain 1.1386 - the value specified at the 100% keyframe, even if the animation was 1.1387 - instantaneous. Also, animation events are still fired. A negative ‘<a 1.1388 - href="#animation-duration"><code 1.1389 - class=property>animation-duration</code></a>’ value renders the 1.1390 - declaration invalid. 1.1391 +<h3 class="heading settled heading" data-level=4.10 id=animation><span class=secno>4.10 </span><span class=content> 1.1392 +The <a class=property data-link-type=propdesc href=#propdef-animation title=animation>animation</a> shorthand property</span><a class=self-link href=#animation></a></h3> 1.1393 1.1394 - <h3 id=animation-timing-function-property><span class=secno>4.4. </span> 1.1395 - The ‘<a href="#animation-timing-function"><code 1.1396 - class=property>animation-timing-function</code></a>’ Property</h3> 1.1397 +<p> The <a class=property data-link-type=propdesc href=#propdef-animation title=animation>animation</a> shorthand property is a comma-separated list of animation definitions. Each item in 1.1398 + the list gives one item of the value for all of the subproperties of the shorthand, which are known 1.1399 + as the animation properties. (See the definition of <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> for what happens when these 1.1400 + properties have lists of different lengths, a problem that cannot occur when they are defined using 1.1401 + only the <a class=property data-link-type=propdesc href=#propdef-animation title=animation>animation</a> shorthand.) 1.1402 1.1403 - <p> The ‘<a href="#animation-timing-function"><code 1.1404 - class=property>animation-timing-function</code></a>’ property describes 1.1405 - how the animation will progress over one cycle of its duration. See the 1.1406 - ‘<code class=property>transition-timing-function</code>’ property <a 1.1407 - href="#ref-CSS3-TRANSITIONS">[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a> 1.1408 - for a complete description of timing function calculation. 1.1409 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation>animation<a class=self-link href=#propdef-animation></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-single-animation title="<single-animation>"><single-animation></a>#<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table> 1.1410 +<p> <dfn class=css-code data-dfn-type=type data-export="" id=typedef-single-animation><single-animation><a class=self-link href=#typedef-single-animation></a></dfn> = <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a> || <a class="production css-code" data-link-type=type href=#typedef-single-timing-function title="<single-timing-function>"><single-timing-function></a> || <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a> || <a class="production css-code" data-link-type=type href=#typedef-single-animation-iteration-count title="<single-animation-iteration-count>"><single-animation-iteration-count></a> || <a class="production css-code" data-link-type=type href=#typedef-single-animation-direction title="<single-animation-direction>"><single-animation-direction></a> || <a class="production css-code" data-link-type=type href=#typedef-single-animation-fill-mode title="<single-animation-fill-mode>"><single-animation-fill-mode></a> || <a class="production css-code" data-link-type=type href=#typedef-single-animation-play-state title="<single-animation-play-state>"><single-animation-play-state></a> || <a class="production css-code" data-link-type=type href=#typedef-single-animation-name title="<single-animation-name>"><single-animation-name></a> 1.1411 1.1412 - <table class=propdef> 1.1413 - <tbody> 1.1414 - <tr> 1.1415 - <th>Name: 1.1416 +<p> Note that order is important within each animation definition: the first value in each 1.1417 + <a class="production css-code" data-link-type=type href=#typedef-single-animation title="<single-animation>"><single-animation></a> that can be parsed as a <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a> is assigned to the <a class=property data-link-type=propdesc href=#propdef-animation-duration title=animation-duration>animation-duration</a>, 1.1418 + and the second value in each <a class="production css-code" data-link-type=type href=#typedef-single-animation title="<single-animation>"><single-animation></a> that can be parsed as a <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>"><time></a> is assigned to 1.1419 + <a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a>. 1.1420 1.1421 - <td><dfn id=animation-timing-function>animation-timing-function</dfn> 1.1422 +<p> Note that order is also important within each animation definition for distinguishing 1.1423 + <a class="production css-code" data-link-type=type href=#typedef-single-animation-name title="<single-animation-name>"><single-animation-name></a> values from other keywords. When parsing, keywords that are valid for 1.1424 + properties other than <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> must be accepted for those properties rather than for 1.1425 + <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a>. Furthermore, when serializing, default values of other properties must be 1.1426 + output in at least the cases necessary to distinguish an <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> that could 1.1427 + be a value of another property, and may be output in additional cases. 1.1428 1.1429 - <tr> 1.1430 - <th><a href="#values">Value</a>: 1.1431 + <div class=example> 1.1432 + For example, a value parsed from <a class=css data-link-type=propdesc href=#propdef-animation title=animation>animation: 3s none backwards</a> 1.1433 + (where <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> is <a class=css data-link-for=animation-fill-mode data-link-type=maybe href=#valuedef-none title=none>none</a> 1.1434 + and <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> is <span class=css data-link-for=animation-name data-link-type=maybe title=backwards>backwards</span>) 1.1435 + must not be serialized as <a class=css data-link-type=propdesc href=#propdef-animation title=animation>animation: 3s backwards</a> 1.1436 + (where <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> is <a class=css data-link-for=animation-fill-mode data-link-type=maybe href=#valuedef-backwards title=backwards>backwards</a> 1.1437 + and <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> is <a class=css data-link-for=animation-name data-link-type=maybe href=#valuedef-none0 title=none>none</a>). 1.1438 + </div> 1.1439 1.1440 - <td><span><single-timing-function></span> [ ‘<code 1.1441 - class=css>,</code>’ <span><single-timing-function></span> ]* 1.1442 +<h2 class="heading settled heading" data-level=5 id=events><span class=secno>5 </span><span class=content> 1.1443 +Animation Events</span><a class=self-link href=#events></a></h2> 1.1444 1.1445 - <tr> 1.1446 - <th>Initial: 1.1447 +<p> Several animation-related events are available through the DOM Event system. The start and 1.1448 + end of an animation, and the end of each iteration of an animation, all generate DOM events. 1.1449 + An element can have multiple properties being animated simultaneously. This can occur either 1.1450 + with a single <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> value with keyframes containing multiple properties, or with 1.1451 + multiple <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> values. For the purposes of events, each <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> specifies 1.1452 + a single animation. Therefore an event will be generated for each <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> value and 1.1453 + not necessarily for each property being animated. 1.1454 1.1455 - <td>‘<code class=css>ease</code>’ 1.1456 +<p> Any animation for which both a valid keyframe rule and a non-zero duration are defined will run 1.1457 + and generate events; this includes animations with empty keyframe rules. 1.1458 1.1459 - <tr> 1.1460 - <th>Applies To: 1.1461 +<p> Issue: This contradicts the <a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a> section, 1.1462 + which says that a <span class=css data-link-type=maybe title=0s>0s</span> duration animation still fires events. 1.1463 1.1464 - <td>all elements, ::before and ::after pseudo-elements 1.1465 +<p> The time the animation has been running is sent with each event generated. This allows the event 1.1466 + handler to determine the current iteration of a looping animation or the current position of an 1.1467 + alternating animation. This time does not include any time the animation was in the <a class=css data-link-type=maybe href=#valuedef-paused title=paused>paused</a> 1.1468 + play state. 1.1469 1.1470 - <tr> 1.1471 - <th>Inherited: 1.1472 +<h3 class="heading settled heading" data-level=5.1 id=interface-animationevent><span class=secno>5.1 </span><span class=content> 1.1473 +The <code>AnimationEvent</code> Interface</span><a class=self-link href=#interface-animationevent></a></h3> 1.1474 1.1475 - <td>no 1.1476 +<p> The <dfn data-dfn-type=dfn data-noexport="" id=animationevent>AnimationEvent<a class=self-link href=#animationevent></a></dfn> interface provides specific contextual information associated with 1.1477 + Animation events. 1.1478 1.1479 - <tr> 1.1480 - <th>Animatable: 1.1481 +<h4 class="heading settled heading" data-level=5.1.1 id=interface-animationevent-idl><span class=secno>5.1.1 </span><span class=content> 1.1482 +IDL Definition</span><a class=self-link href=#interface-animationevent-idl></a></h4> 1.1483 1.1484 - <td>no 1.1485 + <pre class=idl>[Constructor(DOMString <dfn class=idl-code data-dfn-for=AnimationEvent/AnimationEvent() data-dfn-type=argument data-export="" data-global-name="AnimationEvent<interface>/AnimationEvent()<method>/type<argument>" id=dom-animationeventanimationevent-type>type<a class=self-link href=#dom-animationeventanimationevent-type></a></dfn>, optional <a data-link-type=idl href=#dictdef-animationeventinit title=animationeventinit>AnimationEventInit</a> <dfn class=idl-code data-dfn-for=AnimationEvent/AnimationEvent() data-dfn-type=argument data-export="" data-global-name="AnimationEvent<interface>/AnimationEvent()<method>/animationeventinitdict<argument>" id=dom-animationeventanimationevent-animationeventinitdict>animationEventInitDict<a class=self-link href=#dom-animationeventanimationevent-animationeventinitdict></a></dfn>)] 1.1486 + interface <dfn class=idl-code data-dfn-type=interface data-export="" data-global-name="" id=dom-animationevent>AnimationEvent<a class=self-link href=#dom-animationevent></a></dfn> : <a data-link-type=idl href=http://www.w3.org/html/wg/drafts/html/CR/obsolete.html#dom-script-event title=event>Event</a> { 1.1487 + readonly attribute DOMString <dfn class=idl-code data-dfn-for=AnimationEvent data-dfn-type=attribute data-export="" data-global-name="AnimationEvent<interface>/animationname<attribute>" id=dom-animationevent-animationname0>animationName<a class=self-link href=#dom-animationevent-animationname0></a></dfn>; 1.1488 + readonly attribute float <dfn class=idl-code data-dfn-for=AnimationEvent data-dfn-type=attribute data-export="" data-global-name="AnimationEvent<interface>/elapsedtime<attribute>" id=dom-animationevent-elapsedtime0>elapsedTime<a class=self-link href=#dom-animationevent-elapsedtime0></a></dfn>; 1.1489 + readonly attribute DOMString <dfn class=idl-code data-dfn-for=AnimationEvent data-dfn-type=attribute data-export="" data-global-name="AnimationEvent<interface>/pseudoelement<attribute>" id=dom-animationevent-pseudoelement0>pseudoElement<a class=self-link href=#dom-animationevent-pseudoelement0></a></dfn>; 1.1490 + }; 1.1491 + dictionary <dfn class=idl-code data-dfn-type=dictionary data-export="" data-global-name="" id=dictdef-animationeventinit>AnimationEventInit<a class=self-link href=#dictdef-animationeventinit></a></dfn> : <a data-link-type=idl title=eventinit>EventInit</a> { 1.1492 + DOMString <dfn class=idl-code data-dfn-for=AnimationEventInit data-dfn-type=dict-member data-export="" data-global-name="AnimationEventInit<dictionary>/animationname<dict-member>" id=dom-animationeventinit-animationname>animationName<a class=self-link href=#dom-animationeventinit-animationname></a></dfn> = ""; 1.1493 + float <dfn class=idl-code data-dfn-for=AnimationEventInit data-dfn-type=dict-member data-export="" data-global-name="AnimationEventInit<dictionary>/elapsedtime<dict-member>" id=dom-animationeventinit-elapsedtime>elapsedTime<a class=self-link href=#dom-animationeventinit-elapsedtime></a></dfn> = 0.0; 1.1494 + DOMString <dfn class=idl-code data-dfn-for=AnimationEventInit data-dfn-type=dict-member data-export="" data-global-name="AnimationEventInit<dictionary>/pseudoelement<dict-member>" id=dom-animationeventinit-pseudoelement>pseudoElement<a class=self-link href=#dom-animationeventinit-pseudoelement></a></dfn> = ""; 1.1495 + }; 1.1496 +</pre> 1.1497 +<h4 class="heading settled heading" data-level=5.1.2 id=interface-animationevent-attributes><span class=secno>5.1.2 </span><span class=content> 1.1498 +Attributes</span><a class=self-link href=#interface-animationevent-attributes></a></h4> 1.1499 1.1500 - <tr> 1.1501 - <th>Percentages: 1.1502 + <dl data-dfn-for=animationevent data-dfn-type=attribute> 1.1503 + <dt><dfn class=idl-code data-dfn-for=animationevent data-dfn-type=attribute data-export="" id=dom-animationevent-animationname>animationName<a class=self-link href=#dom-animationevent-animationname></a></dfn>, of type <a class=idl-code data-link-type=interface title=domstring>DOMString</a>, readonly 1.1504 + <dd> 1.1505 + The value of the <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> property of the animation that fired the event. 1.1506 + <dt><dfn class=idl-code data-dfn-for=animationevent data-dfn-type=attribute data-export="" id=dom-animationevent-elapsedtime>elapsedTime<a class=self-link href=#dom-animationevent-elapsedtime></a></dfn>, of type float, readonly 1.1507 + <dd> 1.1508 + The amount of time the animation has been running, in seconds, when this event fired, 1.1509 + excluding any time the animation was paused. For an <span class=css data-link-type=maybe title=animationstart>animationstart</span> event, the 1.1510 + elapsedTime is zero unless there was a negative value for <a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a>, in which 1.1511 + case the event will be fired with an elapsedTime of (-1 * delay). 1.1512 + <dt><dfn class=idl-code data-dfn-for=animationevent data-dfn-type=attribute data-export="" id=dom-animationevent-pseudoelement>pseudoElement<a class=self-link href=#dom-animationevent-pseudoelement></a></dfn>, of type <a class=idl-code data-link-type=interface title=domstring>DOMString</a>, readonly 1.1513 + <dd> 1.1514 + The name (beginning with two colons) of the CSS pseudo-element on which the animation 1.1515 + runs (in which case the target of the event is that pseudo-element’s corresponding 1.1516 + element), or the empty string if the animation runs on an element (which means the 1.1517 + target of the event is that element). 1.1518 + </dl> 1.1519 1.1520 - <td>N/A 1.1521 +<p> <dfn class=css-code data-dfn-type=function data-export="" id=funcdef-animationevent title=animationevent()>AnimationEvent(type, animationEventInitDict)<a class=self-link href=#funcdef-animationevent></a></dfn> is an <a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#constructing-events>event constructor</a>. 1.1522 1.1523 - <tr> 1.1524 - <th>Media: 1.1525 +<h3 class="heading settled heading" data-level=5.2 id=event-animationevent><span class=secno>5.2 </span><span class=content> 1.1526 +Types of <code>AnimationEvent</code></span><a class=self-link href=#event-animationevent></a></h3> 1.1527 1.1528 - <td>visual 1.1529 +<p> The different types of animation events that can occur are: 1.1530 1.1531 - <tr> 1.1532 - <th>Computed Value: 1.1533 + <dl data-dfn-for=animationevent data-dfn-type=event> 1.1534 + <dt><dfn class=idl-code data-dfn-for=animationevent data-dfn-type=event data-export="" id=dom-animationevent-animationstart>animationstart<a class=self-link href=#dom-animationevent-animationstart></a></dfn> 1.1535 + <dd> 1.1536 + The <a data-link-type=idl href=#dom-animationevent-animationstart title=animationstart>animationstart</a> event occurs at the start of the animation. If there is an 1.1537 + <a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a> then this event will fire once the delay period has expired. 1.1538 + A negative delay will cause the event to fire with an elapsedTime equal to the 1.1539 + absolute value of the delay. 1.1540 + <ul> 1.1541 + <li>Bubbles: Yes</li> 1.1542 + <li>Cancelable: No</li> 1.1543 + <li>Context Info: animationName, pseudoElement</li> 1.1544 + </ul> 1.1545 1.1546 - <td>as specified 1.1547 + <dt><dfn class=idl-code data-dfn-for=animationevent data-dfn-type=event data-export="" id=dom-animationevent-animationend>animationend<a class=self-link href=#dom-animationevent-animationend></a></dfn> 1.1548 + <dd> 1.1549 + The <a data-link-type=idl href=#dom-animationevent-animationend title=animationend>animationend</a> event occurs when the animation finishes. 1.1550 + <ul> 1.1551 + <li>Bubbles: Yes</li> 1.1552 + <li>Cancelable: No</li> 1.1553 + <li>Context Info: animationName, elapsedTime, pseudoElement</li> 1.1554 + </ul> 1.1555 1.1556 - <tr> 1.1557 - <th>Canonical Order: 1.1558 + <dt><dfn class=idl-code data-dfn-for=animationevent data-dfn-type=event data-export="" id=dom-animationevent-animationiteration>animationiteration<a class=self-link href=#dom-animationevent-animationiteration></a></dfn> 1.1559 + <dd> 1.1560 + The <a data-link-type=idl href=#dom-animationevent-animationiteration title=animationiteration>animationiteration</a> event occurs at the end of each iteration of an 1.1561 + animation, except when an animationend event would fire at the same time. 1.1562 + This means that this event does not occur for animations with an iteration 1.1563 + count of one or less. 1.1564 + <ul> 1.1565 + <li>Bubbles: Yes</li> 1.1566 + <li>Cancelable: No</li> 1.1567 + <li>Context Info: animationName, elapsedTime, pseudoElement</li> 1.1568 + </ul> 1.1569 + </dl> 1.1570 1.1571 - <td><abbr title="follows order of property value definition">per 1.1572 - grammar</abbr> 1.1573 - </table> 1.1574 +<h2 class="heading settled heading" data-level=6 id=interface-dom><span class=secno>6 </span><span class=content> 1.1575 +DOM Interfaces</span><a class=self-link href=#interface-dom></a></h2> 1.1576 1.1577 - <p>All the valid values of ‘<code 1.1578 - class=css><single-timing-function></code>’ are defined by the 1.1579 - ‘<code class=property>transition-timing-function</code>’ property <a 1.1580 - href="#ref-CSS3-TRANSITIONS">[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a>. 1.1581 +<p> CSS animations are exposed to the CSSOM through a pair of new interfaces describing the keyframes. 1.1582 1.1583 - <p> For a keyframed animation, the ‘<a 1.1584 - href="#animation-timing-function"><code 1.1585 - class=property>animation-timing-function</code></a>’ applies between 1.1586 - keyframes, not over the entire animation. For example, in the case of an 1.1587 - ‘<code class=css>ease-in-out</code>’ timing function, an animation 1.1588 - will ease in at the start of the keyframe and ease out at the end of the 1.1589 - keyframe. An ‘<a href="#animation-timing-function"><code 1.1590 - class=property>animation-timing-function</code></a>’ defined within a 1.1591 - keyframe block applies to that keyframe, otherwise the timing function 1.1592 - specified for the animation is used. In addition, only the first value of 1.1593 - the property applies when it is used in a keyframe block. 1.1594 +<h3 class="heading settled heading" data-level=6.1 id=interface-cssrule><span class=secno>6.1 </span><span class=content> 1.1595 +The <code>CSSRule</code> Interface</span><a class=self-link href=#interface-cssrule></a></h3> 1.1596 1.1597 - <h3 id=animation-iteration-count-property><span class=secno>4.5. </span> 1.1598 - The ‘<a href="#animation-iteration-count"><code 1.1599 - class=property>animation-iteration-count</code></a>’ Property</h3> 1.1600 +<p> The following two rule types are added to the <a data-link-type=idl href=http://dev.w3.org/csswg/cssom-1/#cssrule title=cssrule>CSSRule</a> interface. They provide 1.1601 + identification for the new keyframe and keyframes rules. 1.1602 1.1603 - <p> The ‘<a href="#animation-iteration-count"><code 1.1604 - class=property>animation-iteration-count</code></a>’ property specifies 1.1605 - the number of times an animation cycle is played. The initial value is 1.1606 - ‘<code class=css>1</code>’, meaning the animation will play from 1.1607 - beginning to end once. A value of ‘<code class=css>infinite</code>’ 1.1608 - will cause the animation to repeat forever. Non-integer numbers will cause 1.1609 - the animation to end part-way through a cycle. Negative values of ‘<a 1.1610 - href="#animation-iteration-count"><code 1.1611 - class=property>animation-iteration-count</code></a>’ are invalid. This 1.1612 - property is often used in conjunction an ‘<a 1.1613 - href="#animation-direction"><code 1.1614 - class=property>animation-direction</code></a>’ value of ‘<a 1.1615 - href="#alternate"><code class=css>alternate</code></a>’, which will 1.1616 - cause the animation to play in reverse on alternate cycles. 1.1617 +<h4 class="heading settled heading" data-level=6.1.1 id=interface-cssrule-idl><span class=secno>6.1.1 </span><span class=content> 1.1618 +IDL Definition</span><a class=self-link href=#interface-cssrule-idl></a></h4> 1.1619 1.1620 - <table class=propdef> 1.1621 - <tbody> 1.1622 - <tr> 1.1623 - <th>Name: 1.1624 + <pre class=idl>partial interface <a class=idl-code data-global-name="" data-link-type=interface href=http://dev.w3.org/csswg/cssom-1/#cssrule title=cssrule>CSSRule</a> { 1.1625 + const unsigned short <dfn class=idl-code data-dfn-for=CSSRule data-dfn-type=const data-export="" data-global-name="CSSRule<interface>/keyframes_rule<const>" id=dom-cssrule-keyframes_rule>KEYFRAMES_RULE<a class=self-link href=#dom-cssrule-keyframes_rule></a></dfn> = 7; 1.1626 + const unsigned short <dfn class=idl-code data-dfn-for=CSSRule data-dfn-type=const data-export="" data-global-name="CSSRule<interface>/keyframe_rule<const>" id=dom-cssrule-keyframe_rule>KEYFRAME_RULE<a class=self-link href=#dom-cssrule-keyframe_rule></a></dfn> = 8; 1.1627 +}; 1.1628 +</pre> 1.1629 +<h3 class="heading settled heading" data-level=6.2 id=interface-csskeyframerule><span class=secno>6.2 </span><span class=content> 1.1630 +The <code>CSSKeyframeRule</code> Interface</span><a class=self-link href=#interface-csskeyframerule></a></h3> 1.1631 1.1632 - <td><dfn id=animation-iteration-count>animation-iteration-count</dfn> 1.1633 +<p> The <a data-link-type=idl href=#dom-csskeyframerule title=csskeyframerule>CSSKeyframeRule</a> interface represents the style rule for a single key. 1.1634 1.1635 - <tr> 1.1636 - <th><a href="#values">Value</a>: 1.1637 +<h4 class="heading settled heading" data-level=6.2.1 id=interface-csskeyframerule-idl><span class=secno>6.2.1 </span><span class=content> 1.1638 +IDL Definition</span><a class=self-link href=#interface-csskeyframerule-idl></a></h4> 1.1639 1.1640 - <td><a 1.1641 - href="#single-animation-iteration-count"><single-animation-iteration-count></a> 1.1642 - [ ‘<code class=css>,</code>’ <a 1.1643 - href="#single-animation-iteration-count"><single-animation-iteration-count></a> 1.1644 - ]* 1.1645 + <pre class=idl>interface <dfn class=idl-code data-dfn-type=interface data-export="" data-global-name="" id=dom-csskeyframerule>CSSKeyframeRule<a class=self-link href=#dom-csskeyframerule></a></dfn> : <a data-link-type=idl href=http://dev.w3.org/csswg/cssom-1/#cssrule title=cssrule>CSSRule</a> { 1.1646 + attribute DOMString <dfn class=idl-code data-dfn-for=CSSKeyframeRule data-dfn-type=attribute data-export="" data-global-name="CSSKeyframeRule<interface>/keytext<attribute>" id=dom-csskeyframerule-keytext0>keyText<a class=self-link href=#dom-csskeyframerule-keytext0></a></dfn>; 1.1647 + readonly attribute <a data-link-type=idl href=http://dev.w3.org/csswg/cssom-1/#cssstyledeclaration title=cssstyledeclaration>CSSStyleDeclaration</a> <dfn class=idl-code data-dfn-for=CSSKeyframeRule data-dfn-type=attribute data-export="" data-global-name="CSSKeyframeRule<interface>/style<attribute>" id=dom-csskeyframerule-style0>style<a class=self-link href=#dom-csskeyframerule-style0></a></dfn>; 1.1648 +}; 1.1649 +</pre> 1.1650 +<h4 class="heading settled heading" data-level=6.2.2 id=interface-csskeyframerule-attributes><span class=secno>6.2.2 </span><span class=content> 1.1651 +Attributes</span><a class=self-link href=#interface-csskeyframerule-attributes></a></h4> 1.1652 1.1653 - <tr> 1.1654 - <th>Initial: 1.1655 + <dl data-dfn-for=csskeyframerule data-dfn-type=attribute> 1.1656 1.1657 - <td>‘<code class=css>1</code>’ 1.1658 + <dt><dfn class=idl-code data-dfn-for=csskeyframerule data-dfn-type=attribute data-export="" id=dom-csskeyframerule-keytext>keyText<a class=self-link href=#dom-csskeyframerule-keytext></a></dfn>, of type <a class=idl-code data-link-type=interface title=domstring>DOMString</a> 1.1659 + <dd> 1.1660 + This attribute represents the keyframe selector as a comma-separated list of 1.1661 + percentage values. The <span class=css data-link-type=maybe title=from>from</span> and <span class=css data-link-type=maybe title=to>to</span> keywords map to 0% and 100%, 1.1662 + respectively. 1.1663 1.1664 - <tr> 1.1665 - <th>Applies To: 1.1666 + <dt><dfn class=idl-code data-dfn-for=csskeyframerule data-dfn-type=attribute data-export="" id=dom-csskeyframerule-style>style<a class=self-link href=#dom-csskeyframerule-style></a></dfn>, of type <a class=idl-code data-link-type=interface href=http://dev.w3.org/csswg/cssom-1/#cssstyledeclaration title=cssstyledeclaration>CSSStyleDeclaration</a> 1.1667 + <dd> 1.1668 + This attribute represents the style associated with this keyframe. 1.1669 + </dl> 1.1670 1.1671 - <td>all elements, ::before and ::after pseudo-elements 1.1672 +<h3 class="heading settled heading" data-level=6.3 id=interface-csskeyframesrule><span class=secno>6.3 </span><span class=content> 1.1673 +The <code>CSSKeyframesRule</code> Interface</span><a class=self-link href=#interface-csskeyframesrule></a></h3> 1.1674 1.1675 - <tr> 1.1676 - <th>Inherited: 1.1677 +<p> The <a data-link-type=idl href=#dom-csskeyframesrule title=csskeyframesrule>CSSKeyframesRule</a> interface represents a complete set of keyframes for 1.1678 + a single animation. 1.1679 1.1680 - <td>no 1.1681 +<h4 class="heading settled heading" data-level=6.3.1 id=interface-csskeyframesrule-idl><span class=secno>6.3.1 </span><span class=content> 1.1682 +IDL Definition</span><a class=self-link href=#interface-csskeyframesrule-idl></a></h4> 1.1683 1.1684 - <tr> 1.1685 - <th>Animatable: 1.1686 + <pre class=idl>interface <dfn class=idl-code data-dfn-type=interface data-export="" data-global-name="" id=dom-csskeyframesrule>CSSKeyframesRule<a class=self-link href=#dom-csskeyframesrule></a></dfn> : <a data-link-type=idl href=http://dev.w3.org/csswg/cssom-1/#cssrule title=cssrule>CSSRule</a> { 1.1687 + attribute DOMString <dfn class=idl-code data-dfn-for=CSSKeyframesRule data-dfn-type=attribute data-export="" data-global-name="CSSKeyframesRule<interface>/name<attribute>" id=dom-csskeyframesrule-name0>name<a class=self-link href=#dom-csskeyframesrule-name0></a></dfn>; 1.1688 + readonly attribute <a data-link-type=idl href=http://dev.w3.org/csswg/cssom-1/#cssrulelist title=cssrulelist>CSSRuleList</a> <dfn class=idl-code data-dfn-for=CSSKeyframesRule data-dfn-type=attribute data-export="" data-global-name="CSSKeyframesRule<interface>/cssrules<attribute>" id=dom-csskeyframesrule-cssrules0>cssRules<a class=self-link href=#dom-csskeyframesrule-cssrules0></a></dfn>; 1.1689 1.1690 - <td>no 1.1691 + void <dfn class=idl-code data-dfn-for=CSSKeyframesRule data-dfn-type=method data-export="" data-global-name="CSSKeyframesRule<interface>/appendrule()<method>" id=dom-csskeyframesrule-appendrule0 title=appendRule()>appendRule<a class=self-link href=#dom-csskeyframesrule-appendrule0></a></dfn>(in DOMString <dfn class=idl-code data-dfn-for=CSSKeyframesRule/appendRule() data-dfn-type=argument data-export="" data-global-name="CSSKeyframesRule<interface>/appendRule()<method>/rule<argument>" id=dom-csskeyframesruleappendrule-rule0>rule<a class=self-link href=#dom-csskeyframesruleappendrule-rule0></a></dfn>); 1.1692 + void <dfn class=idl-code data-dfn-for=CSSKeyframesRule data-dfn-type=method data-export="" data-global-name="CSSKeyframesRule<interface>/deleterule()<method>" id=dom-csskeyframesrule-deleterule0 title=deleteRule()>deleteRule<a class=self-link href=#dom-csskeyframesrule-deleterule0></a></dfn>(in DOMString <dfn class=idl-code data-dfn-for=CSSKeyframesRule/deleteRule() data-dfn-type=argument data-export="" data-global-name="CSSKeyframesRule<interface>/deleteRule()<method>/key<argument>" id=dom-csskeyframesruledeleterule-key0>key<a class=self-link href=#dom-csskeyframesruledeleterule-key0></a></dfn>); 1.1693 + <a data-link-type=idl href=#dom-csskeyframerule title=csskeyframerule>CSSKeyframeRule</a> <dfn class=idl-code data-dfn-for=CSSKeyframesRule data-dfn-type=method data-export="" data-global-name="CSSKeyframesRule<interface>/findrule()<method>" id=dom-csskeyframesrule-findrule0 title=findRule()>findRule<a class=self-link href=#dom-csskeyframesrule-findrule0></a></dfn>(in DOMString <dfn class=idl-code data-dfn-for=CSSKeyframesRule/findRule() data-dfn-type=argument data-export="" data-global-name="CSSKeyframesRule<interface>/findRule()<method>/key<argument>" id=dom-csskeyframesrulefindrule-key0>key<a class=self-link href=#dom-csskeyframesrulefindrule-key0></a></dfn>); 1.1694 +}; 1.1695 +</pre> 1.1696 +<h4 class="heading settled heading" data-level=6.3.2 id=interface-csskeyframesrule-attributes><span class=secno>6.3.2 </span><span class=content> 1.1697 +Attributes</span><a class=self-link href=#interface-csskeyframesrule-attributes></a></h4> 1.1698 1.1699 - <tr> 1.1700 - <th>Percentages: 1.1701 + <dl data-dfn-for=csskeyframesrule data-dfn-type=attribute> 1.1702 1.1703 - <td>N/A 1.1704 + <dt><dfn class=idl-code data-dfn-for=csskeyframesrule data-dfn-type=attribute data-export="" id=dom-csskeyframesrule-name>name<a class=self-link href=#dom-csskeyframesrule-name></a></dfn>, of type <a class=idl-code data-link-type=interface title=domstring>DOMString</a> 1.1705 + <dd> 1.1706 + This attribute is the name of the keyframes, used by the <a class=property data-link-type=propdesc href=#propdef-animation-name title=animation-name>animation-name</a> property. 1.1707 1.1708 - <tr> 1.1709 - <th>Media: 1.1710 + <dt><dfn class=idl-code data-dfn-for=csskeyframesrule data-dfn-type=attribute data-export="" id=dom-csskeyframesrule-cssrules>cssRules<a class=self-link href=#dom-csskeyframesrule-cssrules></a></dfn>, of type <a class=idl-code data-link-type=interface href=http://dev.w3.org/csswg/cssom-1/#cssrulelist title=cssrulelist>CSSRuleList</a> 1.1711 + <dd> 1.1712 + This attribute gives access to the keyframes in the list. 1.1713 + </dl> 1.1714 1.1715 - <td>visual 1.1716 +<h4 class="heading settled heading" data-level=6.3.3 id=interface-csskeyframesrule-appendrule><span class=secno>6.3.3 </span><span class=content> 1.1717 +The <code>appendRule</code> method</span><a class=self-link href=#interface-csskeyframesrule-appendrule></a></h4> 1.1718 1.1719 - <tr> 1.1720 - <th>Computed Value: 1.1721 +<p> The <dfn class=idl-code data-dfn-for=CSSKeyFramesRule data-dfn-type=method data-export="" id=dom-csskeyframesrule-appendrule title=appendrule()>appendRule()<a class=self-link href=#dom-csskeyframesrule-appendrule></a></dfn> method appends the passed 1.1722 + <a data-link-type=idl href=#dom-csskeyframerule title=csskeyframerule>CSSKeyframeRule</a> into the list at the passed key. 1.1723 1.1724 - <td>as specified 1.1725 +<p> Parameters: 1.1726 1.1727 - <tr> 1.1728 - <th>Canonical Order: 1.1729 + <dl> 1.1730 1.1731 - <td><abbr title="follows order of property value definition">per 1.1732 - grammar</abbr> 1.1733 - </table> 1.1734 + <dt><dfn class=idl-code data-dfn-for=CSSKeyFramesRule/appendRule() data-dfn-type=argument data-export="" id=dom-csskeyframesruleappendrule-rule>rule<a class=self-link href=#dom-csskeyframesruleappendrule-rule></a></dfn> of type <a class=idl-code data-link-type=interface title=domstring>DOMString</a> 1.1735 + <dd> 1.1736 + The rule to be appended, expressed in the same syntax as one entry in the 1.1737 + <a class=css data-link-type=maybe href=#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule. 1.1738 + </dl> 1.1739 1.1740 - <div class=prod> <dfn 1.1741 - id=single-animation-iteration-count><single-animation-iteration-count></dfn> 1.1742 - = infinite | <number></div> 1.1743 +<p> No Return Value 1.1744 1.1745 - <h3 id=animation-direction-property><span class=secno>4.6. </span> The 1.1746 - ‘<a href="#animation-direction"><code 1.1747 - class=property>animation-direction</code></a>’ Property</h3> 1.1748 +<p> No Exceptions 1.1749 1.1750 - <p> The ‘<a href="#animation-direction"><code 1.1751 - class=property>animation-direction</code></a>’ property defines whether 1.1752 - or not the animation should play in reverse on some or all cycles. When an 1.1753 - animation is played in reverse the timing functions are also reversed. For 1.1754 - example, when played in reverse an ease-in animation would appear to be an 1.1755 - ease-out animation. 1.1756 +<h4 class="heading settled heading" data-level=6.3.4 id=interface-csskeyframesrule-deleterule><span class=secno>6.3.4 </span><span class=content> 1.1757 +The <code>deleteRule</code> method</span><a class=self-link href=#interface-csskeyframesrule-deleterule></a></h4> 1.1758 1.1759 - <table class=propdef> 1.1760 - <tbody> 1.1761 - <tr> 1.1762 - <th>Name: 1.1763 +<p> The <dfn class=idl-code data-dfn-for=CSSKeyFramesRule data-dfn-type=method data-export="" id=dom-csskeyframesrule-deleterule title=deleterule()>deleteRule()<a class=self-link href=#dom-csskeyframesrule-deleterule></a></dfn> deletes the <a data-link-type=idl href=#dom-csskeyframerule title=csskeyframerule>CSSKeyframeRule</a> 1.1764 + with the passed key. If a rule with this key does not exist, the method does nothing. 1.1765 1.1766 - <td><dfn id=animation-direction>animation-direction</dfn> 1.1767 +<p> Parameters: 1.1768 1.1769 - <tr> 1.1770 - <th><a href="#values">Value</a>: 1.1771 + <dl> 1.1772 1.1773 - <td><a 1.1774 - href="#single-animation-direction"><single-animation-direction></a> 1.1775 - [ ‘<code class=css>,</code>’ <a 1.1776 - href="#single-animation-direction"><single-animation-direction></a> 1.1777 - ]* 1.1778 + <dt><dfn class=idl-code data-dfn-for=CSSKeyFramesRule/deleteRule() data-dfn-type=argument data-export="" id=dom-csskeyframesruledeleterule-key>key<a class=self-link href=#dom-csskeyframesruledeleterule-key></a></dfn> of type <a class=idl-code data-link-type=interface title=domstring>DOMString</a> 1.1779 + <dd> 1.1780 + The key which describes the rule to be deleted. The key must resolve to 1.1781 + a number between 0 and 1, or the rule is ignored. 1.1782 + </dl> 1.1783 1.1784 - <tr> 1.1785 - <th>Initial: 1.1786 +<p> No Return Value 1.1787 1.1788 - <td>‘<a href="#normal"><code class=css>normal</code></a>’ 1.1789 +<p> No Exceptions 1.1790 1.1791 - <tr> 1.1792 - <th>Applies To: 1.1793 1.1794 - <td>all elements, ::before and ::after pseudo-elements 1.1795 +<h4 class="heading settled heading" data-level=6.3.5 id=interface-csskeyframesrule-findrule><span class=secno>6.3.5 </span><span class=content> 1.1796 +The <code>findRule</code> method</span><a class=self-link href=#interface-csskeyframesrule-findrule></a></h4> 1.1797 1.1798 - <tr> 1.1799 - <th>Inherited: 1.1800 +<p> The <dfn class=idl-code data-dfn-for=CSSKeyFramesRule data-dfn-type=method data-export="" id=dom-csskeyframesrule-findrule title=findrule()>findRule()<a class=self-link href=#dom-csskeyframesrule-findrule></a></dfn> returns the rule with a key matching 1.1801 + the passed key. If no such rule exists, a null value is returned. 1.1802 1.1803 - <td>no 1.1804 +<p> Parameters: 1.1805 1.1806 - <tr> 1.1807 - <th>Animatable: 1.1808 + <dl> 1.1809 + <dt><dfn class=idl-code data-dfn-for=CSSKeyFramesRule/findRule() data-dfn-type=argument data-export="" id=dom-csskeyframesrulefindrule-key>key<a class=self-link href=#dom-csskeyframesrulefindrule-key></a></dfn> of type <a class=idl-code data-link-type=interface title=domstring>DOMString</a> 1.1810 + <dd> 1.1811 + The key which described the rule to find. The key must resolve to 1.1812 + a number between 0 and 1, or the rule is ignored. 1.1813 + </dl> 1.1814 1.1815 - <td>no 1.1816 +<p> Return Value: 1.1817 1.1818 - <tr> 1.1819 - <th>Percentages: 1.1820 + <dl> 1.1821 + <dt><a data-link-type=idl href=#dom-csskeyframerule title=csskeyframerule>CSSKeyframeRule</a> 1.1822 + <dd> 1.1823 + The found rule. 1.1824 + </dl> 1.1825 1.1826 - <td>N/A 1.1827 +<p> No Exceptions 1.1828 1.1829 - <tr> 1.1830 - <th>Media: 1.1831 1.1832 - <td>visual 1.1833 1.1834 - <tr> 1.1835 - <th>Computed Value: 1.1836 1.1837 - <td>as specified 1.1838 +<h2 class="heading settled heading" data-level=7 id=acknowledgements><span class=secno>7 </span><span class=content> 1.1839 +Acknowledgements</span><a class=self-link href=#acknowledgements></a></h2> 1.1840 1.1841 - <tr> 1.1842 - <th>Canonical Order: 1.1843 +<p> Thanks especially to the feedback from Tab Atkins, Carine Bournez, Anne van Kesteren, Øyvind Stenhaug, 1.1844 + Estelle Weyl, and all the rest of the www-style community. 1.1845 1.1846 - <td><abbr title="follows order of property value definition">per 1.1847 - grammar</abbr> 1.1848 - </table> 1.1849 +<h2 class="heading settled heading" data-level=8 id=wg-resolutions-pending><span class=secno>8 </span><span class=content> 1.1850 +Working Group Resolutions that are pending editing</span><a class=self-link href=#wg-resolutions-pending></a></h2> 1.1851 1.1852 - <div class=prod> <dfn 1.1853 - id=single-animation-direction><single-animation-direction></dfn> = 1.1854 - normal | reverse | alternate | alternate-reverse</div> 1.1855 +<p> <em>This section is informative and temporary.</em> 1.1856 1.1857 - <dl> 1.1858 - <dt><dfn id=normal>normal</dfn> 1.1859 +<p> The editors are currently behind on editing this spec. The following working group resolutions still 1.1860 + need to be edited in: 1.1861 1.1862 - <dd> All iterations of the animation are played as specified. 1.1863 +<p> <ul> 1.1864 + <li>2012-10-29 minutes 1.1865 + <ul> 1.1866 + <li>Change the animation properties to be dynamically changeable 1.1867 + <li>@keyframes can be dynamically changed 1.1868 + <li>When you encounter duplicate animations names, last one wins. 1.1869 + <li>Make *animations* transition *all* properties. Unless otherwise specified, discrete properties take their starting values below 50% timing function progress, and end values above 50% timing function progress. 1.1870 + </ul> 1.1871 + <li>2012-12-12 minutes and intermediate comments and 2012-12-19 minutes 1.1872 + <ul> 1.1873 + <li>??? Does anything still need to be done for these? 1.1874 + </ul> 1.1875 + <li>2013-02-20 minutes 1.1876 + <ul> 1.1877 + <li>Øyvind’s clarification accepted 1.1878 + <li>keyframe rules cascade 1.1879 + <li>mark pseudoElement at-risk 1.1880 + </ul> 1.1881 + <li>2013-05-30 minutes 1.1882 + <ul> 1.1883 + <li>expectations on animations in non-interactive media 1.1884 + </ul> 1.1885 + <li>2014-01-27 minutes 1.1886 + <ul> 1.1887 + <li>remove text about waiting for document load 1.1888 + </ul> 1.1889 1.1890 - <dt><dfn id=reverse>reverse</dfn> 1.1891 1.1892 - <dd> All iterations of the animation are played in the reverse direction 1.1893 - from the way they were specified. 1.1894 1.1895 - <dt><dfn id=alternate>alternate</dfn> 1.1896 1.1897 - <dd> The animation cycle iterations that are odd counts are played in the 1.1898 - normal direction, and the animation cycle iterations that are even counts 1.1899 - are played in a reverse direction. 1.1900 +<h2 class="no-ref no-num heading settled heading" id=conformance><span class=content> 1.1901 +Conformance</span><a class=self-link href=#conformance></a></h2> 1.1902 1.1903 - <dt><dfn id=alternate-reverse>alternate-reverse</dfn> 1.1904 +<h3 class="no-ref heading settled heading" id=conventions><span class=content> 1.1905 +Document conventions</span><a class=self-link href=#conventions></a></h3> 1.1906 1.1907 - <dd> The animation cycle iterations that are odd counts are played in the 1.1908 - reverse direction, and the animation cycle iterations that are even 1.1909 - counts are played in a normal direction. 1.1910 - </dl> 1.1911 + <p>Conformance requirements are expressed with a combination of 1.1912 + descriptive assertions and RFC 2119 terminology. The key words "MUST", 1.1913 + "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", 1.1914 + "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this 1.1915 + document are to be interpreted as described in RFC 2119. 1.1916 + However, for readability, these words do not appear in all uppercase 1.1917 + letters in this specification. 1.1918 1.1919 - <p class=note> Note that for the purpose of determining whether an 1.1920 - iteration is even or odd, iterations start counting from 1. 1.1921 + <p>All of the text of this specification is normative except sections 1.1922 + explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=rfc2119>[RFC2119]</a></p> 1.1923 1.1924 - <h3 id=animation-play-state-property><span class=secno>4.7. </span> The 1.1925 - ‘<a href="#animation-play-state"><code 1.1926 - class=property>animation-play-state</code></a>’ Property</h3> 1.1927 + <p>Examples in this specification are introduced with the words "for example" 1.1928 + or are set apart from the normative text with <code>class="example"</code>, 1.1929 + like this: 1.1930 1.1931 - <p> The ‘<a href="#animation-play-state"><code 1.1932 - class=property>animation-play-state</code></a>’ property defines whether 1.1933 - the animation is running or paused. A running animation can be paused by 1.1934 - setting this property to ‘<code class=css>paused</code>’. To continue 1.1935 - running a paused animation this property can be set to ‘<code 1.1936 - class=css>running</code>’. A paused animation will continue to display 1.1937 - the current value of the animation in a static state, as if the time of 1.1938 - the animation is constant. When a paused animation is resumed, it restarts 1.1939 - from the current value, not necessarily from the beginning of the 1.1940 - animation. 1.1941 + <div class=example> 1.1942 + <p>This is an example of an informative example.</p> 1.1943 + </div> 1.1944 1.1945 - <table class=propdef> 1.1946 - <tbody> 1.1947 - <tr> 1.1948 - <th>Name: 1.1949 + <p>Informative notes begin with the word "Note" and are set apart from the 1.1950 + normative text with <code>class="note"</code>, like this: 1.1951 1.1952 - <td><dfn id=animation-play-state>animation-play-state</dfn> 1.1953 + <p class=note>Note, this is an informative note.</p> 1.1954 1.1955 - <tr> 1.1956 - <th><a href="#values">Value</a>: 1.1957 +<h3 class="no-ref heading settled heading" id=conformance-classes><span class=content> 1.1958 +Conformance classes</span><a class=self-link href=#conformance-classes></a></h3> 1.1959 1.1960 - <td><a 1.1961 - href="#single-animation-play-state"><single-animation-play-state></a> 1.1962 - [ ‘<code class=css>,</code>’ <a 1.1963 - href="#single-animation-play-state"><single-animation-play-state></a> 1.1964 - ]* 1.1965 + <p>Conformance to this specification 1.1966 + is defined for three conformance classes: 1.1967 + <dl> 1.1968 + <dt>style sheet 1.1969 + <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#style-sheet>CSS 1.1970 + style sheet</a>. 1.1971 + <dt>renderer 1.1972 + <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 1.1973 + that interprets the semantics of a style sheet and renders 1.1974 + documents that use them. 1.1975 + <dt>authoring tool 1.1976 + <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 1.1977 + that writes a style sheet. 1.1978 + </dl> 1.1979 1.1980 - <tr> 1.1981 - <th>Initial: 1.1982 + <p>A style sheet is conformant to this specification 1.1983 + if all of its statements that use syntax defined in this module are valid 1.1984 + according to the generic CSS grammar and the individual grammars of each 1.1985 + feature defined in this module. 1.1986 1.1987 - <td>‘<code class=css>running</code>’ 1.1988 + <p>A renderer is conformant to this specification 1.1989 + if, in addition to interpreting the style sheet as defined by the 1.1990 + appropriate specifications, it supports all the features defined 1.1991 + by this specification by parsing them correctly 1.1992 + and rendering the document accordingly. However, the inability of a 1.1993 + UA to correctly render a document due to limitations of the device 1.1994 + does not make the UA non-conformant. (For example, a UA is not 1.1995 + required to render color on a monochrome monitor.) 1.1996 1.1997 - <tr> 1.1998 - <th>Applies To: 1.1999 + <p>An authoring tool is conformant to this specification 1.2000 + if it writes style sheets that are syntactically correct according to the 1.2001 + generic CSS grammar and the individual grammars of each feature in 1.2002 + this module, and meet all other conformance requirements of style sheets 1.2003 + as described in this module. 1.2004 1.2005 - <td>all elements, ::before and ::after pseudo-elements 1.2006 +<h3 class="no-ref heading settled heading" id=partial><span class=content> 1.2007 +Partial implementations</span><a class=self-link href=#partial></a></h3> 1.2008 1.2009 - <tr> 1.2010 - <th>Inherited: 1.2011 + <p>So that authors can exploit the forward-compatible parsing rules to 1.2012 + assign fallback values, CSS renderers <strong>must</strong> 1.2013 + treat as invalid (and <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignore 1.2014 + as appropriate</a>) any at-rules, properties, property values, keywords, 1.2015 + and other syntactic constructs for which they have no usable level of 1.2016 + support. In particular, user agents <strong>must not</strong> selectively 1.2017 + ignore unsupported component values and honor supported values in a single 1.2018 + multi-value property declaration: if any value is considered invalid 1.2019 + (as unsupported values must be), CSS requires that the entire declaration 1.2020 + be ignored.</p> 1.2021 1.2022 - <td>no 1.2023 +<h3 class="no-ref heading settled heading" id=experimental><span class=content> 1.2024 +Experimental implementations</span><a class=self-link href=#experimental></a></h3> 1.2025 1.2026 - <tr> 1.2027 - <th>Animatable: 1.2028 + <p>To avoid clashes with future CSS features, the CSS2.1 specification 1.2029 + reserves a <a href=http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>prefixed 1.2030 + syntax</a> for proprietary and experimental extensions to CSS. 1.2031 1.2032 - <td>no 1.2033 + <p>Prior to a specification reaching the Candidate Recommendation stage 1.2034 + in the W3C process, all implementations of a CSS feature are considered 1.2035 + experimental. The CSS Working Group recommends that implementations 1.2036 + use a vendor-prefixed syntax for such features, including those in 1.2037 + W3C Working Drafts. This avoids incompatibilities with future changes 1.2038 + in the draft. 1.2039 + </p> 1.2040 1.2041 - <tr> 1.2042 - <th>Percentages: 1.2043 +<h3 class="no-ref heading settled heading" id=testing><span class=content> 1.2044 +Non-experimental implementations</span><a class=self-link href=#testing></a></h3> 1.2045 1.2046 - <td>N/A 1.2047 + <p>Once a specification reaches the Candidate Recommendation stage, 1.2048 + non-experimental implementations are possible, and implementors should 1.2049 + release an unprefixed implementation of any CR-level feature they 1.2050 + can demonstrate to be correctly implemented according to spec. 1.2051 1.2052 - <tr> 1.2053 - <th>Media: 1.2054 + <p>To establish and maintain the interoperability of CSS across 1.2055 + implementations, the CSS Working Group requests that non-experimental 1.2056 + CSS renderers submit an implementation report (and, if necessary, the 1.2057 + testcases used for that implementation report) to the W3C before 1.2058 + releasing an unprefixed implementation of any CSS features. Testcases 1.2059 + submitted to W3C are subject to review and correction by the CSS 1.2060 + Working Group. 1.2061 1.2062 - <td>visual 1.2063 + <p>Further information on submitting testcases and implementation reports 1.2064 + can be found from on the CSS Working Group’s website at 1.2065 + <a href=http://www.w3.org/Style/CSS/Test/>http://www.w3.org/Style/CSS/Test/</a>. 1.2066 + Questions should be directed to the 1.2067 + <a href=http://lists.w3.org/Archives/Public/public-css-testsuite>public-css-testsuite@w3.org</a> 1.2068 + mailing list. 1.2069 1.2070 - <tr> 1.2071 - <th>Computed Value: 1.2072 +<h2 class="no-num no-ref heading settled heading" id=references><span class=content> 1.2073 +References</span><a class=self-link href=#references></a></h2> 1.2074 1.2075 - <td>as specified 1.2076 +<h3 class="no-num no-ref heading settled heading" id=normative><span class=content> 1.2077 +Normative References</span><a class=self-link href=#normative></a></h3> 1.2078 +<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3-transitions title=CSS3-TRANSITIONS><a class=self-link href=#css3-transitions></a>[CSS3-TRANSITIONS]<dd>Dean Jackson; et al. <a href=http://www.w3.org/TR/2013/WD-css3-transitions-20130212/>CSS Transitions</a>. 12 February 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-transitions-20130212/>http://www.w3.org/TR/2013/WD-css3-transitions-20130212/</a><dt id=css3cascade title=CSS3CASCADE><a class=self-link href=#css3cascade></a>[CSS3CASCADE]<dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>CSS Cascading and Inheritance Level 3</a>. 3 October 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/</a><dt id=css3val title=CSS3VAL><a class=self-link href=#css3val></a>[CSS3VAL]<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=wcag20 title=WCAG20><a class=self-link href=#wcag20></a>[WCAG20]<dd>Ben Caldwell; et al. <a href=http://www.w3.org/TR/2008/REC-WCAG20-20081211/>Web Content Accessibility Guidelines (WCAG) 2.0</a>. 11 December 2008. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2008/REC-WCAG20-20081211/>http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a></dl></div> 1.2079 1.2080 - <tr> 1.2081 - <th>Canonical Order: 1.2082 +<h3 class="no-num no-ref heading settled heading" id=informative><span class=content> 1.2083 +Informative References</span><a class=self-link href=#informative></a></h3> 1.2084 +<div data-fill-with=informative-references><dl></dl></div> 1.2085 1.2086 - <td><abbr title="follows order of property value definition">per 1.2087 - grammar</abbr> 1.2088 - </table> 1.2089 +<h2 class="no-num no-ref heading settled heading" id=index><span class=content> 1.2090 +Index</span><a class=self-link href=#index></a></h2> 1.2091 +<div data-fill-with=index><ul class=indexlist> 1.2092 +<li>alternate, <a href=#valuedef-alternate title="section 4.6">4.6</a> 1.2093 +<li>alternate-reverse, <a href=#valuedef-alternate-reverse title="section 4.6">4.6</a> 1.2094 +<li>animation, <a href=#propdef-animation title="section 4.10">4.10</a> 1.2095 +<li>animation-delay, <a href=#propdef-animation-delay title="section 4.8">4.8</a> 1.2096 +<li>animation-direction, <a href=#propdef-animation-direction title="section 4.6">4.6</a> 1.2097 +<li>animation-duration, <a href=#propdef-animation-duration title="section 4.3">4.3</a> 1.2098 +<li>animationend, <a href=#dom-animationevent-animationend title="section 5.2">5.2</a> 1.2099 +<li>animationevent(), <a href=#funcdef-animationevent title="section 5.1.2">5.1.2</a> 1.2100 +<li>AnimationEvent<ul><li>definition of, <a href=#animationevent title="section 5.1">5.1</a> 1.2101 +<li>(interface), <a href=#dom-animationevent title="section 5.1.1">5.1.1</a> 1.2102 +</ul><li>AnimationEventInit, <a href=#dictdef-animationeventinit title="section 5.1.1">5.1.1</a> 1.2103 +<li>animationEventInitDict, <a href=#dom-animationeventanimationevent-animationeventinitdict title="section 5.1.1">5.1.1</a> 1.2104 +<li>animation-fill-mode, <a href=#propdef-animation-fill-mode title="section 4.9">4.9</a> 1.2105 +<li>animationiteration, <a href=#dom-animationevent-animationiteration title="section 5.2">5.2</a> 1.2106 +<li>animation-iteration-count, <a href=#propdef-animation-iteration-count title="section 4.5">4.5</a> 1.2107 +<li>animation-name, <a href=#propdef-animation-name title="section 4.2">4.2</a> 1.2108 +<li>animationName<ul><li>attribute for AnimationEvent, <a href=#dom-animationevent-animationname0 title="section 5.1.1">5.1.1</a> 1.2109 +<li>dict-member for AnimationEventInit, <a href=#dom-animationeventinit-animationname title="section 5.1.1">5.1.1</a> 1.2110 +<li>attribute for animationevent, <a href=#dom-animationevent-animationname title="section 5.1.2">5.1.2</a> 1.2111 +</ul><li>animation-play-state, <a href=#propdef-animation-play-state title="section 4.7">4.7</a> 1.2112 +<li>animationstart, <a href=#dom-animationevent-animationstart title="section 5.2">5.2</a> 1.2113 +<li>animation-timing-function, <a href=#propdef-animation-timing-function title="section 4.4">4.4</a> 1.2114 +<li>appendRule(), <a href=#dom-csskeyframesrule-appendrule0 title="section 6.3.1">6.3.1</a> 1.2115 +<li>appendrule(), <a href=#dom-csskeyframesrule-appendrule title="section 6.3.3">6.3.3</a> 1.2116 +<li>backwards, <a href=#valuedef-backwards title="section 4.9">4.9</a> 1.2117 +<li>both, <a href=#valuedef-both title="section 4.9">4.9</a> 1.2118 +<li>CSSKeyframeRule, <a href=#dom-csskeyframerule title="section 6.2.1">6.2.1</a> 1.2119 +<li>CSSKeyframesRule, <a href=#dom-csskeyframesrule title="section 6.3.1">6.3.1</a> 1.2120 +<li>cssRules<ul><li>attribute for CSSKeyframesRule, <a href=#dom-csskeyframesrule-cssrules0 title="section 6.3.1">6.3.1</a> 1.2121 +<li>attribute for csskeyframesrule, <a href=#dom-csskeyframesrule-cssrules title="section 6.3.2">6.3.2</a> 1.2122 +</ul><li><custom-ident>, <a href=#valuedef-custom-ident title="section 4.2">4.2</a> 1.2123 +<li>deleteRule(), <a href=#dom-csskeyframesrule-deleterule0 title="section 6.3.1">6.3.1</a> 1.2124 +<li>deleterule(), <a href=#dom-csskeyframesrule-deleterule title="section 6.3.4">6.3.4</a> 1.2125 +<li>elapsedTime<ul><li>attribute for AnimationEvent, <a href=#dom-animationevent-elapsedtime0 title="section 5.1.1">5.1.1</a> 1.2126 +<li>dict-member for AnimationEventInit, <a href=#dom-animationeventinit-elapsedtime title="section 5.1.1">5.1.1</a> 1.2127 +<li>attribute for animationevent, <a href=#dom-animationevent-elapsedtime title="section 5.1.2">5.1.2</a> 1.2128 +</ul><li>findrule(), <a href=#dom-csskeyframesrule-findrule title="section 6.3.5">6.3.5</a> 1.2129 +<li>findRule(), <a href=#dom-csskeyframesrule-findrule0 title="section 6.3.1">6.3.1</a> 1.2130 +<li>forwards, <a href=#valuedef-forwards title="section 4.9">4.9</a> 1.2131 +<li>infinite, <a href=#valuedef-infinite title="section 4.5">4.5</a> 1.2132 +<li>key<ul><li>argument for CSSKeyframesRule/deleteRule(), <a href=#dom-csskeyframesruledeleterule-key0 title="section 6.3.1">6.3.1</a> 1.2133 +<li>argument for CSSKeyframesRule/findRule(), <a href=#dom-csskeyframesrulefindrule-key0 title="section 6.3.1">6.3.1</a> 1.2134 +<li>argument for CSSKeyFramesRule/deleteRule(), <a href=#dom-csskeyframesruledeleterule-key title="section 6.3.4">6.3.4</a> 1.2135 +<li>argument for CSSKeyFramesRule/findRule(), <a href=#dom-csskeyframesrulefindrule-key title="section 6.3.5">6.3.5</a> 1.2136 +</ul><li>KEYFRAME_RULE, <a href=#dom-cssrule-keyframe_rule title="section 6.1.1">6.1.1</a> 1.2137 +<li>@keyframes, <a href=#at-ruledef-keyframes title="section 4">4</a> 1.2138 +<li>KEYFRAMES_RULE, <a href=#dom-cssrule-keyframes_rule title="section 6.1.1">6.1.1</a> 1.2139 +<li>keyText<ul><li>attribute for CSSKeyframeRule, <a href=#dom-csskeyframerule-keytext0 title="section 6.2.1">6.2.1</a> 1.2140 +<li>attribute for csskeyframerule, <a href=#dom-csskeyframerule-keytext title="section 6.2.2">6.2.2</a> 1.2141 +</ul><li>name<ul><li>attribute for CSSKeyframesRule, <a href=#dom-csskeyframesrule-name0 title="section 6.3.1">6.3.1</a> 1.2142 +<li>attribute for csskeyframesrule, <a href=#dom-csskeyframesrule-name title="section 6.3.2">6.3.2</a> 1.2143 +</ul><li>none<ul><li>value for animation-name, <a href=#valuedef-none0 title="section 4.2">4.2</a> 1.2144 +<li>value for animation-fill-mode, <a href=#valuedef-none title="section 4.9">4.9</a> 1.2145 +</ul><li>normal, <a href=#valuedef-normal title="section 4.6">4.6</a> 1.2146 +<li><number>, <a href=#valuedef-number title="section 4.5">4.5</a> 1.2147 +<li>paused, <a href=#valuedef-paused title="section 4.7">4.7</a> 1.2148 +<li>pseudoElement<ul><li>attribute for AnimationEvent, <a href=#dom-animationevent-pseudoelement0 title="section 5.1.1">5.1.1</a> 1.2149 +<li>dict-member for AnimationEventInit, <a href=#dom-animationeventinit-pseudoelement title="section 5.1.1">5.1.1</a> 1.2150 +<li>attribute for animationevent, <a href=#dom-animationevent-pseudoelement title="section 5.1.2">5.1.2</a> 1.2151 +</ul><li>reverse, <a href=#valuedef-reverse title="section 4.6">4.6</a> 1.2152 +<li>rule<ul><li>argument for CSSKeyframesRule/appendRule(), <a href=#dom-csskeyframesruleappendrule-rule0 title="section 6.3.1">6.3.1</a> 1.2153 +<li>argument for CSSKeyFramesRule/appendRule(), <a href=#dom-csskeyframesruleappendrule-rule title="section 6.3.3">6.3.3</a> 1.2154 +</ul><li>running, <a href=#valuedef-running title="section 4.7">4.7</a> 1.2155 +<li><single-animation>, <a href=#typedef-single-animation title="section 4.10">4.10</a> 1.2156 +<li><single-animation-direction>, <a href=#typedef-single-animation-direction title="section 4.6">4.6</a> 1.2157 +<li><single-animation-fill-mode>, <a href=#typedef-single-animation-fill-mode title="section 4.9">4.9</a> 1.2158 +<li><single-animation-iteration-count>, <a href=#typedef-single-animation-iteration-count title="section 4.5">4.5</a> 1.2159 +<li><single-animation-name>, <a href=#typedef-single-animation-name title="section 4.2">4.2</a> 1.2160 +<li><single-animation-play-state>, <a href=#typedef-single-animation-play-state title="section 4.7">4.7</a> 1.2161 +<li><single-timing-function>, <a href=#typedef-single-timing-function title="section 4.4">4.4</a> 1.2162 +<li>style<ul><li>attribute for CSSKeyframeRule, <a href=#dom-csskeyframerule-style0 title="section 6.2.1">6.2.1</a> 1.2163 +<li>attribute for csskeyframerule, <a href=#dom-csskeyframerule-style title="section 6.2.2">6.2.2</a> 1.2164 +</ul><li><time><ul><li>value for animation-duration, <a href=#valuedef-time0 title="section 4.3">4.3</a> 1.2165 +<li>value for animation-delay, <a href=#valuedef-time title="section 4.8">4.8</a> 1.2166 +</ul><li>type, <a href=#dom-animationeventanimationevent-type title="section 5.1.1">5.1.1</a> 1.2167 +</ul></div> 1.2168 1.2169 - <div class=prod> <dfn 1.2170 - id=single-animation-play-state><single-animation-play-state></dfn> = 1.2171 - running | paused</div> 1.2172 +<h2 class="no-num no-ref heading settled heading" id=property-index><span class=content> 1.2173 +Property index</span><a class=self-link href=#property-index></a></h2> 1.2174 +<div data-fill-with=property-index><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Canonical order<th scope=col>Computed value<tbody> 1.2175 +<tr><th scope=row><a data-property="">animation-name</a><td><single-animation-name>#<td>none<td>all elements, ::before and ::after pseudo-elements<td>none<td>N/A<td>visual<td>no<td>per grammar<td>As specified 1.2176 +<tr><th scope=row><a data-property="">animation-duration</a><td><time>#<td>0s<td>all elements, ::before and ::after pseudo-elements<td>no<td>N/A<td>visual<td>no<td>per grammar<td>As specified 1.2177 +<tr><th scope=row><a data-property="">animation-timing-function</a><td><single-timing-function>#<td>ease<td>all elements, ::before and ::after pseudo-elements<td>no<td>N/A<td>visual<td>no<td>per grammar<td>As specified 1.2178 +<tr><th scope=row><a data-property="">animation-iteration-count</a><td><single-animation-iteration-count>#<td>1<td>all elements, ::before and ::after pseudo-elements<td>no<td>N/A<td>visual<td>no<td>per grammar<td>As specified 1.2179 +<tr><th scope=row><a data-property="">animation-direction</a><td><single-animation-direction>#<td>normal<td>all elements, ::before and ::after pseudo-elements<td>no<td>N/A<td>visual<td>no<td>per grammar<td>As specified 1.2180 +<tr><th scope=row><a data-property="">animation-play-state</a><td><single-animation-play-state>#<td>running<td>all elements, ::before and ::after pseudo-elements<td>no<td>N/A<td>visual<td>no<td>per grammar<td>As specified 1.2181 +<tr><th scope=row><a data-property="">animation-delay</a><td><time>#<td>0s<td>all elements, ::before and ::after pseudo-elements<td>no<td>N/A<td>visual<td>no<td>per grammar<td>As specified 1.2182 +<tr><th scope=row><a data-property="">animation-fill-mode</a><td><single-animation-fill-mode>#<td>none<td>all elements, ::before and ::after pseudo-elements<td>no<td>N/A<td>visual<td>no<td>per grammar<td>As specified 1.2183 +<tr><th scope=row><a data-property="">animation</a><td><single-animation>#<td>see individual properties<td>all elements, ::before and ::after pseudo-elements<td>no<td>N/A<td>visual<td>no<td>per grammar<td>As specified</table></div> 1.2184 1.2185 - <h3 id=animation-delay-property><span class=secno>4.8. </span> The ‘<a 1.2186 - href="#animation-delay"><code class=property>animation-delay</code></a>’ 1.2187 - Property</h3> 1.2188 1.2189 - <p> The ‘<a href="#animation-delay"><code 1.2190 - class=property>animation-delay</code></a>’ property defines when the 1.2191 - animation will start. It allows an animation to begin execution some time 1.2192 - after it is applied. An ‘<a href="#animation-delay"><code 1.2193 - class=property>animation-delay</code></a>’ value of ‘<code 1.2194 - class=css>0s</code>’ means the animation will execute as soon as it is 1.2195 - applied. Otherwise, the value specifies an offset from the moment the 1.2196 - animation is applied, and the animation will delay execution by that 1.2197 - offset. 1.2198 - 1.2199 - <p> If the value for ‘<a href="#animation-delay"><code 1.2200 - class=property>animation-delay</code></a>’ is a negative time offset 1.2201 - then the animation will execute the moment it is applied, but will appear 1.2202 - to have begun execution at the specified offset. That is, the animation 1.2203 - will appear to begin part-way through its play cycle. In the case where an 1.2204 - animation has implied starting values and a negative ‘<a 1.2205 - href="#animation-delay"><code 1.2206 - class=property>animation-delay</code></a>’, the starting values are 1.2207 - taken from the moment the animation is applied. 1.2208 - 1.2209 - <table class=propdef> 1.2210 - <tbody> 1.2211 - <tr> 1.2212 - <th>Name: 1.2213 - 1.2214 - <td><dfn id=animation-delay>animation-delay</dfn> 1.2215 - 1.2216 - <tr> 1.2217 - <th><a href="#values">Value</a>: 1.2218 - 1.2219 - <td> <span><time></span> [, <span><time></span>]* 1.2220 - 1.2221 - <tr> 1.2222 - <th>Initial: 1.2223 - 1.2224 - <td>‘<code class=css>0s</code>’ 1.2225 - 1.2226 - <tr> 1.2227 - <th>Applies To: 1.2228 - 1.2229 - <td>all elements, ::before and ::after pseudo-elements 1.2230 - 1.2231 - <tr> 1.2232 - <th>Inherited: 1.2233 - 1.2234 - <td>no 1.2235 - 1.2236 - <tr> 1.2237 - <th>Animatable: 1.2238 - 1.2239 - <td>no 1.2240 - 1.2241 - <tr> 1.2242 - <th>Percentages: 1.2243 - 1.2244 - <td>N/A 1.2245 - 1.2246 - <tr> 1.2247 - <th>Media: 1.2248 - 1.2249 - <td>visual 1.2250 - 1.2251 - <tr> 1.2252 - <th>Computed Value: 1.2253 - 1.2254 - <td>as specified 1.2255 - 1.2256 - <tr> 1.2257 - <th>Canonical Order: 1.2258 - 1.2259 - <td><abbr title="follows order of property value definition">per 1.2260 - grammar</abbr> 1.2261 - </table> 1.2262 - 1.2263 - <h3 id=animation-fill-mode-property><span class=secno>4.9. </span> The 1.2264 - ‘<a href="#animation-fill-mode"><code 1.2265 - class=property>animation-fill-mode</code></a>’ Property</h3> 1.2266 - 1.2267 - <p> The ‘<a href="#animation-fill-mode"><code 1.2268 - class=property>animation-fill-mode</code></a>’ property defines what 1.2269 - values are applied by the animation outside the time it is executing. By 1.2270 - default, an animation will not affect property values between the time it 1.2271 - is applied (the ‘<a href="#animation-name"><code 1.2272 - class=property>animation-name</code></a>’ property is set on an element) 1.2273 - and the time it begins execution (which is determined by the ‘<a 1.2274 - href="#animation-delay"><code class=property>animation-delay</code></a>’ 1.2275 - property). Also, by default an animation does not affect property values 1.2276 - after the animation ends (determined by the ‘<a 1.2277 - href="#animation-duration"><code 1.2278 - class=property>animation-duration</code></a>’ property). The ‘<a 1.2279 - href="#animation-fill-mode"><code 1.2280 - class=property>animation-fill-mode</code></a>’ property can override 1.2281 - this behavior. 1.2282 - 1.2283 - <p> If the value for ‘<a href="#animation-fill-mode"><code 1.2284 - class=property>animation-fill-mode</code></a>’ is ‘<code 1.2285 - class=css>backwards</code>’, then the animation will apply the property 1.2286 - values defined in the keyframe that will start the first iteration of the 1.2287 - animation, during the period defined by ‘<a 1.2288 - href="#animation-delay"><code 1.2289 - class=property>animation-delay</code></a>’. These are either the values 1.2290 - of the ‘<code class=css>from</code>’ keyframe (when ‘<a 1.2291 - href="#animation-direction"><code 1.2292 - class=property>animation-direction</code></a>’ is ‘<a 1.2293 - href="#normal"><code class=css>normal</code></a>’ or ‘<a 1.2294 - href="#alternate"><code class=css>alternate</code></a>’) or those of the 1.2295 - ‘<code class=css>to</code>’ keyframe (when ‘<a 1.2296 - href="#animation-direction"><code 1.2297 - class=property>animation-direction</code></a>’ is ‘<a 1.2298 - href="#reverse"><code class=css>reverse</code></a>’ or ‘<a 1.2299 - href="#alternate-reverse"><code 1.2300 - class=css>alternate-reverse</code></a>’). 1.2301 - 1.2302 - <p> If the value for ‘<a href="#animation-fill-mode"><code 1.2303 - class=property>animation-fill-mode</code></a>’ is ‘<code 1.2304 - class=css>forwards</code>’, then after the animation ends (as determined 1.2305 - by its ‘<a href="#animation-iteration-count"><code 1.2306 - class=property>animation-iteration-count</code></a>’), the animation 1.2307 - will apply the property values for the time the animation ended. When 1.2308 - ‘<a href="#animation-iteration-count"><code 1.2309 - class=property>animation-iteration-count</code></a>’ is an integer 1.2310 - greater than zero, the values applied will be those for the end of the 1.2311 - last completed iteration of the animation (rather than the values for the 1.2312 - start of the iteration that would be next). When ‘<a 1.2313 - href="#animation-iteration-count"><code 1.2314 - class=property>animation-iteration-count</code></a>’ is zero, the values 1.2315 - applied will be those that would start the first iteration (just as when 1.2316 - ‘<a href="#animation-fill-mode"><code 1.2317 - class=property>animation-fill-mode</code></a>’ is ‘<code 1.2318 - class=css>backwards</code>’). 1.2319 - 1.2320 - <p> If the value for ‘<a href="#animation-fill-mode"><code 1.2321 - class=property>animation-fill-mode</code></a>’ is ‘<code 1.2322 - class=css>both</code>’, then the animation will follow the rules for 1.2323 - both ‘<code class=property>forwards</code>’ and ‘<code 1.2324 - class=property>backwards</code>’. That is, it will extend the animation 1.2325 - in both directions. 1.2326 - 1.2327 - <table class=propdef> 1.2328 - <tbody> 1.2329 - <tr> 1.2330 - <th>Name: 1.2331 - 1.2332 - <td><dfn id=animation-fill-mode>animation-fill-mode</dfn> 1.2333 - 1.2334 - <tr> 1.2335 - <th><a href="#values">Value</a>: 1.2336 - 1.2337 - <td><a 1.2338 - href="#single-animation-fill-mode"><single-animation-fill-mode></a> 1.2339 - [ ‘<code class=css>,</code>’ <a 1.2340 - href="#single-animation-fill-mode"><single-animation-fill-mode></a> 1.2341 - ]* 1.2342 - 1.2343 - <tr> 1.2344 - <th>Initial: 1.2345 - 1.2346 - <td>‘<code class=css>none</code>’ 1.2347 - 1.2348 - <tr> 1.2349 - <th>Applies To: 1.2350 - 1.2351 - <td>all elements, ::before and ::after pseudo-elements 1.2352 - 1.2353 - <tr> 1.2354 - <th>Inherited: 1.2355 - 1.2356 - <td>no 1.2357 - 1.2358 - <tr> 1.2359 - <th>Animatable: 1.2360 - 1.2361 - <td>no 1.2362 - 1.2363 - <tr> 1.2364 - <th>Percentages: 1.2365 - 1.2366 - <td>N/A 1.2367 - 1.2368 - <tr> 1.2369 - <th>Media: 1.2370 - 1.2371 - <td>visual 1.2372 - 1.2373 - <tr> 1.2374 - <th>Computed Value: 1.2375 - 1.2376 - <td>as specified 1.2377 - 1.2378 - <tr> 1.2379 - <th>Canonical Order: 1.2380 - 1.2381 - <td><abbr title="follows order of property value definition">per 1.2382 - grammar</abbr> 1.2383 - </table> 1.2384 - 1.2385 - <div class=prod> <dfn 1.2386 - id=single-animation-fill-mode><single-animation-fill-mode></dfn> = 1.2387 - none | forwards | backwards | both</div> 1.2388 - 1.2389 - <h3 id=animation-shorthand-property><span class=secno>4.10. </span> The 1.2390 - ‘<a href="#animation"><code class=property>animation</code></a>’ 1.2391 - Shorthand Property</h3> 1.2392 - 1.2393 - <p> The ‘<a href="#animation"><code 1.2394 - class=property>animation</code></a>’ shorthand property is a 1.2395 - comma-separated list of animation definitions. Each item in the list gives 1.2396 - one item of the value for all of the subproperties of the shorthand, which 1.2397 - are known as the <dfn id=animation-properties>animation properties</dfn>. 1.2398 - (See the definition of ‘<a href="#animation-name"><code 1.2399 - class=property>animation-name</code></a>’ for what happens when these 1.2400 - properties have lists of different lengths, a problem that cannot occur 1.2401 - when they are defined using only the ‘<a href="#animation"><code 1.2402 - class=property>animation</code></a>’ shorthand.) 1.2403 - 1.2404 - <table class=propdef> 1.2405 - <tbody> 1.2406 - <tr> 1.2407 - <th>Name: 1.2408 - 1.2409 - <td><dfn id=animation>animation</dfn> 1.2410 - 1.2411 - <tr> 1.2412 - <th><a href="#values">Value</a>: 1.2413 - 1.2414 - <td><a href="#single-animation"><single-animation></a> [ ‘<code 1.2415 - class=css>,</code>’ <a 1.2416 - href="#single-animation"><single-animation></a> ]* 1.2417 - 1.2418 - <tr> 1.2419 - <th>Initial: 1.2420 - 1.2421 - <td>see individual properties 1.2422 - 1.2423 - <tr> 1.2424 - <th>Applies To: 1.2425 - 1.2426 - <td>all elements, ::before and ::after pseudo-elements 1.2427 - 1.2428 - <tr> 1.2429 - <th>Inherited: 1.2430 - 1.2431 - <td>see individual properties 1.2432 - 1.2433 - <tr> 1.2434 - <th>Animatable: 1.2435 - 1.2436 - <td>no 1.2437 - 1.2438 - <tr> 1.2439 - <th>Percentages: 1.2440 - 1.2441 - <td>N/A 1.2442 - 1.2443 - <tr> 1.2444 - <th>Media: 1.2445 - 1.2446 - <td>visual 1.2447 - 1.2448 - <tr> 1.2449 - <th>Computed Value: 1.2450 - 1.2451 - <td>see individual properties 1.2452 - 1.2453 - <tr> 1.2454 - <th>Canonical Order: 1.2455 - 1.2456 - <td><abbr title="follows order of property value definition">per 1.2457 - grammar</abbr> 1.2458 - </table> 1.2459 - 1.2460 - <div class=prod> <dfn id=single-animation><single-animation></dfn> = 1.2461 - <span><time></span> || <single-animation-timing-function> || 1.2462 - <span><time></span> || <single-animation-iteration-count> || 1.2463 - <single-animation-direction> || <single-animation-fill-mode> 1.2464 - || <single-animation-play-state> || <single-animation-name></div> 1.2465 - 1.2466 - <p> Note that order is important within each animation definition: the 1.2467 - first value in each <single-animation> that can be parsed as a 1.2468 - <var><time></var> is assigned to the animation-duration, and the 1.2469 - second value in each <single-animation> that can be parsed as a 1.2470 - <var><time></var> is assigned to animation-delay. 1.2471 - 1.2472 - <p> Note that order is also important within each animation definition for 1.2473 - distinguishing <single-animation-name> values from other keywords. 1.2474 - When parsing, keywords that are valid for properties other than ‘<a 1.2475 - href="#animation-name"><code class=property>animation-name</code></a>’ 1.2476 - must be accepted for those properties rather than for ‘<a 1.2477 - href="#animation-name"><code class=property>animation-name</code></a>’. 1.2478 - Furthermore, when serializing, default values of other properties must be 1.2479 - output in at least the cases necessary to distinguish an ‘<a 1.2480 - href="#animation-name"><code class=property>animation-name</code></a>’ 1.2481 - that could be a value of another property, and may be output in additional 1.2482 - cases. <span class=example> For example, a value parsed from ‘<code 1.2483 - class=css>animation: 3s none backwards</code>’ (where ‘<a 1.2484 - href="#animation-fill-mode"><code 1.2485 - class=property>animation-fill-mode</code></a>’ is ‘<code 1.2486 - class=css>none</code>’ and ‘<a href="#animation-name"><code 1.2487 - class=property>animation-name</code></a>’ is ‘<code 1.2488 - class=css>backwards</code>’) must not be serialized as ‘<code 1.2489 - class=css>animation: 3s backwards</code>’ (where ‘<a 1.2490 - href="#animation-fill-mode"><code 1.2491 - class=property>animation-fill-mode</code></a>’ is ‘<code 1.2492 - class=css>backwards</code>’ and ‘<a href="#animation-name"><code 1.2493 - class=property>animation-name</code></a>’ is ‘<code 1.2494 - class=css>none</code>’). </span> 1.2495 - 1.2496 - <h2 id=animation-events><span class=secno>5. </span> Animation Events</h2> 1.2497 - 1.2498 - <p> Several animation related events are available through the <a 1.2499 - href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event 1.2500 - system</a>. The start and end of an animation, and the end of each 1.2501 - iteration of an animation, all generate DOM events. An element can have 1.2502 - multiple properties being animated simultaneously. This can occur either 1.2503 - with a single ‘<a href="#animation-name"><code 1.2504 - class=property>animation-name</code></a>’ value with keyframes 1.2505 - containing multiple properties, or with multiple ‘<a 1.2506 - href="#animation-name"><code class=property>animation-name</code></a>’ 1.2507 - values. For the purposes of events, each ‘<a 1.2508 - href="#animation-name"><code class=property>animation-name</code></a>’ 1.2509 - specifies a single animation. Therefore an event will be generated for 1.2510 - each ‘<a href="#animation-name"><code 1.2511 - class=property>animation-name</code></a>’ value and not necessarily for 1.2512 - each property being animated. 1.2513 - 1.2514 - <p> Any animation for which both a valid keyframe rule and a non-zero 1.2515 - duration are defined will run and generate events; this includes 1.2516 - animations with empty keyframe rules. 1.2517 - 1.2518 - <p> The time the animation has been running is sent with each event 1.2519 - generated. This allows the event handler to determine the current 1.2520 - iteration of a looping animation or the current position of an alternating 1.2521 - animation. This time does not include any time the animation was in the 1.2522 - ‘<code class=css>paused</code>’ play state. 1.2523 - 1.2524 - <h3 id=AnimationEvent-interface><span class=secno>5.1. </span> Interface <a 1.2525 - href="#animationevent"><code>AnimationEvent</code></a></h3> 1.2526 - 1.2527 - <p> The <dfn id=animationevent>AnimationEvent</dfn> interface provides 1.2528 - specific contextual information associated with Animation events. 1.2529 - 1.2530 - <h4 id=AnimationEvent-IDL><span class=secno>5.1.1. </span> IDL Definition</h4> 1.2531 - 1.2532 - <pre class=idl> 1.2533 -[Constructor(DOMString <var 1.2534 - title="">type</var>, optional <a 1.2535 - href="#AnimationEventInit"><i>AnimationEventInit</i></a> <var 1.2536 - title="">animationEventInitDict</var>)] 1.2537 -interface AnimationEvent : <a 1.2538 - class=external 1.2539 - href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#event">Event</a> { 1.2540 - readonly attribute DOMString <a 1.2541 - href="#AnimationEvent-animationName" 1.2542 - title=AnimationEvent-lengthComputable>animationName</a>; 1.2543 - readonly attribute float <a 1.2544 - href="#AnimationEvent-elapsedTime" 1.2545 - title=dom-ProgressEvent-loaded>elapsedTime</a>; 1.2546 - readonly attribute DOMString <a 1.2547 - href="#AnimationEvent-pseudoElement" 1.2548 - title=AnimationEvent-pseudoElement>pseudoElement</a>; 1.2549 -}; 1.2550 - 1.2551 -dictionary <dfn 1.2552 - id=AnimationEventInit>AnimationEventInit</dfn> : <a class=external 1.2553 - href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#eventinit">EventInit</a> { 1.2554 - DOMString <span 1.2555 - title=AnimationEventInit-animationName>animationName</span> = ""; 1.2556 - float <span 1.2557 - title=AnimationEventInit-loaded>elapsedTime</span> = 0.0; 1.2558 - DOMString <span 1.2559 - title=AnimationEventInit-pseudoElement>pseudoElement</span> = ""; 1.2560 -} 1.2561 - 1.2562 -</pre> 1.2563 - 1.2564 - <h4 id=AnimationEvent-attributes><span class=secno>5.1.2. </span> 1.2565 - Attributes</h4> 1.2566 - 1.2567 - <dl> 1.2568 - <dt><code><dfn id=AnimationEvent-animationName>animationName</dfn></code> 1.2569 - of type <code>DOMString</code>, readonly 1.2570 - 1.2571 - <dd> The value of the ‘<a href="#animation-name"><code 1.2572 - class=property>animation-name</code></a>’ property of the animation 1.2573 - that fired the event. 1.2574 - 1.2575 - <dt><code><dfn id=AnimationEvent-elapsedTime>elapsedTime</dfn></code> of 1.2576 - type <code>float</code>, readonly 1.2577 - 1.2578 - <dd> The amount of time the animation has been running, in seconds, when 1.2579 - this event fired, excluding any time the animation was paused. For an 1.2580 - "animationstart" event, the elapsedTime is zero unless there was a 1.2581 - negative value for ‘<a href="#animation-delay"><code 1.2582 - class=property>animation-delay</code></a>’, in which case the event 1.2583 - will be fired with an <a 1.2584 - href="#AnimationEvent-elapsedTime"><code>elapsedTime</code></a> of (-1 * 1.2585 - delay). 1.2586 - 1.2587 - <dt><code><dfn id=AnimationEvent-pseudoElement>pseudoElement</dfn></code> 1.2588 - of type <code>DOMString</code>, readonly 1.2589 - 1.2590 - <dd> The name (beginning with two colons) of the CSS pseudo-element on 1.2591 - which the animation runs (in which case the target of the event is that 1.2592 - pseudo-element's corresponding element), or the empty string if the 1.2593 - animation runs on an element (which means the target of the event is that 1.2594 - element). 1.2595 - </dl> 1.2596 - 1.2597 - <p> <code id=AnimationEvent-constructor>AnimationEvent(type, 1.2598 - animationEventInitDict)</code> is an <a class=external 1.2599 - href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#constructing-events">event 1.2600 - constructor</a>. 1.2601 - 1.2602 - <h3 id=AnimationEvent-types><span class=secno>5.2. </span> Types of <a 1.2603 - href="#animationevent"><code>AnimationEvent</code></a></h3> 1.2604 - 1.2605 - <p> The different types of Animation events that can occur are: 1.2606 - 1.2607 - <dl> 1.2608 - <dt><dfn id=animationstart>animationstart</dfn> 1.2609 - 1.2610 - <dd> The <a href="#animationstart"><code>animationstart</code></a> event 1.2611 - occurs at the start of the animation. If there is an ‘<a 1.2612 - href="#animation-delay"><code 1.2613 - class=property>animation-delay</code></a>’ then this event will fire 1.2614 - once the delay period has expired. A negative delay will cause the event 1.2615 - to fire with an <a 1.2616 - href="#AnimationEvent-elapsedTime"><code>elapsedTime</code></a> equal to 1.2617 - the absolute value of the delay. 1.2618 - <ul> 1.2619 - <li>Bubbles: Yes 1.2620 - 1.2621 - <li>Cancelable: No 1.2622 - 1.2623 - <li>Context Info: animationName, pseudoElement 1.2624 - </ul> 1.2625 - 1.2626 - <dt><dfn id=animationend>animationend</dfn> 1.2627 - 1.2628 - <dd> The <a href="#animationend"><code>animationend</code></a> event 1.2629 - occurs when the animation finishes. 1.2630 - <ul> 1.2631 - <li>Bubbles: Yes 1.2632 - 1.2633 - <li>Cancelable: No 1.2634 - 1.2635 - <li>Context Info: animationName, elapsedTime, pseudoElement 1.2636 - </ul> 1.2637 - 1.2638 - <dt><dfn id=animationiteration>animationiteration</dfn> 1.2639 - 1.2640 - <dd> The <a href="#animationiteration"><code>animationiteration</code></a> 1.2641 - event occurs at the end of each iteration of an animation, except when an 1.2642 - <a href="#animationend"><code>animationend</code></a> event would fire at 1.2643 - the same time. This means that this event does not occur for animations 1.2644 - with an iteration count of one or less. 1.2645 - <ul> 1.2646 - <li>Bubbles: Yes 1.2647 - 1.2648 - <li>Cancelable: No 1.2649 - 1.2650 - <li>Context Info: animationName, elapsedTime, pseudoElement 1.2651 - </ul> 1.2652 - </dl> 1.2653 - 1.2654 - <h2 id=dom-interfaces><span class=secno>6. </span> DOM Interfaces</h2> 1.2655 - 1.2656 - <p> CSS animation is exposed to the CSSOM through a pair of new interfaces 1.2657 - describing the keyframes. 1.2658 - 1.2659 - <h3 id=CSSRule-interface><span class=secno>6.1. </span> Interface <a 1.2660 - href="#cssrule"><code>CSSRule</code></a></h3> 1.2661 - 1.2662 - <p> The following 2 rule types are added to the <dfn 1.2663 - id=cssrule>CSSRule</dfn> interface. They provide identification for the 1.2664 - new keyframe and keyframes rules. 1.2665 - 1.2666 - <h4 id=CSSRule-IDL><span class=secno>6.1.1. </span> IDL Definition</h4> 1.2667 - 1.2668 - <pre class=idl> 1.2669 -interface CSSRule { 1.2670 - ... 1.2671 - const unsigned short KEYFRAMES_RULE = 7; 1.2672 - const unsigned short KEYFRAME_RULE = 8; 1.2673 - ... 1.2674 -};</pre> 1.2675 - 1.2676 - <h3 id=CSSKeyframeRule-interface><span class=secno>6.2. </span> Interface 1.2677 - <a href="#csskeyframerule"><code>CSSKeyframeRule</code></a></h3> 1.2678 - 1.2679 - <p> The <dfn id=csskeyframerule>CSSKeyframeRule</dfn> interface represents 1.2680 - the style rule for a single key. 1.2681 - 1.2682 - <h4 id=CSSKeyframeRule-IDL><span class=secno>6.2.1. </span> IDL Definition</h4> 1.2683 - 1.2684 - <pre class=idl> 1.2685 -interface CSSKeyframeRule : CSSRule { 1.2686 - attribute DOMString keyText; 1.2687 - readonly attribute CSSStyleDeclaration style; 1.2688 -};</pre> 1.2689 - 1.2690 - <h4 id=CSSKeyframeRule-attributes><span class=secno>6.2.2. </span> 1.2691 - Attributes</h4> 1.2692 - 1.2693 - <dl> 1.2694 - <dt><code><dfn id=CSSKeyframeRule-keyText>keyText</dfn></code> of type 1.2695 - <code>DOMString</code> 1.2696 - 1.2697 - <dd> This attribute represents the keyframe selector as a comma-separated 1.2698 - list of percentage values. The ‘<code class=css>from</code>’ and 1.2699 - ‘<code class=css>to</code>’ keywords map to ‘<code 1.2700 - class=css>0%</code>’ and ‘<code class=css>100%</code>’, 1.2701 - respectively. 1.2702 - 1.2703 - <dt><code><dfn id=CSSKeyframeRule-style>style</dfn></code> of type 1.2704 - <code>CSSStyleDeclaration</code> 1.2705 - 1.2706 - <dd> This attribute represents the style associated with this keyframe. 1.2707 - </dl> 1.2708 - 1.2709 - <h3 id=CSSKeyframesRule-interface><span class=secno>6.3. </span> Interface 1.2710 - <a href="#csskeyframesrule"><code>CSSKeyframesRule</code></a></h3> 1.2711 - 1.2712 - <p> The <dfn id=csskeyframesrule>CSSKeyframesRule</dfn> interface 1.2713 - represents a complete set of keyframes for a single animation. 1.2714 - 1.2715 - <h4 id=CSSKeyframesRule-IDL><span class=secno>6.3.1. </span> IDL Definition</h4> 1.2716 - 1.2717 - <pre class=idl> 1.2718 -interface CSSKeyframesRule : CSSRule { 1.2719 - attribute DOMString name; 1.2720 - readonly attribute CSSRuleList cssRules; 1.2721 - 1.2722 - void appendRule(in DOMString rule); 1.2723 - void deleteRule(in DOMString key); 1.2724 - CSSKeyframeRule findRule(in DOMString key); 1.2725 -};</pre> 1.2726 - 1.2727 - <h4 id=CSSKeyframesRule-attributes><span class=secno>6.3.2. </span> 1.2728 - Attributes</h4> 1.2729 - 1.2730 - <dl> 1.2731 - <dt><code><dfn id=CSSKeyframesRule-name>name</dfn></code> of type 1.2732 - <code>DOMString</code> 1.2733 - 1.2734 - <dd> This attribute is the name of the keyframes, used by the ‘<a 1.2735 - href="#animation-name"><code class=property>animation-name</code></a>’ 1.2736 - property.<br> 1.2737 - 1.2738 - <dt><code><dfn id=CSSKeyframesRules-cssRules>cssRules</dfn></code> of type 1.2739 - <code>CSSRuleList</code> 1.2740 - 1.2741 - <dd> This attribute gives access to the keyframes in the list. 1.2742 - </dl> 1.2743 - 1.2744 - <h4 id=CSSKeyframesRule-appendRule><span class=secno>6.3.3. </span> The <a 1.2745 - href="#appendrule"><code>appendRule</code></a> method</h4> 1.2746 - 1.2747 - <p> The <dfn id=appendrule>appendRule</dfn> method appends the passed 1.2748 - CSSKeyframeRule into the list at the passed key. 1.2749 - 1.2750 - <p> Parameters: 1.2751 - 1.2752 - <dl> 1.2753 - <dt><code>rule</code> of type <code>DOMString</code> 1.2754 - 1.2755 - <dd> The rule to be appended, expressed in the same syntax as one entry in 1.2756 - the ‘<code class=css>@keyframes</code>’ rule. 1.2757 - </dl> 1.2758 - 1.2759 - <p> No Return Value 1.2760 - 1.2761 - <p> No Exceptions 1.2762 - 1.2763 - <h4 id=CSSKeyframesRules-deleteRule><span class=secno>6.3.4. </span> The <a 1.2764 - href="#deleterule"><code>deleteRule</code></a> method</h4> 1.2765 - 1.2766 - <p> The <dfn id=deleterule>deleteRule</dfn> method deletes the 1.2767 - CSSKeyframeRule with the passed key. If a rule with this key does not 1.2768 - exist, the method does nothing. 1.2769 - 1.2770 - <p> Parameters: 1.2771 - 1.2772 - <dl> 1.2773 - <dt><code>key</code> of type <code>DOMString</code> 1.2774 - 1.2775 - <dd> The key which describes the rule to be deleted. The key must resolve 1.2776 - to a number between 0 and 1, or the rule is ignored. 1.2777 - </dl> 1.2778 - 1.2779 - <p> No Return Value 1.2780 - 1.2781 - <p> No Exceptions 1.2782 - 1.2783 - <h4 id=CSSKeyframesRule-findRule><span class=secno>6.3.5. </span> The 1.2784 - <code>findRule</code> method</h4> 1.2785 - 1.2786 - <p> The <code>findRule</code> method returns the rule with a key matching 1.2787 - the passed key. If no such rule exists, a null value is returned. 1.2788 - 1.2789 - <p> Parameters: 1.2790 - 1.2791 - <dl> 1.2792 - <dt><code>key</code> of type <code>DOMString</code> 1.2793 - 1.2794 - <dd> The key which described the rule to find. The key must resolve to a 1.2795 - number between 0 and 1, or the rule is ignored. 1.2796 - </dl> 1.2797 - 1.2798 - <p> Return Value: 1.2799 - 1.2800 - <dl> 1.2801 - <dt><a href="#csskeyframerule"><code>CSSKeyframeRule</code></a> 1.2802 - 1.2803 - <dd> The found rule. 1.2804 - </dl> 1.2805 - 1.2806 - <p> No Exceptions 1.2807 - 1.2808 - <h2 id=acknowledgments><span class=secno>7. </span>Acknowledgments</h2> 1.2809 - 1.2810 - <p>Thanks especially to the feedback from Tab Atkins, Carine Bournez, Anne 1.2811 - van Kesteren, Øyvind Stenhaug, Estelle Weyl, and all the rest of the <a 1.2812 - href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> 1.2813 - community. 1.2814 - 1.2815 - <h2 id=references><span class=secno>8. </span>References</h2> 1.2816 - 1.2817 - <h3 class=no-num id=normative-references>Normative references</h3> 1.2818 - <!--begin-normative--> 1.2819 - <!-- Sorted by label --> 1.2820 - 1.2821 - <dl class=bibliography><!----> 1.2822 - 1.2823 - <dt id=CSS21>[CSS21] 1.2824 - 1.2825 - <dd>Bert Bos; et al. <a 1.2826 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 1.2827 - Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 1.2828 - 2011. W3C Recommendation. URL: <a 1.2829 - href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 1.2830 - </dd> 1.2831 - <!----> 1.2832 - 1.2833 - <dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS] 1.2834 - 1.2835 - <dd>Dean Jackson; et al. <a 1.2836 - href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/"><cite>CSS 1.2837 - Transitions.</cite></a> 19 November 2013. W3C Working Draft. (Work in 1.2838 - progress.) URL: <a 1.2839 - href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/">http://www.w3.org/TR/2013/WD-css3-transitions-20131119/</a> 1.2840 - </dd> 1.2841 - <!----> 1.2842 - </dl> 1.2843 - <!--end-normative--> 1.2844 - 1.2845 - <h3 class=no-num id=other-references>Other references</h3> 1.2846 - <!--begin-informative--> 1.2847 - <!-- Sorted by label --> 1.2848 - 1.2849 - <dl class=bibliography><!----> 1.2850 - 1.2851 - <dt id=CSS3CASCADE>[CSS3CASCADE] 1.2852 - 1.2853 - <dd>Håkon Wium Lie; fantasai; Tab Atkins Jr. <a 1.2854 - href="http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/"><cite>CSS 1.2855 - Cascading and Inheritance Level 3.</cite></a> 3 October 2013. W3C 1.2856 - Candidate Recommendation. (Work in progress.) URL: <a 1.2857 - href="http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/">http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/</a> 1.2858 - </dd> 1.2859 - <!----> 1.2860 - 1.2861 - <dt id=CSS3VAL>[CSS3VAL] 1.2862 - 1.2863 - <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a 1.2864 - href="http://www.w3.org/TR/2013/CR-css3-values-20130730/"><cite>CSS 1.2865 - Values and Units Module Level 3.</cite></a> 30 July 2013. W3C Candidate 1.2866 - Recommendation. (Work in progress.) URL: <a 1.2867 - href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">http://www.w3.org/TR/2013/CR-css3-values-20130730/</a> 1.2868 - </dd> 1.2869 - <!----> 1.2870 - 1.2871 - <dt id=WCAG20>[WCAG20] 1.2872 - 1.2873 - <dd>Ben Caldwell; et al. <a 1.2874 - href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/"><cite>Web Content 1.2875 - Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C 1.2876 - Recommendation. URL: <a 1.2877 - href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a> 1.2878 - </dd> 1.2879 - <!----> 1.2880 - </dl> 1.2881 - <!--end-informative--> 1.2882 - 1.2883 - <h2 class=no-num id=property-index>Property index</h2> 1.2884 - <!--begin-properties--> 1.2885 - 1.2886 - <table class=proptable> 1.2887 - <thead> 1.2888 - <tr> 1.2889 - <th>Property 1.2890 - 1.2891 - <th>Values 1.2892 - 1.2893 - <th>Initial 1.2894 - 1.2895 - <th>Applies to 1.2896 - 1.2897 - <th>Inh. 1.2898 - 1.2899 - <th>Percentages 1.2900 - 1.2901 - <th>Media 1.2902 - 1.2903 - <tbody> 1.2904 - <tr> 1.2905 - <th><a class=property href="#animation">animation</a> 1.2906 - 1.2907 - <td><single-animation> [ ‘,’ <single-animation> ]* 1.2908 - 1.2909 - <td>see individual properties 1.2910 - 1.2911 - <td> 1.2912 - 1.2913 - <td>see individual properties 1.2914 - 1.2915 - <td>N/A 1.2916 - 1.2917 - <td>visual 1.2918 - 1.2919 - <tr> 1.2920 - <th><a class=property href="#animation-delay">animation-delay</a> 1.2921 - 1.2922 - <td><time> [, <time>]* 1.2923 - 1.2924 - <td>‘0s’ 1.2925 - 1.2926 - <td> 1.2927 - 1.2928 - <td>no 1.2929 - 1.2930 - <td>N/A 1.2931 - 1.2932 - <td>visual 1.2933 - 1.2934 - <tr> 1.2935 - <th><a class=property 1.2936 - href="#animation-direction">animation-direction</a> 1.2937 - 1.2938 - <td><single-animation-direction> [ ‘,’ 1.2939 - <single-animation-direction> ]* 1.2940 - 1.2941 - <td>‘normal’ 1.2942 - 1.2943 - <td> 1.2944 - 1.2945 - <td>no 1.2946 - 1.2947 - <td>N/A 1.2948 - 1.2949 - <td>visual 1.2950 - 1.2951 - <tr> 1.2952 - <th><a class=property href="#animation-duration">animation-duration</a> 1.2953 - 1.2954 - <td><time> [, <time>]* 1.2955 - 1.2956 - <td>‘0s’ 1.2957 - 1.2958 - <td> 1.2959 - 1.2960 - <td>no 1.2961 - 1.2962 - <td>N/A 1.2963 - 1.2964 - <td>visual 1.2965 - 1.2966 - <tr> 1.2967 - <th><a class=property 1.2968 - href="#animation-fill-mode">animation-fill-mode</a> 1.2969 - 1.2970 - <td><single-animation-fill-mode> [ ‘,’ 1.2971 - <single-animation-fill-mode> ]* 1.2972 - 1.2973 - <td>‘none’ 1.2974 - 1.2975 - <td> 1.2976 - 1.2977 - <td>no 1.2978 - 1.2979 - <td>N/A 1.2980 - 1.2981 - <td>visual 1.2982 - 1.2983 - <tr> 1.2984 - <th><a class=property 1.2985 - href="#animation-iteration-count">animation-iteration-count</a> 1.2986 - 1.2987 - <td><single-animation-iteration-count> [ ‘,’ 1.2988 - <single-animation-iteration-count> ]* 1.2989 - 1.2990 - <td>‘1’ 1.2991 - 1.2992 - <td> 1.2993 - 1.2994 - <td>no 1.2995 - 1.2996 - <td>N/A 1.2997 - 1.2998 - <td>visual 1.2999 - 1.3000 - <tr> 1.3001 - <th><a class=property href="#animation-name">animation-name</a> 1.3002 - 1.3003 - <td><single-animation-name> [ ‘,’ 1.3004 - <single-animation-name> ]* 1.3005 - 1.3006 - <td>‘none’ 1.3007 - 1.3008 - <td> 1.3009 - 1.3010 - <td>no 1.3011 - 1.3012 - <td>N/A 1.3013 - 1.3014 - <td>visual 1.3015 - 1.3016 - <tr> 1.3017 - <th><a class=property 1.3018 - href="#animation-play-state">animation-play-state</a> 1.3019 - 1.3020 - <td><single-animation-play-state> [ ‘,’ 1.3021 - <single-animation-play-state> ]* 1.3022 - 1.3023 - <td>‘running’ 1.3024 - 1.3025 - <td> 1.3026 - 1.3027 - <td>no 1.3028 - 1.3029 - <td>N/A 1.3030 - 1.3031 - <td>visual 1.3032 - 1.3033 - <tr> 1.3034 - <th><a class=property 1.3035 - href="#animation-timing-function">animation-timing-function</a> 1.3036 - 1.3037 - <td><single-timing-function> [ ‘,’ 1.3038 - <single-timing-function> ]* 1.3039 - 1.3040 - <td>‘ease’ 1.3041 - 1.3042 - <td> 1.3043 - 1.3044 - <td>no 1.3045 - 1.3046 - <td>N/A 1.3047 - 1.3048 - <td>visual 1.3049 - </table> 1.3050 - <!--end-properties--> 1.3051 - 1.3052 - <h2 class=no-num id=index>Index</h2> 1.3053 - <!--begin-index--> 1.3054 - 1.3055 - <ul class=indexlist> 1.3056 - <li>alternate, <a href="#alternate" 1.3057 - title="section 4.6."><strong>4.6.</strong></a> 1.3058 - 1.3059 - <li>alternate-reverse, <a href="#alternate-reverse" 1.3060 - title="section 4.6."><strong>4.6.</strong></a> 1.3061 - 1.3062 - <li>animation, <a href="#animation" 1.3063 - title="section 4.10."><strong>4.10.</strong></a> 1.3064 - 1.3065 - <li>animation-delay, <a href="#animation-delay" 1.3066 - title="section 4.8."><strong>4.8.</strong></a> 1.3067 - 1.3068 - <li>animation-direction, <a href="#animation-direction" 1.3069 - title="section 4.6."><strong>4.6.</strong></a> 1.3070 - 1.3071 - <li>animation-duration, <a href="#animation-duration" 1.3072 - title="section 4.3."><strong>4.3.</strong></a> 1.3073 - 1.3074 - <li>animationend, <a href="#animationend" 1.3075 - title="section 5.2."><strong>5.2.</strong></a> 1.3076 - 1.3077 - <li>AnimationEvent, <a href="#animationevent" 1.3078 - title="section 5.1."><strong>5.1.</strong></a> 1.3079 - 1.3080 - <li>AnimationEventInit, <a href="#AnimationEventInit" 1.3081 - title="section 5.1.1."><strong>5.1.1.</strong></a> 1.3082 - 1.3083 - <li>animation-fill-mode, <a href="#animation-fill-mode" 1.3084 - title="section 4.9."><strong>4.9.</strong></a> 1.3085 - 1.3086 - <li>animationiteration, <a href="#animationiteration" 1.3087 - title="section 5.2."><strong>5.2.</strong></a> 1.3088 - 1.3089 - <li>animation-iteration-count, <a href="#animation-iteration-count" 1.3090 - title="section 4.5."><strong>4.5.</strong></a> 1.3091 - 1.3092 - <li>animationName, <a href="#AnimationEvent-animationName" 1.3093 - title="section 5.1.2."><strong>5.1.2.</strong></a> 1.3094 - 1.3095 - <li>animation-name, <a href="#animation-name" 1.3096 - title="section 4.2."><strong>4.2.</strong></a> 1.3097 - 1.3098 - <li>animation-play-state, <a href="#animation-play-state" 1.3099 - title="section 4.7."><strong>4.7.</strong></a> 1.3100 - 1.3101 - <li>animation properties, <a href="#animation-properties" 1.3102 - title="section 4.10."><strong>4.10.</strong></a> 1.3103 - 1.3104 - <li>animationstart, <a href="#animationstart" 1.3105 - title="section 5.2."><strong>5.2.</strong></a> 1.3106 - 1.3107 - <li>animation-timing-function, <a href="#animation-timing-function" 1.3108 - title="section 4.4."><strong>4.4.</strong></a> 1.3109 - 1.3110 - <li>appendRule, <a href="#appendrule" 1.3111 - title="section 6.3.3."><strong>6.3.3.</strong></a> 1.3112 - 1.3113 - <li>CSSKeyframeRule, <a href="#csskeyframerule" 1.3114 - title="section 6.2."><strong>6.2.</strong></a> 1.3115 - 1.3116 - <li>CSSKeyframesRule, <a href="#csskeyframesrule" 1.3117 - title="section 6.3."><strong>6.3.</strong></a> 1.3118 - 1.3119 - <li>CSSRule, <a href="#cssrule" 1.3120 - title="section 6.1."><strong>6.1.</strong></a> 1.3121 - 1.3122 - <li>cssRules, <a href="#CSSKeyframesRules-cssRules" 1.3123 - title="section 6.3.2."><strong>6.3.2.</strong></a> 1.3124 - 1.3125 - <li>defined animations, <a href="#defined-animations" 1.3126 - title="section 1."><strong>1.</strong></a> 1.3127 - 1.3128 - <li>deleteRule, <a href="#deleterule" 1.3129 - title="section 6.3.4."><strong>6.3.4.</strong></a> 1.3130 - 1.3131 - <li>elapsedTime, <a href="#AnimationEvent-elapsedTime" 1.3132 - title="section 5.1.2."><strong>5.1.2.</strong></a> 1.3133 - 1.3134 - <li>keyframe declaration block, <a href="#keyframe-declaration-block" 1.3135 - title="section 4."><strong>4.</strong></a> 1.3136 - 1.3137 - <li>keyframe selector, <a href="#keyframe-selector" 1.3138 - title="section 4."><strong>4.</strong></a> 1.3139 - 1.3140 - <li>keyText, <a href="#CSSKeyframeRule-keyText" 1.3141 - title="section 6.2.2."><strong>6.2.2.</strong></a> 1.3142 - 1.3143 - <li>name, <a href="#CSSKeyframesRule-name" 1.3144 - title="section 6.3.2."><strong>6.3.2.</strong></a> 1.3145 - 1.3146 - <li>normal, <a href="#normal" 1.3147 - title="section 4.6."><strong>4.6.</strong></a> 1.3148 - 1.3149 - <li>pseudoElement, <a href="#AnimationEvent-pseudoElement" 1.3150 - title="section 5.1.2."><strong>5.1.2.</strong></a> 1.3151 - 1.3152 - <li>reverse, <a href="#reverse" 1.3153 - title="section 4.6."><strong>4.6.</strong></a> 1.3154 - 1.3155 - <li><single-animation>, <a href="#single-animation" 1.3156 - title="section 4.10."><strong>4.10.</strong></a> 1.3157 - 1.3158 - <li><single-animation-direction>, <a 1.3159 - href="#single-animation-direction" 1.3160 - title="section 4.6."><strong>4.6.</strong></a> 1.3161 - 1.3162 - <li><single-animation-fill-mode>, <a 1.3163 - href="#single-animation-fill-mode" 1.3164 - title="section 4.9."><strong>4.9.</strong></a> 1.3165 - 1.3166 - <li><single-animation-iteration-count>, <a 1.3167 - href="#single-animation-iteration-count" 1.3168 - title="section 4.5."><strong>4.5.</strong></a> 1.3169 - 1.3170 - <li><single-animation-name>, <a href="#single-animation-name" 1.3171 - title="section 4.2."><strong>4.2.</strong></a> 1.3172 - 1.3173 - <li><single-animation-play-state>, <a 1.3174 - href="#single-animation-play-state" 1.3175 - title="section 4.7."><strong>4.7.</strong></a> 1.3176 - 1.3177 - <li>style, <a href="#CSSKeyframeRule-style" 1.3178 - title="section 6.2.2."><strong>6.2.2.</strong></a> 1.3179 - </ul> 1.3180 - <!--end-index--> 1.3181 -</html> 1.3182 -<!-- Keep this comment at the end of the file 1.3183 -Local variables: 1.3184 -mode: sgml 1.3185 -sgml-declaration:"~/SGML/HTML4.decl" 1.3186 -sgml-default-doctype-name:"html" 1.3187 -sgml-minimize-attributes:t 1.3188 -sgml-nofill-elements:("pre" "style" "br") 1.3189 -sgml-live-element-indicator:t 1.3190 -sgml-omittag:nil 1.3191 -sgml-shorttag:nil 1.3192 -sgml-namecase-general:t 1.3193 -sgml-general-insert-case:lower 1.3194 -sgml-always-quote-attributes:t 1.3195 -sgml-indent-step:nil 1.3196 -sgml-indent-data:t 1.3197 -sgml-parent-document:nil 1.3198 -sgml-exposed-tags:nil 1.3199 -sgml-local-catalogs:nil 1.3200 -sgml-local-ecat-files:nil 1.3201 -End: 1.3202 ---> 1.3203 +</ul> 1.3204 \ No newline at end of file
2.1 --- a/css-animations/Overview.src.html Sat Apr 05 10:59:13 2014 -0700 2.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 2.3 @@ -1,1485 +0,0 @@ 2.4 -<!DOCTYPE html> 2.5 -<html lang="en"> 2.6 -<head> 2.7 - <title>CSS Animations</title> 2.8 - <script src='http://test.csswg.org/harness/annotate.js#css-animations-1_dev' type='text/javascript' defer></script> 2.9 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 2.10 - <link rel="stylesheet" type="text/css" href="../default.css"> 2.11 - <style type="text/css"> 2.12 - div.prod { margin: 1em 2em; } 2.13 - </style> 2.14 - <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"> 2.15 -</head> 2.16 - 2.17 -<body> 2.18 - 2.19 -<div class="head"> 2.20 -<!--logo--> 2.21 - 2.22 -<h1>CSS Animations</h1> 2.23 - 2.24 -<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> 2.25 -<dl> 2.26 - <dt>This version: 2.27 - <dd><a href="[VERSION]">[VERSION]</a> 2.28 - <dt>Latest version: 2.29 - <dd><a 2.30 - href="http://www.w3.org/TR/css3-animations/">[LATEST]</a> 2.31 - <dt>Editor's draft: 2.32 - <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> 2.33 - (<a href="https://dvcs.w3.org/hg/csswg/log/tip/css-animations/Overview.src.html">change log</a>, 2.34 - <a href="https://dvcs.w3.org/hg/csswg/log/tip/css3-animations/Overview.src.html">older change log</a>) 2.35 - <dt>Previous version: 2.36 - <dd><a href="http://www.w3.org/TR/2012/WD-css3-animations-20130219/"> 2.37 - http://www.w3.org/TR/2012/WD-css3-animations-20130219/</a> 2.38 - <dt id="editors-list">Editors: 2.39 - <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a 2.40 - href="http://www.apple.com/">Apple Inc</a>) 2.41 - <dd><a href="mailto:ratan@microsoft.com">Rossen Atanassov</a> 2.42 - (<a class=org href="http://www.microsoft.com/">Microsoft</a>) 2.43 - <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a> 2.44 - (<a class=org href="http://www.mozilla.org/">Mozilla</a>) 2.45 - 2.46 - <dt>Former editors: 2.47 - <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a 2.48 - href="http://www.apple.com/">Apple Inc</a>) 2.49 - <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a 2.50 - href="http://www.apple.com/">Apple Inc</a>) 2.51 - <dd>Sylvain Galineau, Microsoft 2.52 - 2.53 - <dt>Issues list: 2.54 - <dd>In Bugzilla: 2.55 - <a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Animations&resolution=---&status_whiteboard=defer%20to%20level%202&status_whiteboard_type=notregexp">for this level</a>, 2.56 - <a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Animations&resolution=---">for all levels</a> 2.57 - <dd>In Document: <a href="#issues-to-edit">list of pending edits</a> 2.58 - 2.59 - <dt>Feedback:</dt> 2.60 - <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-animations%5D%20feedback" 2.61 - >www-style@w3.org</a> 2.62 - with subject line “<kbd>[css-animations] 2.63 - <var>… message topic …</var></kbd>” 2.64 - (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/" 2.65 - >archives</a>) 2.66 - 2.67 - <dt>Test suite: 2.68 - <dd><a href="http://test.csswg.org/suites/css-animations-1/nightly-unstable/">http://test.csswg.org/suites/css-animations-1/nightly-unstable/</a> 2.69 -</dl> 2.70 - 2.71 -<!--copyright--> 2.72 - 2.73 -<hr title="Separator for header"> 2.74 -</div> 2.75 - 2.76 -<h2 class="no-num no-toc" id="abstract"> 2.77 -Abstract</h2> 2.78 - 2.79 - <p> 2.80 - This CSS module describes a way for authors to animate the values of CSS properties over time, 2.81 - using keyframes. 2.82 - The behavior of these keyframe animations can be controlled by specifying their duration, 2.83 - number of repeats, 2.84 - and repeating behavior. 2.85 - 2.86 - 2.87 -<h2 class="no-num no-toc" id="status"> 2.88 -Status of this document</h2> 2.89 -<!--status--> 2.90 - 2.91 -<h3 class="no-num no-toc" id="issues-to-edit"> 2.92 -Working Group Resolutions that still need to be edited</h3> 2.93 - 2.94 -<p>The editors are currently behind on editing this spec. The following 2.95 -working group resolutions still need to be edited in:</p> 2.96 - 2.97 -<ul> 2.98 - <li> 2.99 - <a href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0261.html">2012-10-29 minutes</a> 2.100 - <ul> 2.101 - <li>Change the animation properties to be dynamically changeable</li> 2.102 - <li>@keyframes can be dynamically changed</li> 2.103 - <li>When you encounter duplicate animations names, last one wins.</li> 2.104 - <li>Make *animations* transition *all* properties. Unless otherwise specified, discrete properties take their starting values below 50% timing function progress, and end values above 50% timing function progress.</li> 2.105 - </ul> 2.106 - </li> 2.107 - <li> 2.108 - <a href="http://lists.w3.org/Archives/Public/www-style/2012Dec/0188.html">2012-12-12 minutes</a> and <a href="http://lists.w3.org/Archives/Public/www-style/2012Dec/0268.html">intermediate comments</a> and <a href="http://lists.w3.org/Archives/Public/www-style/2012Dec/0330.html">2012-12-19 minutes</a> 2.109 - <ul> 2.110 - <li>??? Does anything still need to be done for these?</li> 2.111 - </ul> 2.112 - </li> 2.113 - <li> 2.114 - <a href="http://lists.w3.org/Archives/Public/www-style/2013Feb/0572.html">2013-02-20 minutes</a> 2.115 - <ul> 2.116 - <li>Øyvind's clarification accepted 2.117 - <li>keyframe rules cascade 2.118 - <li>mark pseudoElement at-risk 2.119 - </ul> 2.120 - </li> 2.121 - <li> 2.122 - <a href="http://lists.w3.org/Archives/Public/www-style/2013May/0783.html">2013-05-30 minutes</a> 2.123 - <ul> 2.124 - <li>expectations on animations in non-interactive media</li> 2.125 - </ul> 2.126 - </li> 2.127 - <li> 2.128 - <a href="http://lists.w3.org/Archives/Public/www-style/2014Jan/0606.html">2014-01-27 minutes</a> 2.129 - <ul> 2.130 - <li>remove text about waiting for document load 2.131 - </ul> 2.132 - </li> 2.133 -</ul> 2.134 - 2.135 - 2.136 -<h2 class="no-num no-toc" id="contents"> 2.137 -Table of contents</h2> 2.138 -<!--toc--> 2.139 - 2.140 - 2.141 -<h2 id="introduction"> 2.142 -Introduction</h2> 2.143 - 2.144 - <p><em>This section is not normative.</em> 2.145 - 2.146 - <p> 2.147 - CSS Transitions [[CSS3-TRANSITIONS]] 2.148 - provide a way to interpolate CSS property values 2.149 - when they change as a result of underlying property changes. 2.150 - This provides an easy way to do simple animation, 2.151 - but the start and end states of the animation are controlled by the existing property values, 2.152 - and transitions provide little control to the author on how the animation progresses. 2.153 - 2.154 - <p> 2.155 - This proposal introduces <dfn>defined animations</dfn>, 2.156 - in which the author can specify the changes in CSS properties over time as a set of keyframes. 2.157 - Animations are similar to transitions 2.158 - in that they change the presentational value of CSS properties over time. 2.159 - The principal difference is that 2.160 - while transitions trigger <em>implicitly</em> when property values change, 2.161 - animations are <em>explicitly</em> executed when the animation properties are applied. 2.162 - Because of this, 2.163 - animations require explicit values for the properties being animated. 2.164 - These values are specified using animation keyframes, described below. 2.165 - 2.166 - <p> 2.167 - Many aspects of the animation can be controlled, 2.168 - including how many times the animation iterates, 2.169 - whether or not it alternates between the begin and end values, 2.170 - and whether or not the animation should be running or paused. 2.171 - An animation can also delay its start time. 2.172 - 2.173 -<h2 id="values"> 2.174 -Values</h2> 2.175 - 2.176 - <p> 2.177 - This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS21]]. 2.178 - Value types not defined in this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. 2.179 - Other CSS modules may expand the definitions of these value types: 2.180 - for example [[CSS3VAL]], when combined with this module, 2.181 - expands the definition of the <var><length></var> value type as used in this specification. 2.182 - 2.183 - <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a href="http://dev.w3.org/csswg/css3-values/#common-keywords">''initial''</a> and <a href="http://dev.w3.org/csswg/css3-values/#common-keywords">''inherit''</a> keyword as their property value. For readability it has not been repeated explicitly. 2.184 - 2.185 - 2.186 -<h2 id="animations"> 2.187 -Animations</h2> 2.188 - 2.189 - <p> 2.190 - CSS Animations affect computed property values. 2.191 - This effect happens by adding a specified value 2.192 - to the CSS cascade ([[CSS3CASCADE]]) 2.193 - (at the level for CSS Animations) 2.194 - that will produce the correct computed value for 2.195 - the current state of the animation. 2.196 - As defined in [[CSS3CASCADE]], 2.197 - animations override all normal rules, but are overridden by 2.198 - !important rules. 2.199 - 2.200 - <p> 2.201 - If at one point in time there are multiple animations specifying behavior for the same property, 2.202 - the animation whose name occurs last in the value of 'animation-name' 2.203 - will override the other animations at that point. 2.204 - 2.205 - 2.206 - <p> 2.207 - An animation does not affect the computed value before the application of the animation, 2.208 - before the animation delay has expired, 2.209 - and after the end of the animation. 2.210 - 2.211 - 2.212 - <div class="figure"> 2.213 - <img src="sandwich.png" alt=""> 2.214 - 2.215 - <p class="caption"> 2.216 - Computation of animated property values 2.217 - </div> 2.218 - 2.219 - <p> 2.220 - The diagram above shows how property values are computed. 2.221 - The intrinsic style is shown at the top of the diagram. 2.222 - The computed value is derived from intrinsic style 2.223 - at the times when an animation is not running 2.224 - and also when an animation is delayed 2.225 - (see below for specification of animation delay). 2.226 - During an animation, 2.227 - the computed style is derived from the animated value. 2.228 - 2.229 - 2.230 - <p> 2.231 - The start time of an animation is the latter of two moments: 2.232 - the time at which the style is resolved that specifies the animation, 2.233 - or the time the document's load event is fired. 2.234 - Therefore, an animation specified in the document style sheet 2.235 - will begin at the document load. 2.236 - An animation specified on an element by modifying the style after the document has loaded 2.237 - will start when the style is resolved. 2.238 - That may be immediately in the case of a pseudo style rule such as hover, 2.239 - or may be when the scripting engine returns control to the browser 2.240 - (in the case of style applied by script). 2.241 - 2.242 - 2.243 - <p> 2.244 - An animation applies to an element 2.245 - if its name appears as one of the identifiers in the 2.246 - computed value of the 'animation-name' property. 2.247 - Once an animation has started 2.248 - it continues until it ends 2.249 - or the 'animation-name' is removed. 2.250 - The values used for the keyframes and <span>animation properties</span> are snapshotted at the time the animation starts. 2.251 - Changing them during the execution of the animation has no effect. 2.252 - Note also that changing the value of 'animation-name' does not necessarily restart an animation 2.253 - (e.g., if a list of animations are applied and one is removed from the list, 2.254 - only that animation will stop; 2.255 - The other animations will continue). 2.256 - In order to restart an animation, 2.257 - it must be removed then reapplied. 2.258 - 2.259 - 2.260 - <p> 2.261 - The end of the animation is defined by the combination of the 2.262 - 'animation-duration', 2.263 - 'animation-iteration-count' and 2.264 - 'animation-fill-mode' properties. 2.265 - 2.266 - 2.267 - <div class="example"> 2.268 - <pre> 2.269 -div { 2.270 - animation-name: diagonal-slide; 2.271 - animation-duration: 5s; 2.272 - animation-iteration-count: 10; 2.273 -} 2.274 - 2.275 -@keyframes diagonal-slide { 2.276 - 2.277 - from { 2.278 - left: 0; 2.279 - top: 0; 2.280 - } 2.281 - 2.282 - to { 2.283 - left: 100px; 2.284 - top: 100px; 2.285 - } 2.286 - 2.287 -}</pre> 2.288 - 2.289 - <p> 2.290 - This will produce an animation 2.291 - that moves an element from (0, 0) to (100px, 100px) 2.292 - over five seconds 2.293 - and repeats itself nine times 2.294 - (for a total of ten iterations). 2.295 - </div> 2.296 - 2.297 - <p> 2.298 - Setting the display property to 'none' will terminate any running animation 2.299 - applied to the element and its descendants. 2.300 - 2.301 - If an element has a display of 'none', updating display to a value other than 'none' 2.302 - will start all animations applied to the element by the 'animation-name' property, 2.303 - as well as all animations applied to descendants with display other than 'none'. 2.304 - </p> 2.305 - 2.306 - <p> 2.307 - While authors can use animations to create dynamically changing content, 2.308 - dynamically changing content can lead to seizures in some users. 2.309 - For information on how to avoid content that can lead to seizures, see 2.310 - <a href="http://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3: 2.311 - Seizures: 2.312 - Do not design content in a way that is known to cause seizures</a> 2.313 - ([[WCAG20]]). 2.314 - </p> 2.315 - 2.316 -<h2 id="keyframes"> 2.317 -Keyframes</h2> 2.318 - <p> 2.319 - Keyframes are used to specify the values for the animating properties 2.320 - at various points during the animation. 2.321 - The keyframes specify the behavior of one cycle of the animation; 2.322 - the animation may iterate one or more times. 2.323 - 2.324 - <p> 2.325 - Keyframes are specified using a specialized CSS at-rule. 2.326 - A @keyframes rule consists of the keyword "@keyframes", 2.327 - followed by an identifier giving a name for the animation 2.328 - (which will be referenced using 'animation-name'), 2.329 - followed by a set of style rules 2.330 - (delimited by curly braces). 2.331 - 2.332 - <p> 2.333 - The <dfn>keyframe selector</dfn> for a keyframe style rule 2.334 - consists of a comma-separated list of percentage values 2.335 - or the keywords 'from' or 'to'. 2.336 - The selector is used to specify the percentage along the duration of the animation that the keyframe represents. 2.337 - The keyframe itself is specified by the block of property values declared on the selector. 2.338 - The keyword 'from' is equivalent to the value ''0%''. 2.339 - The keyword 'to' is equivalent to the value ''100%''. 2.340 - <span class='note'>Note that the percentage unit specifier must be used on percentage values. 2.341 - Therefore, ''0'' is an invalid keyframe selector.</span> 2.342 - 2.343 - <p> 2.344 - If a ''0%'' or ''from'' keyframe is not specified, 2.345 - then the user agent constructs a ''0%'' keyframe 2.346 - using the computed values of the properties being animated. 2.347 - If a ''100%'' or ''to'' keyframe is not specified, 2.348 - then the user agent constructs a ''100%'' keyframe 2.349 - using the computed values of the properties being animated. 2.350 - If a keyframe selector specifies 2.351 - negative percentage values or 2.352 - values higher than 100%, 2.353 - then the keyframe will be ignored. 2.354 - 2.355 - <p> 2.356 - The <dfn>keyframe declaration block</dfn> for a keyframe rule 2.357 - consists of properties and values. 2.358 - Properties that are unable to be animated are ignored in these rules, 2.359 - with the exception of 'animation-timing-function', 2.360 - the behavior of which is described below. In addition, keyframe rule declarations qualified with !important are ignored. 2.361 - 2.362 - <p class="issue"> 2.363 - Need to describe what happens if a property is not present in all keyframes. 2.364 - 2.365 - <p> 2.366 - The @keyframes rule that is used by an animation 2.367 - will be the last one encountered in sorted rules order 2.368 - that matches the name of the animation specified by the 'animation-name' property. 2.369 - @keyframes rules do not cascade; 2.370 - therefore, an animation will never derive keyframes from more than one @keyframes rule. 2.371 - 2.372 - <p class='note'> 2.373 - Note that since empty @keyframes rule are valid, they may hide the keyframes of 2.374 - those preceding animation definitions with a matching name. 2.375 - 2.376 - <p> 2.377 - To determine the set of keyframes, 2.378 - all of the values in the selectors are sorted in increasing order by time. 2.379 - If there are any duplicates, 2.380 - then the last keyframe specified inside the @keyframes rule 2.381 - will be used to provide the keyframe information for that time. 2.382 - There is no cascading within a @keyframes rule if multiple keyframes specify the same keyframe selector values. 2.383 - 2.384 - <p> 2.385 - If a property is not specified for a keyframe, 2.386 - or is specified but invalid, 2.387 - the animation of that property proceeds as if that keyframe did not exist. 2.388 - Conceptually, 2.389 - it is as if a set of keyframes is constructed for each property that is present in any of the keyframes, 2.390 - and an animation is run independently for each property. 2.391 - 2.392 - <div class="example"> 2.393 - <pre> 2.394 -@keyframes wobble { 2.395 - 0% { 2.396 - left: 100px; 2.397 - } 2.398 - 2.399 - 40% { 2.400 - left: 150px; 2.401 - } 2.402 - 2.403 - 60% { 2.404 - left: 75px; 2.405 - } 2.406 - 2.407 - 100% { 2.408 - left: 100px; 2.409 - } 2.410 -}</pre> 2.411 - 2.412 - <p> 2.413 - Four keyframes are specified for the animation named "wobble". 2.414 - In the first keyframe, 2.415 - shown at the beginning of the animation cycle, 2.416 - the value of the 'left' property being animated is ''100px''. 2.417 - By 40% of the animation duration, 2.418 - 'left' has animated to ''150px''. 2.419 - At 60% of the animation duration, 2.420 - 'left' has animated back to ''75px''. 2.421 - At the end of the animation cycle, 2.422 - the value of 'left' has returned to ''100px''. 2.423 - The diagram below shows the state of the animation if it were given a duration of ''10s''. 2.424 - 2.425 - <div class="figure"> 2.426 - <img src="animation1.png" alt=""> 2.427 - 2.428 - <p class="caption"> 2.429 - Animations states specified by keyframes 2.430 - </div> 2.431 - </div> 2.432 - 2.433 - <p> 2.434 - The following is the grammar for the keyframes rule. 2.435 - 2.436 - <pre> 2.437 -keyframes_rule: KEYFRAMES_SYM S+ IDENT S* '{' S* keyframes_blocks '}' S*; 2.438 - 2.439 -keyframes_blocks: [ keyframe_selector '{' S* declaration? [ ';' S* declaration? ]* '}' S* ]* ; 2.440 - 2.441 -keyframe_selector: [ FROM_SYM | TO_SYM | PERCENTAGE ] S* [ ',' S* [ FROM_SYM | TO_SYM | PERCENTAGE ] S* ]*; 2.442 - 2.443 -@{K}{E}{Y}{F}{R}{A}{M}{E}{S} {return KEYFRAMES_SYM;} 2.444 -{F}{R}{O}{M} {return FROM_SYM;} 2.445 -{T}{O} {return TO_SYM;}</pre> 2.446 - 2.447 - 2.448 -<h3 id="timing-functions"> 2.449 -Timing functions for keyframes</h3> 2.450 - 2.451 - <p> 2.452 - A keyframe style rule may also declare the timing function that is to be used 2.453 - as the animation moves to the next keyframe. 2.454 - 2.455 - <div class="example"> 2.456 - <pre> 2.457 -@keyframes bounce { 2.458 - 2.459 - from { 2.460 - top: 100px; 2.461 - animation-timing-function: ease-out; 2.462 - } 2.463 - 2.464 - 25% { 2.465 - top: 50px; 2.466 - animation-timing-function: ease-in; 2.467 - } 2.468 - 2.469 - 50% { 2.470 - top: 100px; 2.471 - animation-timing-function: ease-out; 2.472 - } 2.473 - 2.474 - 75% { 2.475 - top: 75px; 2.476 - animation-timing-function: ease-in; 2.477 - } 2.478 - 2.479 - to { 2.480 - top: 100px; 2.481 - } 2.482 - 2.483 -}</pre> 2.484 - 2.485 - <p> 2.486 - Five keyframes are specified for the animation named "bounce". 2.487 - Between the first and second keyframe 2.488 - (i.e., between 0% and 25%) 2.489 - an ''ease-out'' timing function is used. 2.490 - Between the second and third keyframe 2.491 - (i.e., between 25% and 50%) 2.492 - an ''ease-in'' timing function is used. 2.493 - And so on. 2.494 - The effect will appear as an element that moves up the page ''50px'', 2.495 - slowing down as it reaches its highest point 2.496 - then speeding up as it falls back to ''100px''. 2.497 - The second half of the animation behaves in a similar manner, 2.498 - but only moves the element ''25px'' up the page. 2.499 - </div> 2.500 - 2.501 - <p> 2.502 - A timing function specified on the "to" or 100% keyframe is ignored. 2.503 - 2.504 - <p> 2.505 - See the 'animation-timing-function' property for more information. 2.506 - 2.507 - 2.508 -<h3 id="animation-name-property"> 2.509 -The 'animation-name' Property</h3> 2.510 - 2.511 - <p> 2.512 - The 'animation-name' property defines a list of animations that apply. 2.513 - Each name is used to select the keyframe at-rule 2.514 - that provides the property values for the animation. 2.515 - If the name does not match any keyframe at-rule, 2.516 - there are no properties to be animated 2.517 - and the animation will not execute. 2.518 - Furthermore, 2.519 - if the animation name is ''none'' 2.520 - then there will be no animation. 2.521 - This can be used to override any animations coming from the cascade. 2.522 - If multiple animations are attempting to modify the same property, 2.523 - then the animation closest to the end of the list of names wins. 2.524 - 2.525 - <p id="list-matching"> 2.526 - Each animation listed by name 2.527 - should have a corresponding value for the other <span>animation properties</span> listed below. 2.528 - If the lists of values for the other <span>animation properties</span> do not have the same length, 2.529 - the length of the 'animation-name' list 2.530 - determines the number of items in each list examined when starting animations. 2.531 - The lists are matched up from the first value: 2.532 - excess values at the end are not used. 2.533 - If one of the other properties doesn't have enough comma-separated values to match the number of values of 'animation-name', 2.534 - the UA must calculate its used value by repeating the list of values until there are enough. 2.535 - This truncation or repetition does not affect the computed value. 2.536 - <span class="note">Note: This is analogous to the behavior of the 'background-*'properties, 2.537 - with 'background-image' analogous to 'animation-name'.</span> 2.538 - 2.539 - 2.540 - <table class=propdef> 2.541 - <tr> 2.542 - <th>Name:</th> 2.543 - <td><dfn>animation-name</dfn> 2.544 - <tr> 2.545 - <th><a href="#values">Value</a>: 2.546 - <td><span><single-animation-name></span> [ ',' <span><single-animation-name></span> ]* 2.547 - <tr> 2.548 - <th>Initial: 2.549 - <td>''none'' 2.550 - <tr> 2.551 - <th>Applies To: 2.552 - <td>all elements, ::before and ::after pseudo-elements 2.553 - <tr> 2.554 - <th>Inherited: 2.555 - <td>no 2.556 - <tr> 2.557 - <th>Animatable: 2.558 - <td>no 2.559 - <tr> 2.560 - <th>Percentages: 2.561 - <td>N/A 2.562 - <tr> 2.563 - <th>Media: 2.564 - <td>visual 2.565 - <tr> 2.566 - <th>Computed Value: 2.567 - <td>As specified 2.568 - <tr> 2.569 - <th>Canonical Order: 2.570 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.571 - </table> 2.572 - 2.573 - <div class="prod"> 2.574 - <dfn id="single-animation-name"><single-animation-name></dfn> = none | <IDENT> 2.575 - </div> 2.576 - 2.577 - <!-- 2.578 - <p> 2.579 - 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. 2.580 - 2.581 - <div class="example"> 2.582 - <p style="display:none"> 2.583 - Example(s): 2.584 - 2.585 - <pre> 2.586 - @keyframes 'border-bloat' { 2.587 - from { 2.588 - border-width: 0; 2.589 - } 2.590 - to { 2.591 - border-width: 10px; 2.592 - } 2.593 - } 2.594 - 2.595 - @keyframes 'border-diet' { 2.596 - from { 2.597 - border-width: 4px; 2.598 - } 2.599 - to { 2.600 - border-width: 2px; 2.601 - } 2.602 - } 2.603 - 2.604 - div { 2.605 - animation-name: 'border-bloat', 'border-diet'; 2.606 - animation-duration: 10s, 4s; 2.607 - } 2.608 - </pre> 2.609 - <p> 2.610 - The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 2.611 - resulting value for the property will be the addition of the values from the 2.612 - two animations. 2.613 - 2.614 - <p> 2.615 - At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 2.616 - At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 2.617 - At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 2.618 - 'border-diet' as it is no longer executing). 2.619 - 2.620 - </div> 2.621 - --> 2.622 - 2.623 - 2.624 -<h3 id="animation-duration-property"> 2.625 -The 'animation-duration' Property</h3> 2.626 - 2.627 - <p> 2.628 - The 'animation-duration' property defines the length of time that an animation takes to complete one cycle. 2.629 - 2.630 - 2.631 - <table class=propdef> 2.632 - <tr> 2.633 - <th>Name:</th> 2.634 - <td><dfn>animation-duration</dfn> 2.635 - <tr> 2.636 - <th><a href="#values">Value</a>: 2.637 - <td> <span><time></span> [, <span><time></span>]* 2.638 - <tr> 2.639 - <th>Initial: 2.640 - <td>''0s'' 2.641 - <tr> 2.642 - <th>Applies To: 2.643 - <td>all elements, ::before and ::after pseudo-elements 2.644 - <tr> 2.645 - <th>Inherited: 2.646 - <td>no 2.647 - <tr> 2.648 - <th>Animatable: 2.649 - <td>no 2.650 - <tr> 2.651 - <th>Percentages: 2.652 - <td>N/A 2.653 - <tr> 2.654 - <th>Media: 2.655 - <td>visual 2.656 - <tr> 2.657 - <th>Computed Value: 2.658 - <td>as specified 2.659 - <tr> 2.660 - <th>Canonical Order: 2.661 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.662 - </table> 2.663 - 2.664 - <p> 2.665 - The initial value is ''0s'', 2.666 - meaning that the animation takes no time. 2.667 - When the duration is ''0s'' 'animation-fill-mode' still applies, 2.668 - so an animation that fills backwards 2.669 - will show the value of the 0% keyframe during any delay period, 2.670 - and an animation that fills forwards will retain the value specified at the 100% keyframe, 2.671 - even if the animation was instantaneous. 2.672 - Also, animation events are still fired. 2.673 - A negative 'animation-duration' value renders the declaration invalid. 2.674 - 2.675 - 2.676 -<h3 id="animation-timing-function-property"> 2.677 -The 'animation-timing-function' Property</h3> 2.678 - 2.679 - <p> 2.680 - The 'animation-timing-function' property describes how the animation will progress over one cycle of its duration. 2.681 - See the 'transition-timing-function' property [[!CSS3-TRANSITIONS]] for a complete description of timing function calculation. 2.682 - 2.683 - <table class=propdef> 2.684 - <tr> 2.685 - <th>Name:</th> 2.686 - <td><dfn>animation-timing-function</dfn> 2.687 - <tr> 2.688 - <th><a href="#values">Value</a>: 2.689 - <td><span><single-timing-function></span> [ ',' <span><single-timing-function></span> ]* 2.690 - <tr> 2.691 - <th>Initial: 2.692 - <td>''ease'' 2.693 - <tr> 2.694 - <th>Applies To: 2.695 - <td>all elements, ::before and ::after pseudo-elements 2.696 - <tr> 2.697 - <th>Inherited: 2.698 - <td>no 2.699 - <tr> 2.700 - <th>Animatable: 2.701 - <td>no 2.702 - <tr> 2.703 - <th>Percentages: 2.704 - <td>N/A 2.705 - <tr> 2.706 - <th>Media: 2.707 - <td>visual 2.708 - <tr> 2.709 - <th>Computed Value: 2.710 - <td>as specified 2.711 - <tr> 2.712 - <th>Canonical Order: 2.713 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.714 - </table> 2.715 - 2.716 - <p>All the valid values of ''<single-timing-function>'' are defined by the 'transition-timing-function' property [[!CSS3-TRANSITIONS]].</p> 2.717 - 2.718 - <p> 2.719 - For a keyframed animation, 2.720 - the 'animation-timing-function' applies between keyframes, 2.721 - not over the entire animation. 2.722 - For example, 2.723 - in the case of an ''ease-in-out'' timing function, 2.724 - an animation will ease in at the start of the keyframe 2.725 - and ease out at the end of the keyframe. 2.726 - An 'animation-timing-function' defined within a keyframe block applies to that keyframe, 2.727 - otherwise the timing function specified for the animation is used. In addition, only the 2.728 - first value of the property applies when it is used in a keyframe block. 2.729 - 2.730 - 2.731 -<h3 id="animation-iteration-count-property"> 2.732 -The 'animation-iteration-count' Property</h3> 2.733 - 2.734 - <p> 2.735 - The 'animation-iteration-count' property specifies the number of times an animation cycle is played. 2.736 - The initial value is ''1'', 2.737 - meaning the animation will play from beginning to end once. 2.738 - A value of ''infinite'' will cause the animation to repeat forever. 2.739 - Non-integer numbers will cause the animation to end part-way through a cycle. 2.740 - Negative values of 'animation-iteration-count' are invalid. 2.741 - This property is often used in conjunction an 'animation-direction' value of ''alternate'', 2.742 - which will cause the animation to play in reverse on alternate cycles. 2.743 - 2.744 - <table class=propdef> 2.745 - <tr> 2.746 - <th>Name:</th> 2.747 - <td><dfn>animation-iteration-count</dfn> 2.748 - <tr> 2.749 - <th><a href="#values">Value</a>: 2.750 - <td><span><single-animation-iteration-count></span> [ ',' <span><single-animation-iteration-count></span> ]* 2.751 - <tr> 2.752 - <th>Initial: 2.753 - <td>''1'' 2.754 - <tr> 2.755 - <th>Applies To: 2.756 - <td>all elements, ::before and ::after pseudo-elements 2.757 - <tr> 2.758 - <th>Inherited: 2.759 - <td>no 2.760 - <tr> 2.761 - <th>Animatable: 2.762 - <td>no 2.763 - <tr> 2.764 - <th>Percentages: 2.765 - <td>N/A 2.766 - <tr> 2.767 - <th>Media: 2.768 - <td>visual 2.769 - <tr> 2.770 - <th>Computed Value: 2.771 - <td>as specified 2.772 - <tr> 2.773 - <th>Canonical Order: 2.774 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.775 - </table> 2.776 - 2.777 - <div class="prod"> 2.778 - <dfn id="single-animation-iteration-count"><single-animation-iteration-count></dfn> = 2.779 - infinite | <number> 2.780 - </div> 2.781 - 2.782 -<h3 id="animation-direction-property"> 2.783 -The 'animation-direction' Property</h3> 2.784 - 2.785 - <p> 2.786 - The 'animation-direction' property defines whether or not the animation should play in reverse on some or all cycles. 2.787 - When an animation is played in reverse the timing functions are also reversed. 2.788 - For example, when played in reverse an ease-in animation would appear to be an ease-out animation. 2.789 - 2.790 - <table class=propdef> 2.791 - <tr> 2.792 - <th>Name:</th> 2.793 - <td><dfn>animation-direction</dfn> 2.794 - <tr> 2.795 - <th><a href="#values">Value</a>: 2.796 - <td><span><single-animation-direction></span> [ ',' <span><single-animation-direction></span> ]* 2.797 - <tr> 2.798 - <th>Initial: 2.799 - <td>''normal'' 2.800 - <tr> 2.801 - <th>Applies To: 2.802 - <td>all elements, ::before and ::after pseudo-elements 2.803 - <tr> 2.804 - <th>Inherited: 2.805 - <td>no 2.806 - <tr> 2.807 - <th>Animatable: 2.808 - <td>no 2.809 - <tr> 2.810 - <th>Percentages: 2.811 - <td>N/A 2.812 - <tr> 2.813 - <th>Media: 2.814 - <td>visual 2.815 - <tr> 2.816 - <th>Computed Value: 2.817 - <td>as specified 2.818 - <tr> 2.819 - <th>Canonical Order: 2.820 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.821 - </table> 2.822 - 2.823 - <div class="prod"> 2.824 - <dfn id="single-animation-direction"><single-animation-direction></dfn> = 2.825 - normal | reverse | alternate | alternate-reverse 2.826 - </div> 2.827 - 2.828 - <dl> 2.829 - <dt><dfn>normal</dfn> 2.830 - <dd> 2.831 - All iterations of the animation are played as specified. 2.832 - 2.833 - <dt><dfn>reverse</dfn> 2.834 - <dd> 2.835 - All iterations of the animation are played in the reverse direction from the way they were specified. 2.836 - 2.837 - <dt><dfn>alternate</dfn> 2.838 - <dd> 2.839 - The animation cycle iterations that are odd counts are played in the normal direction, 2.840 - and the animation cycle iterations that are even counts are played in a reverse direction. 2.841 - 2.842 - <dt><dfn>alternate-reverse</dfn> 2.843 - <dd> 2.844 - The animation cycle iterations that are odd counts are played in the reverse direction, 2.845 - and the animation cycle iterations that are even counts are played in a normal direction. 2.846 - </dl> 2.847 - 2.848 - <p class='note'> 2.849 - Note that for the purpose of determining whether an iteration is even or odd, 2.850 - iterations start counting from 1. 2.851 - 2.852 - 2.853 -<h3 id="animation-play-state-property"> 2.854 -The 'animation-play-state' Property</h3> 2.855 - 2.856 - <p> 2.857 - The 'animation-play-state' property defines whether the animation is running or paused. 2.858 - A running animation can be paused by setting this property to ''paused''. 2.859 - To continue running a paused animation this property can be set to ''running''. 2.860 - A paused animation will continue to display the current value of the animation in a static state, 2.861 - as if the time of the animation is constant. 2.862 - When a paused animation is resumed, 2.863 - it restarts from the current value, 2.864 - not necessarily from the beginning of the animation. 2.865 - 2.866 - <table class=propdef> 2.867 - <tr> 2.868 - <th>Name:</th> 2.869 - <td><dfn>animation-play-state</dfn> 2.870 - <tr> 2.871 - <th><a href="#values">Value</a>: 2.872 - <td><span><single-animation-play-state></span> [ ',' <span><single-animation-play-state></span> ]* 2.873 - <tr> 2.874 - <th>Initial: 2.875 - <td>''running'' 2.876 - <tr> 2.877 - <th>Applies To: 2.878 - <td>all elements, ::before and ::after pseudo-elements 2.879 - <tr> 2.880 - <th>Inherited: 2.881 - <td>no 2.882 - <tr> 2.883 - <th>Animatable: 2.884 - <td>no 2.885 - <tr> 2.886 - <th>Percentages: 2.887 - <td>N/A 2.888 - <tr> 2.889 - <th>Media: 2.890 - <td>visual 2.891 - <tr> 2.892 - <th>Computed Value: 2.893 - <td>as specified 2.894 - <tr> 2.895 - <th>Canonical Order: 2.896 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.897 - </table> 2.898 - 2.899 - <div class="prod"> 2.900 - <dfn id="single-animation-play-state"><single-animation-play-state></dfn> = 2.901 - running | paused 2.902 - </div> 2.903 - 2.904 -<h3 id="animation-delay-property"> 2.905 -The 'animation-delay' Property</h3> 2.906 - 2.907 - <p> 2.908 - The 'animation-delay' property defines when the animation will start. 2.909 - It allows an animation to begin execution some time after it is applied. 2.910 - An 'animation-delay' value of ''0s'' means the animation will execute as soon as it is applied. 2.911 - Otherwise, the value specifies an offset from the moment the animation is applied, 2.912 - and the animation will delay execution by that offset. 2.913 - 2.914 - <p> 2.915 - If the value for 'animation-delay' is a negative time offset 2.916 - then the animation will execute the moment it is applied, 2.917 - but will appear to have begun execution at the specified offset. 2.918 - That is, the animation will appear to begin part-way through its play cycle. 2.919 - In the case where an animation has implied starting values and a negative 'animation-delay', 2.920 - the starting values are taken from the moment the animation is applied. 2.921 - 2.922 - <table class=propdef> 2.923 - <tr> 2.924 - <th>Name:</th> 2.925 - <td><dfn>animation-delay</dfn> 2.926 - <tr> 2.927 - <th><a href="#values">Value</a>: 2.928 - <td> <span><time></span> [, <span><time></span>]* 2.929 - <tr> 2.930 - <th>Initial: 2.931 - <td>''0s'' 2.932 - <tr> 2.933 - <th>Applies To: 2.934 - <td>all elements, ::before and ::after pseudo-elements 2.935 - <tr> 2.936 - <th>Inherited: 2.937 - <td>no 2.938 - <tr> 2.939 - <th>Animatable: 2.940 - <td>no 2.941 - <tr> 2.942 - <th>Percentages: 2.943 - <td>N/A 2.944 - <tr> 2.945 - <th>Media: 2.946 - <td>visual 2.947 - <tr> 2.948 - <th>Computed Value: 2.949 - <td>as specified 2.950 - <tr> 2.951 - <th>Canonical Order: 2.952 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.953 - </table> 2.954 - 2.955 - 2.956 -<h3 id="animation-fill-mode-property"> 2.957 -The 'animation-fill-mode' Property</h3> 2.958 - 2.959 - <p> 2.960 - The 'animation-fill-mode' property defines what values are applied by the animation outside the time it is executing. 2.961 - By default, an animation will not affect property values 2.962 - between the time it is applied 2.963 - (the 'animation-name' property is set on an element) 2.964 - and the time it begins execution 2.965 - (which is determined by the 'animation-delay' property). 2.966 - Also, by default an animation does not affect property values after the animation ends 2.967 - (determined by the 'animation-duration' property). 2.968 - The 'animation-fill-mode' property can override this behavior. 2.969 - 2.970 - <p> 2.971 - If the value for 'animation-fill-mode' is ''backwards'', 2.972 - then the animation will apply 2.973 - the property values defined in the keyframe 2.974 - that will start the first iteration of the animation, 2.975 - during the period defined by 'animation-delay'. 2.976 - These are either the values of the ''from'' keyframe 2.977 - (when 'animation-direction' is ''normal'' or ''alternate'') 2.978 - or those of the ''to'' keyframe 2.979 - (when 'animation-direction' is ''reverse'' or ''alternate-reverse''). 2.980 - 2.981 - <p> 2.982 - If the value for 'animation-fill-mode' is ''forwards'', 2.983 - then after the animation ends 2.984 - (as determined by its 'animation-iteration-count'), 2.985 - the animation will apply 2.986 - the property values for the time the animation ended. 2.987 - When 'animation-iteration-count' is an integer greater than zero, 2.988 - the values applied will be 2.989 - those for the end of the last completed iteration of the animation 2.990 - (rather than the values for 2.991 - the start of the iteration that would be next). 2.992 - When 'animation-iteration-count' is zero, 2.993 - the values applied will be those that would start the first iteration 2.994 - (just as when 'animation-fill-mode' is ''backwards''). 2.995 - 2.996 - <p> 2.997 - If the value for 'animation-fill-mode' is ''both'', 2.998 - then the animation will follow the rules for both 'forwards' and 'backwards'. 2.999 - That is, it will extend the animation in both directions. 2.1000 - 2.1001 - <table class=propdef> 2.1002 - <tr> 2.1003 - <th>Name:</th> 2.1004 - <td><dfn>animation-fill-mode</dfn> 2.1005 - <tr> 2.1006 - <th><a href="#values">Value</a>: 2.1007 - <td><span><single-animation-fill-mode></span> [ ',' <span><single-animation-fill-mode></span> ]* 2.1008 - <tr> 2.1009 - <th>Initial: 2.1010 - <td>''none'' 2.1011 - <tr> 2.1012 - <th>Applies To: 2.1013 - <td>all elements, ::before and ::after pseudo-elements 2.1014 - <tr> 2.1015 - <th>Inherited: 2.1016 - <td>no 2.1017 - <tr> 2.1018 - <th>Animatable: 2.1019 - <td>no 2.1020 - <tr> 2.1021 - <th>Percentages: 2.1022 - <td>N/A 2.1023 - <tr> 2.1024 - <th>Media: 2.1025 - <td>visual 2.1026 - <tr> 2.1027 - <th>Computed Value: 2.1028 - <td>as specified 2.1029 - <tr> 2.1030 - <th>Canonical Order: 2.1031 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.1032 - </table> 2.1033 - 2.1034 - <div class="prod"> 2.1035 - <dfn id="single-animation-fill-mode"><single-animation-fill-mode></dfn> = 2.1036 - none | forwards | backwards | both 2.1037 - </div> 2.1038 - 2.1039 -<h3 id="animation-shorthand-property"> 2.1040 -The 'animation' Shorthand Property</h3> 2.1041 - 2.1042 - <p> 2.1043 - The 'animation' shorthand property is a comma-separated list of 2.1044 - animation definitions. 2.1045 - Each item in the list gives one item of the value 2.1046 - for all of the subproperties of the shorthand, 2.1047 - which are known as the <dfn>animation properties</dfn>. 2.1048 - (See the definition of 'animation-name' for what happens 2.1049 - when these properties have lists of different lengths, 2.1050 - a problem that cannot occur when they are defined using only 2.1051 - the 'animation' shorthand.) 2.1052 - 2.1053 - <table class=propdef> 2.1054 - <tr> 2.1055 - <th>Name:</th> 2.1056 - <td><dfn>animation</dfn> 2.1057 - <tr> 2.1058 - <th><a href="#values">Value</a>: 2.1059 - <td><span><single-animation></span> [ ',' <span><single-animation></span> ]* 2.1060 - <tr> 2.1061 - <th>Initial: 2.1062 - <td>see individual properties 2.1063 - <tr> 2.1064 - <th>Applies To: 2.1065 - <td>all elements, ::before and ::after pseudo-elements 2.1066 - <tr> 2.1067 - <th>Inherited: 2.1068 - <td>see individual properties 2.1069 - <tr> 2.1070 - <th>Animatable: 2.1071 - <td>no 2.1072 - <tr> 2.1073 - <th>Percentages: 2.1074 - <td>N/A 2.1075 - <tr> 2.1076 - <th>Media: 2.1077 - <td>visual 2.1078 - <tr> 2.1079 - <th>Computed Value: 2.1080 - <td>see individual properties 2.1081 - <tr> 2.1082 - <th>Canonical Order: 2.1083 - <td><abbr title="follows order of property value definition">per grammar</abbr> 2.1084 - </table> 2.1085 - 2.1086 - <div class="prod"> 2.1087 - <dfn id="single-animation"><single-animation></dfn> = 2.1088 - <span><time></span> || 2.1089 - <single-animation-timing-function> || 2.1090 - <span><time></span> || 2.1091 - <single-animation-iteration-count> || 2.1092 - <single-animation-direction> || 2.1093 - <single-animation-fill-mode> || 2.1094 - <single-animation-play-state> || 2.1095 - <single-animation-name> 2.1096 - </div> 2.1097 - 2.1098 - <p> 2.1099 - Note that order is important within each animation definition: 2.1100 - the first value in each <single-animation> 2.1101 - that can be parsed as a <var><time></var> 2.1102 - is assigned to the animation-duration, 2.1103 - and the second value in each <single-animation> 2.1104 - that can be parsed as a <var><time></var> 2.1105 - is assigned to animation-delay. 2.1106 - </p> 2.1107 - 2.1108 - <p> 2.1109 - Note that order is also important within each animation definition 2.1110 - for distinguishing <single-animation-name> values 2.1111 - from other keywords. 2.1112 - When parsing, keywords that are valid for 2.1113 - properties other than 'animation-name' 2.1114 - must be accepted for those properties 2.1115 - rather than for 'animation-name'. 2.1116 - Furthermore, when serializing, 2.1117 - default values of other properties must be output 2.1118 - in at least the cases necessary to distinguish an 2.1119 - 'animation-name' that could be a value of another property, 2.1120 - and may be output in additional cases. 2.1121 - <span class="example"> 2.1122 - For example, a value parsed from ''animation: 3s none backwards'' 2.1123 - (where 'animation-fill-mode' is ''none'' and 2.1124 - 'animation-name' is ''backwards'') 2.1125 - must not be serialized as ''animation: 3s backwards'' 2.1126 - (where 'animation-fill-mode' is ''backwards'' and 2.1127 - 'animation-name' is ''none''). 2.1128 - </span> 2.1129 - 2.1130 -<h2 id="animation-events"> 2.1131 -Animation Events</h2> 2.1132 - 2.1133 - <p> 2.1134 - Several animation related events are available through the <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event system</a>. 2.1135 - The start and end of an animation, 2.1136 - and the end of each iteration of an animation, 2.1137 - all generate DOM events. 2.1138 - An element can have multiple properties being animated simultaneously. 2.1139 - This can occur either with a single 'animation-name' value 2.1140 - with keyframes containing multiple properties, 2.1141 - or with multiple 'animation-name' values. 2.1142 - For the purposes of events, 2.1143 - each 'animation-name' specifies a single animation. 2.1144 - Therefore an event will be generated for each 'animation-name' value 2.1145 - and not necessarily for each property being animated. 2.1146 - 2.1147 - <p> 2.1148 - Any animation for which both a valid keyframe rule and a non-zero duration are 2.1149 - defined will run and generate events; this includes animations with empty 2.1150 - keyframe rules. 2.1151 - 2.1152 - <p> 2.1153 - The time the animation has been running is sent with each event generated. 2.1154 - This allows the event handler to determine the current iteration of a looping animation 2.1155 - or the current position of an alternating animation. 2.1156 - This time does not include any time the animation was in the ''paused'' play state. 2.1157 - 2.1158 - 2.1159 -<h3 id='AnimationEvent-interface'> 2.1160 -Interface <code>AnimationEvent</code></h3> 2.1161 - 2.1162 - <p> 2.1163 - The <dfn>AnimationEvent</dfn> interface provides specific contextual information associated with Animation events. 2.1164 - 2.1165 - 2.1166 -<h4 id='AnimationEvent-IDL'> 2.1167 -IDL Definition</h4> 2.1168 - 2.1169 - <pre class='idl'> 2.1170 -[Constructor(DOMString <var title="">type</var>, optional <i>AnimationEventInit</i> <var title="">animationEventInitDict</var>)] 2.1171 -interface AnimationEvent : <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#event">Event</a> { 2.1172 - readonly attribute DOMString <a href="#AnimationEvent-animationName" title="AnimationEvent-lengthComputable">animationName</a>; 2.1173 - readonly attribute float <a href="#AnimationEvent-elapsedTime" title="dom-ProgressEvent-loaded">elapsedTime</a>; 2.1174 - readonly attribute DOMString <a href="#AnimationEvent-pseudoElement" title="AnimationEvent-pseudoElement">pseudoElement</a>; 2.1175 -}; 2.1176 - 2.1177 -dictionary <dfn id="AnimationEventInit">AnimationEventInit</dfn> : <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#eventinit">EventInit</a> { 2.1178 - DOMString <span title="AnimationEventInit-animationName">animationName</span> = ""; 2.1179 - float <span title="AnimationEventInit-loaded">elapsedTime</span> = 0.0; 2.1180 - DOMString <span title="AnimationEventInit-pseudoElement">pseudoElement</span> = ""; 2.1181 -} 2.1182 - 2.1183 -</pre> 2.1184 - 2.1185 - 2.1186 -<h4 id='AnimationEvent-attributes'> 2.1187 -Attributes</h4> 2.1188 - 2.1189 - <dl> 2.1190 - <dt><code><dfn id='AnimationEvent-animationName'>animationName</dfn></code> of type <code>DOMString</code>, readonly 2.1191 - <dd> 2.1192 - The value of the 'animation-name' property of the animation that fired the event. 2.1193 - 2.1194 - <dt><code><dfn id='AnimationEvent-elapsedTime'>elapsedTime</dfn></code> of type <code>float</code>, readonly 2.1195 - <dd> 2.1196 - The amount of time the animation has been running, 2.1197 - in seconds, 2.1198 - when this event fired, 2.1199 - excluding any time the animation was paused. 2.1200 - For an "animationstart" event, 2.1201 - the elapsedTime is zero unless there was a negative value for 'animation-delay', 2.1202 - in which case the event will be fired with an <code>elapsedTime</code> of (-1 * delay). 2.1203 - 2.1204 - <dt><code><dfn id='AnimationEvent-pseudoElement'>pseudoElement</dfn></code> of type <code>DOMString</code>, readonly 2.1205 - <dd> 2.1206 - The name (beginning with two colons) of the CSS pseudo-element on 2.1207 - which the animation runs (in which case the target of the event 2.1208 - is that pseudo-element's corresponding element), or the empty string 2.1209 - if the animation runs on an element (which means the target of the event 2.1210 - is that element). 2.1211 - </dl> 2.1212 - 2.1213 - <p> 2.1214 - <code id="AnimationEvent-constructor">AnimationEvent(type, animationEventInitDict)</code> 2.1215 - is an <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#constructing-events">event constructor</a>. 2.1216 - 2.1217 -<h3 id='AnimationEvent-types'> 2.1218 -Types of <code>AnimationEvent</code></h3> 2.1219 - 2.1220 - <p> 2.1221 - The different types of Animation events that can occur are: 2.1222 - 2.1223 - <dl> 2.1224 - <dt><dfn>animationstart</dfn> 2.1225 - <dd> 2.1226 - The <code>animationstart</code> event occurs at the start of the animation. 2.1227 - If there is an 'animation-delay' 2.1228 - then this event will fire once the delay period has expired. 2.1229 - A negative delay will cause the event to fire with an <code>elapsedTime</code> equal to the absolute value of the delay. 2.1230 - 2.1231 - <ul> 2.1232 - <li>Bubbles: Yes 2.1233 - <li>Cancelable: No 2.1234 - <li>Context Info: animationName, pseudoElement 2.1235 - </ul> 2.1236 - 2.1237 - <dt><dfn>animationend</dfn> 2.1238 - <dd> 2.1239 - The <code>animationend</code> event occurs when the animation finishes. 2.1240 - 2.1241 - <ul> 2.1242 - <li>Bubbles: Yes 2.1243 - <li>Cancelable: No 2.1244 - <li>Context Info: animationName, elapsedTime, pseudoElement 2.1245 - </ul> 2.1246 - 2.1247 - <dt><dfn>animationiteration</dfn> 2.1248 - <dd> 2.1249 - The <code>animationiteration</code> event occurs at the end of each iteration of an animation, 2.1250 - except when an <code>animationend</code> event would fire at the same time. 2.1251 - This means that this event does not occur for animations with an iteration count of one or less. 2.1252 - 2.1253 - <ul> 2.1254 - <li>Bubbles: Yes 2.1255 - <li>Cancelable: No 2.1256 - <li>Context Info: animationName, elapsedTime, pseudoElement 2.1257 - </ul> 2.1258 - </dl> 2.1259 - 2.1260 - 2.1261 -<h2 id="dom-interfaces"> 2.1262 -DOM Interfaces</h2> 2.1263 - 2.1264 - <p> 2.1265 - CSS animation is exposed to the CSSOM through a pair of new interfaces describing the keyframes. 2.1266 - 2.1267 - 2.1268 -<h3 id='CSSRule-interface'> 2.1269 -Interface <code>CSSRule</code></h3> 2.1270 - 2.1271 - <p> 2.1272 - The following 2 rule types are added to the <dfn>CSSRule</dfn> interface. 2.1273 - They provide identification for the new keyframe and keyframes rules. 2.1274 - 2.1275 - 2.1276 -<h4 id='CSSRule-IDL'> 2.1277 -IDL Definition</h4> 2.1278 - 2.1279 - <pre class='idl'> 2.1280 -interface CSSRule { 2.1281 - ... 2.1282 - const unsigned short KEYFRAMES_RULE = 7; 2.1283 - const unsigned short KEYFRAME_RULE = 8; 2.1284 - ... 2.1285 -};</pre> 2.1286 - 2.1287 - 2.1288 -<h3 id='CSSKeyframeRule-interface'> 2.1289 -Interface <code>CSSKeyframeRule</code></h3> 2.1290 - <p> 2.1291 - The <dfn>CSSKeyframeRule</dfn> interface represents the style rule for a single key. 2.1292 - 2.1293 - 2.1294 -<h4 id='CSSKeyframeRule-IDL'> 2.1295 -IDL Definition</h4> 2.1296 - 2.1297 - <pre class='idl'> 2.1298 -interface CSSKeyframeRule : CSSRule { 2.1299 - attribute DOMString keyText; 2.1300 - readonly attribute CSSStyleDeclaration style; 2.1301 -};</pre> 2.1302 - 2.1303 - 2.1304 -<h4 id='CSSKeyframeRule-attributes'> 2.1305 -Attributes</h4> 2.1306 - 2.1307 - <dl> 2.1308 - <dt><code><dfn id='CSSKeyframeRule-keyText'>keyText</dfn></code> of type <code>DOMString</code> 2.1309 - <dd> 2.1310 - This attribute represents the keyframe selector as a comma-separated 2.1311 - list of percentage values. The ''from'' and ''to'' keywords map to 2.1312 - ''0%'' and ''100%'', respectively. 2.1313 - 2.1314 - <dt><code><dfn id='CSSKeyframeRule-style'>style</dfn></code> of type <code>CSSStyleDeclaration</code> 2.1315 - <dd> 2.1316 - This attribute represents the style associated with this keyframe. 2.1317 - </dl> 2.1318 - 2.1319 - 2.1320 -<h3 id='CSSKeyframesRule-interface'> 2.1321 -Interface <code>CSSKeyframesRule</code></h3> 2.1322 - 2.1323 - <p> 2.1324 - The <dfn>CSSKeyframesRule</dfn> interface represents a complete set of keyframes for a single animation. 2.1325 - 2.1326 - 2.1327 -<h4 id='CSSKeyframesRule-IDL'> 2.1328 -IDL Definition</h4> 2.1329 - 2.1330 - <pre class='idl'> 2.1331 -interface CSSKeyframesRule : CSSRule { 2.1332 - attribute DOMString name; 2.1333 - readonly attribute CSSRuleList cssRules; 2.1334 - 2.1335 - void appendRule(in DOMString rule); 2.1336 - void deleteRule(in DOMString key); 2.1337 - CSSKeyframeRule findRule(in DOMString key); 2.1338 -};</pre> 2.1339 - 2.1340 - 2.1341 -<h4 id='CSSKeyframesRule-attributes'> 2.1342 -Attributes</h4> 2.1343 - 2.1344 - <dl> 2.1345 - <dt><code><dfn id='CSSKeyframesRule-name'>name</dfn></code> of type <code>DOMString</code> 2.1346 - <dd> 2.1347 - This attribute is the name of the keyframes, used by the 'animation-name' property.<br> 2.1348 - 2.1349 - <dt><code><dfn id='CSSKeyframesRules-cssRules'>cssRules</dfn></code> of type <code>CSSRuleList</code> 2.1350 - <dd> 2.1351 - This attribute gives access to the keyframes in the list. 2.1352 - </dl> 2.1353 - 2.1354 - 2.1355 -<h4 id='CSSKeyframesRule-appendRule'> 2.1356 -The <code>appendRule</code> method</h4> 2.1357 - 2.1358 - <p> 2.1359 - The <dfn>appendRule</dfn> method appends the passed CSSKeyframeRule into the list at the passed key. 2.1360 - 2.1361 - <p> 2.1362 - Parameters: 2.1363 - 2.1364 - <dl> 2.1365 - <dt><code>rule</code> of type <code>DOMString</code> 2.1366 - 2.1367 - <dd> 2.1368 - The rule to be appended, 2.1369 - expressed in the same syntax as one entry in the ''@keyframes'' rule. 2.1370 - </dl> 2.1371 - 2.1372 - <p> 2.1373 - No Return Value 2.1374 - 2.1375 - <p> 2.1376 - No Exceptions 2.1377 - 2.1378 - 2.1379 -<h4 id='CSSKeyframesRules-deleteRule'> 2.1380 -The <code>deleteRule</code> method</h4> 2.1381 - 2.1382 - <p> 2.1383 - The <dfn>deleteRule</dfn> method deletes the CSSKeyframeRule with the passed key. 2.1384 - If a rule with this key does not exist, 2.1385 - the method does nothing. 2.1386 - 2.1387 - <p> 2.1388 - Parameters: 2.1389 - 2.1390 - <dl> 2.1391 - <dt><code>key</code> of type <code>DOMString</code> 2.1392 - <dd> 2.1393 - The key which describes the rule to be deleted. 2.1394 - The key must resolve to a number between 0 and 1, 2.1395 - or the rule is ignored. 2.1396 - </dl> 2.1397 - 2.1398 - <p> 2.1399 - No Return Value 2.1400 - 2.1401 - <p> 2.1402 - No Exceptions 2.1403 - 2.1404 - 2.1405 -<h4 id='CSSKeyframesRule-findRule'> 2.1406 -The <code>findRule</code> method</h4> 2.1407 - 2.1408 - <p> 2.1409 - The <code>findRule</code> method returns the rule with a key matching the passed key. 2.1410 - If no such rule exists, 2.1411 - a null value is returned. 2.1412 - 2.1413 - <p> 2.1414 - Parameters: 2.1415 - 2.1416 - <dl> 2.1417 - <dt><code>key</code> of type <code>DOMString</code> 2.1418 - <dd> 2.1419 - The key which described the rule to find. 2.1420 - The key must resolve to a number between 0 and 1, 2.1421 - or the rule is ignored. 2.1422 - </dl> 2.1423 - 2.1424 - <p> 2.1425 - Return Value: 2.1426 - 2.1427 - <dl> 2.1428 - <dt><code>CSSKeyframeRule</code> 2.1429 - <dd> 2.1430 - The found rule. 2.1431 - </dl> 2.1432 - 2.1433 - <p> 2.1434 - No Exceptions 2.1435 - 2.1436 - 2.1437 -<h2 id="acknowledgments">Acknowledgments</h2> 2.1438 - 2.1439 -<p>Thanks especially to the feedback from 2.1440 -Tab Atkins, 2.1441 -Carine Bournez, 2.1442 -Anne van Kesteren, 2.1443 -Øyvind Stenhaug, 2.1444 -Estelle Weyl, 2.1445 -and all the rest of the 2.1446 -<a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community. 2.1447 - 2.1448 -<h2>References</h2> 2.1449 - 2.1450 -<h3 class="no-num">Normative references</h3> 2.1451 -<!--normative--> 2.1452 - 2.1453 -<h3 class="no-num">Other references</h3> 2.1454 -<!--informative--> 2.1455 - 2.1456 - 2.1457 - 2.1458 -<h2 class="no-num">Property index</h2> 2.1459 -<!-- properties --> 2.1460 - 2.1461 - 2.1462 - 2.1463 -<h2 class="no-num" id="index">Index</h2> 2.1464 -<!--index--> 2.1465 - 2.1466 -</body> 2.1467 -</html> 2.1468 -<!-- Keep this comment at the end of the file 2.1469 -Local variables: 2.1470 -mode: sgml 2.1471 -sgml-declaration:"~/SGML/HTML4.decl" 2.1472 -sgml-default-doctype-name:"html" 2.1473 -sgml-minimize-attributes:t 2.1474 -sgml-nofill-elements:("pre" "style" "br") 2.1475 -sgml-live-element-indicator:t 2.1476 -sgml-omittag:nil 2.1477 -sgml-shorttag:nil 2.1478 -sgml-namecase-general:t 2.1479 -sgml-general-insert-case:lower 2.1480 -sgml-always-quote-attributes:t 2.1481 -sgml-indent-step:nil 2.1482 -sgml-indent-data:t 2.1483 -sgml-parent-document:nil 2.1484 -sgml-exposed-tags:nil 2.1485 -sgml-local-catalogs:nil 2.1486 -sgml-local-ecat-files:nil 2.1487 -End: 2.1488 --->
