<!DOCTYPE html><html lang=en><head>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>Web Animations CSS Integration</title>
<link href=http://dev.w3.org/csswg/default.css rel=stylesheet type=text/css>
<link href=http://dev.w3/org/csswg/csslogo.ico rel="shortcut icon" type=image/x-icon>
<link href=https://www.w3.org/StyleSheets/TR/W3C-ED rel=stylesheet type=text/css>
</head>
<body class=h-entry>
<div class=head>
<p data-fill-with=logo><a class=logo href=http://www.w3.org/>
<img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72>
</a>
</p>
<h1 class="p-name no-ref" id=title>Web Animations CSS Integration</h1>
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
<span class=dt-updated><span class=value-title title=20140501>1 May 2014</span></span></span></h2>
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=none>none</a><dt>Editor’s Draft:<dd><a href=none>none</a>
<dt>Feedback:</dt>
<dd><a href="mailto:public-fx@w3.org?subject=%5Bweb-animations-css%5D%20feedback">public-fx@w3.org</a>
with subject line
“<kbd>[web-animations-css] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/public-fx/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors:
<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:shans@google.com>Shane Stephens</a> (<span class="p-org org">Google</span>)</dl></div>
<div data-fill-with=warning></div>
<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.
</p>
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2>
<p class=p-summary data-fill-with=abstract>This specification defines mappings between <a data-biblio-type=informative data-link-type=biblio href=#css3-animations title=css3-animations>[CSS3-ANIMATIONS]</a>, <a data-biblio-type=informative data-link-type=biblio href=#css3-transitions title=css3-transitions>[CSS3-TRANSITIONS]</a> and the <a data-biblio-type=informative data-link-type=biblio href=#web-animations title=web-animations>[WEB-ANIMATIONS]</a> model.
<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, in speech, etc.</p>
<h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2>
<div data-fill-with=status><p>
This is a public copy of the editors' draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
<p>
The (<a href=http://lists.w3.org/Archives/Public/public-fx/>archived</a>) public mailing list
<a href="mailto:public-fx@w3.org?Subject=%5Bweb-animations-css%5D%20PUT%20SUBJECT%20HERE">public-fx@w3.org</a>
(see <a href=http://www.w3.org/Mail/Request>instructions</a>)
is preferred for discussion of this specification.
When sending e-mail,
please put the text “web-animations-css” in the subject,
preferably like this:
“[web-animations-css] <em>…summary of comment…</em>”
<p>
This document was produced by the <a href=http://www.w3.org/Style/CSS/members>CSS Working Group</a>
(part of the <a href=http://www.w3.org/Style/>Style Activity</a>) and the <a href=http://www.w3.org/Graphics/SVG/WG/>SVG Working Group</a> (part of the
<a href=http://www.w3.org/Graphics/>Graphics Activity</a>).
<p>
This document was produced by groups operating under
the <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>.
W3C maintains a <a href=http://www.w3.org/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures (CSS)</a>
and a <a href=http://www.w3.org/2004/01/pp-impl/19480/status rel=disclosure>public list of any patent disclosures (SVG)</a>
made in connection with the deliverables of each group;
these pages also includes instructions for disclosing a patent.
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>
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>
<div data-fill-with=at-risk></div>
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2>
<div data-fill-with=table-of-contents><ul class=toc>
<li><a href=#introduction><span class=secno>1</span>Introduction</a>
<li><a href=#css-transitions><span class=secno>2</span>CSS Transitions</a>
<ul class=toc>
<li><a href=#css-transitions-events><span class=secno>2.1</span>CSS Transitions events</a></ul>
<li><a href=#css-animations><span class=secno>3</span>CSS Animations</a>
<ul class=toc>
<li><a href=#the-csskeyframesmap-mapping><span class=secno>3.1</span>The CSSKeyframesMap mapping</a>
<ul class=toc>
<li><a href=#the-csskeyframesmap-interface><span class=secno>3.1.1</span>The CSSKeyframesMap interface</a>
<li><a href=#documentkeyframes><span class=secno>3.1.2</span>Document.keyframes</a>
<li><a href=#conversion-of-css-keyframes><span class=secno>3.1.3</span>Converting a CSS Keyframes rule into a KeyframeEffect</a></ul>
<li><a href=#web-animations-instantiation><span class=secno>3.2</span>Web Animations Instantiation</a>
<li><a href=#css-animations-events><span class=secno>3.3</span>CSS Animations Events</a>
<li><a href=#instantiating-an-animating-effect><span class=secno>3.4</span>Instantiating the animating effect </a></ul>
<li><a href=#exposure-in-the-web-animations-api><span class=secno>4</span>Exposure in the Web Animations API</a>
<li><a href=#conformance><span class=secno></span> Conformance</a>
<ul class=toc>
<li><a href=#conventions><span class=secno></span> Document conventions</a>
<li><a href=#conformance-classes><span class=secno></span> Conformance classes</a>
<li><a href=#partial><span class=secno></span> Partial implementations</a>
<li><a href=#experimental><span class=secno></span> Experimental implementations</a>
<li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul>
<li><a href=#references><span class=secno></span> References</a>
<ul class=toc>
<li><a href=#normative><span class=secno></span> Normative References</a>
<li><a href=#informative><span class=secno></span> Informative References</a></ul>
<li><a href=#index><span class=secno></span> Index</a>
<li><a href=#property-index><span class=secno></span> Property index</a>
<li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
<h2 class="heading settled heading" data-level=1 id=introduction><span class=secno>1 </span><span class=content>Introduction</span><a class=self-link href=#introduction></a></h2>
<p><a data-biblio-type=informative data-link-type=biblio href=#css3-animations title=css3-animations>[CSS3-ANIMATIONS]</a> and <a data-biblio-type=informative data-link-type=biblio href=#css3-transitions title=css3-transitions>[CSS3-TRANSITIONS]</a> provide models for defining
declarative animations via CSS. <a data-biblio-type=informative data-link-type=biblio href=#svg12 title=svg12>[SVG12]</a> provides a model for defining
declarative animations via SVG. However, the three specifications do not
define or present a unified animation model.
<p>To solve this problem, the <a data-biblio-type=informative data-link-type=biblio href=#web-animations title=web-animations>[WEB-ANIMATIONS]</a> specification defines a
comprehensive animation model that is capable of supporting <a data-biblio-type=informative data-link-type=biblio href=#css3-animations title=css3-animations>[CSS3-ANIMATIONS]</a>,
<a data-biblio-type=informative data-link-type=biblio href=#css3-transitions title=css3-transitions>[CSS3-TRANSITIONS]</a> and <a data-biblio-type=informative data-link-type=biblio href=#svg12 title=svg12>[SVG12]</a>.
<p>This document describes how <a data-biblio-type=informative data-link-type=biblio href=#css3-animations title=css3-animations>[CSS3-ANIMATIONS]</a> and <a data-biblio-type=informative data-link-type=biblio href=#css3-transitions title=css3-transitions>[CSS3-TRANSITIONS]</a> are
supported by the <a data-biblio-type=informative data-link-type=biblio href=#web-animations title=web-animations>[WEB-ANIMATIONS]</a> model.
<h2 class="heading settled heading" data-level=2 id=css-transitions><span class=secno>2 </span><span class=content>CSS Transitions</span><a class=self-link href=#css-transitions></a></h2>
<div data-link-spec=css-transitions>
<p>For CSS Transitions, mappings into the Web Animations model are established
pairwise for a specific CSS property, the <dfn data-dfn-type=dfn data-noexport="" id=transitioning-property>transitioning property<a class=self-link href=#transitioning-property></a></dfn>, on
a specific element, the <dfn data-dfn-type=dfn data-noexport="" id=transitioning-element>transitioning element<a class=self-link href=#transitioning-element></a></dfn>.
<p>When a CSS Transition is started for the <a data-link-spec=css-transitions data-link-type=dfn href=#transitioning-property title="transitioning property">transitioning property</a> of a
<a data-link-spec=css-transitions data-link-type=dfn href=#transitioning-element title="transitioning element">transitioning element</a>, an <a data-link-spec=css-transitions data-link-type=dfn href=#animation title=animation>Animation</a> is constructed and
associated with a <a data-link-spec=css-transitions data-link-type=dfn href=#player title=player>Player</a> on the <a data-link-spec=css-transitions data-link-type=dfn href=#document-timeline title="document timeline">document timeline</a>, configured
with a <a data-link-spec=css-transitions data-link-type=dfn href=#custom-player-priority title="custom player priority">custom player priority</a> which ensures that the <a data-link-spec=css-transitions data-link-type=dfn href=#player title=player>Player</a> sorts
before <a data-link-spec=css-transitions data-link-type=dfn href=#player title=player>Player</a>s created through the Web Animations API and those generated
for CSS Animations. The <a data-link-spec=css-transitions data-link-type=dfn href=#animation title=animation>Animation</a> is configured as follows:
<p><ul>
<li>The <a data-link-spec=css-transitions data-link-type=dfn href=#target-element title="target element">target element</a> is set to the <a data-link-spec=css-transitions data-link-type=dfn href=#transitioning-element title="transitioning element">transitioning element</a>.
<li>The <a data-link-spec=css-transitions data-link-type=dfn href=#start-delay title="start delay">start delay</a> is set to the current used value of the <a class=property data-link-spec=css-transitions data-link-type=propdesc href=http://dev.w3.org/csswg/css-transitions-1/#transition-delay title=transition-delay>transition-delay</a>
property.
<li>The <a data-link-spec=css-transitions data-link-type=dfn href=#iteration-duration title="iteration duration">iteration duration</a> is set to the current used value of the
<a class=property data-link-spec=css-transitions data-link-type=propdesc href=http://dev.w3.org/csswg/css-transitions-1/#transition-duration title=transition-duration>transition-duration</a> property.
<li>The <a data-link-spec=css-transitions data-link-type=dfn href=#timing-function title="timing function">timing function</a> is set to the current used value of the
<a class=property data-link-spec=css-transitions 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.
<li>The <a data-link-spec=css-transitions data-link-type=dfn href=#animation-effect title="animation effect">animation effect</a> is set to a <a data-link-spec=css-transitions data-link-type=dfn href=#keyframe-animation-effect title="keyframe animation effect">keyframe animation effect</a>
with two <a data-link-spec=css-transitions data-link-type=dfn href=#keyframes title=keyframes>keyframes</a> defined as follows:
<ul>
<li>The first keyframe references the <a data-link-spec=css-transitions data-link-type=dfn href=#transitioning-property title="transitioning property">transitioning property</a> with a
value set to the <a data-link-spec=css-transitions data-link-type=dfn href=http://dev.w3.org/csswg/css-transitions-1/#start-value title="start value">start value</a> of the transition.
<li>The second and final keyframe references the
<a data-link-spec=css-transitions data-link-type=dfn href=#transitioning-property title="transitioning property">transitioning property</a> with a value set to the <a data-link-spec=css-transitions data-link-type=dfn href=http://dev.w3.org/csswg/css-transitions-1/#end-value title="end value">end value</a> of
the transition.
</ul>
</ul>
<p class=note>Note, changes to the values of the <a class=property data-link-spec=css-transitions data-link-type=propdesc href=http://dev.w3.org/csswg/css-transitions-1/#transition-delay title=transition-delay>transition-delay</a>, <a class=property data-link-spec=css-transitions data-link-type=propdesc href=http://dev.w3.org/csswg/css-transitions-1/#transition-duration title=transition-duration>transition-duration</a>,
and <a class=property data-link-spec=css-transitions data-link-type=propdesc href=http://dev.w3.org/csswg/css-transitions-1/#transition-timing-function title=transition-timing-function>transition-timing-function</a> have no effect on a transition once it has
started.
<p>When a transition affecting the <a data-link-spec=css-transitions data-link-type=dfn href=#transitioning-property title="transitioning property">transitioning property</a> of a
<a data-link-spec=css-transitions data-link-type=dfn href=#transitioning-element title="transitioning element">transitioning element</a> is removed or interrupted the <a data-link-spec=css-transitions data-link-type=dfn href=#cancel title=cancel>cancel</a>
method of the corresponding <a data-link-spec=css-transitions data-link-type=dfn href=#player title=player>Player</a> is called.
<p>When a transition affecting the <a data-link-spec=css-transitions data-link-type=dfn href=#transitioning-property title="transitioning property">transitioning property</a> of a
<a data-link-spec=css-transitions data-link-type=dfn href=#transitioning-element title="transitioning element">transitioning element</a> is reversed the <a data-link-spec=css-transitions data-link-type=dfn href=#cancel title=cancel>cancel</a>
method of the corresponding <a data-link-spec=css-transitions data-link-type=dfn href=#player title=player>Player</a> is called and a new <a data-link-spec=css-transitions data-link-type=dfn href=#player title=player>Player</a> is
generated as if the transition had just begun.
<h3 class="heading settled heading" data-level=2.1 id=css-transitions-events><span class=secno>2.1 </span><span class=content>CSS Transitions events</span><a class=self-link href=#css-transitions-events></a></h3>
The <a data-link-spec=css-transitions data-link-type=dfn href=http://dev.w3.org/csswg/css-transitions-1/#transitionend title=transitionend>transitionend</a> event is triggered to fire each time the
corresponding <a data-link-spec=css-transitions data-link-type=dfn href=#animation title=animation>Animation</a> enters the <a data-link-spec=css-transitions data-link-type=dfn href=#after-phase title="after phase">after phase</a> during a
<a data-link-spec=css-transitions data-link-type=dfn href=#sample title=sample>sample</a>.
</div>
<h2 class="heading settled heading" data-level=3 id=css-animations><span class=secno>3 </span><span class=content>CSS Animations</span><a class=self-link href=#css-animations></a></h2>
<h3 class="heading settled heading" data-level=3.1 id=the-csskeyframesmap-mapping><span class=secno>3.1 </span><span class=content>The CSSKeyframesMap mapping</span><a class=self-link href=#the-csskeyframesmap-mapping></a></h3>
<div data-link-spec=html5>
<pre class=idl style=display:none>//FIXME: figure out the appropriate thing to do here and remove this!
interface <dfn class=idl-code data-dfn-type=interface data-export="" data-global-name="" id=dom-string>String<a class=self-link href=#dom-string></a></dfn> { };
</pre>
<pre class=idl>[MapClass(<a data-link-spec=html5 data-link-type=idl href=#dom-string title=string>String</a>, <a data-link-spec=html5 data-link-type=idl href=#dom-animationeffect title=animationeffect>AnimationEffect</a>)]
interface <a class=idl-code data-global-name="" data-link-spec=html5 data-link-type=interface href=#dom-csskeyframesmap title=csskeyframesmap>CSSKeyframesMap</a> {
};
partial interface <a class=idl-code data-global-name="" data-link-spec=html5 data-link-type=interface href=http://www.w3.org/html/wg/drafts/html/CR/infrastructure.html#dom-document title=document>Document</a> {
readonly attribute <a data-link-spec=html5 data-link-type=idl href=#dom-csskeyframesmap title=csskeyframesmap>CSSKeyframesMap</a> <a class=idl-code data-global-name="Document<interface>/keyframes<attribute>" data-link-for=Document data-link-spec=html5 data-link-type=attribute data-readonly="" data-type=CSSKeyframesMap href=#dom-document-keyframes title=keyframes>keyframes</a>;
};
</pre>
</div>
<div data-link-spec=css-animations>
<h4 class="heading settled heading" data-level=3.1.1 id=the-csskeyframesmap-interface><span class=secno>3.1.1 </span><span class=content>The CSSKeyframesMap interface</span><a class=self-link href=#the-csskeyframesmap-interface></a></h4>
<p>The <dfn class=idl-code data-dfn-type=interface data-export="" id=dom-csskeyframesmap>CSSKeyframesMap<a class=self-link href=#dom-csskeyframesmap></a></dfn> interface defines a map type that can
be used to store sequences of Keyframes indexed by Strings.
<h4 class="heading settled heading" data-level=3.1.2 id=documentkeyframes><span class=secno>3.1.2 </span><span class=content>Document.keyframes</span><a class=self-link href=#documentkeyframes></a></h4>
<p>The <dfn class=idl-code data-dfn-for=Document data-dfn-type=attribute data-export="" id=dom-document-keyframes>keyframes<a class=self-link href=#dom-document-keyframes></a></dfn> attribute on the
<a class=idl-code data-link-spec=html5 data-link-type=interface href=http://www.w3.org/html/wg/drafts/html/CR/infrastructure.html#dom-document title=document>Document</a> interface references a map of type
<a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-csskeyframesmap title=csskeyframesmap>CSSKeyframesMap</a>.
<p class=note>Note: The <a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-csskeyframesmap title=csskeyframesmap>CSSKeyframesMap</a> enables animations created using the
Web Animations API to re-use the keyframe rules declared by CSS, and for
animations declared by CSS to act on <a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-animationeffect title=animationeffect>AnimationEffect</a>s created
through the API.
<p class=note>Note: The processing defined in this section does not alter the way in which
keyframes rules are selected when CSS animations are started, unless a name is
explicitly overridden by setting its value in the map.
<p>When a new <a class=css-code data-link-spec=css-animations data-link-type=at-rule href=http://dev.w3.org/csswg/css-animations-1/#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule name is encountered in a
style sheet, the action taken depends upon the current value stored against the
name in the <a class=idl-code data-link-spec=css-animations data-link-type=attribute href=#dom-document-keyframes title=keyframes>keyframes</a> map.
<dl>
<dt>If the current value has never been set, or has only been set due to
style changes:</dt>
<dd>
<p>The keyframes defined by the <a class=css-code data-link-spec=css-animations data-link-type=at-rule href=http://dev.w3.org/csswg/css-animations-1/#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule are
converted into a <a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-keyframeeffect title=keyframeeffect>KeyframeEffect</a> (see
<a data-section="" href=#conversion-of-css-keyframes>§3.1.3 Converting a CSS Keyframes rule into a
KeyframeEffect</a>), then stored against the
name in the <a class=idl-code data-link-spec=css-animations data-link-type=attribute href=#dom-document-keyframes title=keyframes>keyframes</a> map.
<dt>Otherwise:
<dd>
<p>The rule is ignored.
</dl>
<p class=issue id=issue-1a6a93a1><a class=self-link href=#issue-1a6a93a1></a> Should the KeyframeEffects generated by @keyframes rules be read-only?
<p>When the used <a class=css-code data-link-spec=css-animations data-link-type=at-rule href=http://dev.w3.org/csswg/css-animations-1/#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule associated with a
given name changes due to a change in a style sheet, the action taken depends
upon the current value stored against the name in the
<a class=idl-code data-link-spec=css-animations data-link-type=attribute href=#dom-document-keyframes title=keyframes>keyframes</a> map.
<dl>
<dt>If the current value has only been set due to style changes:
<dd>
<p>The keyframes defined by the new rule are converted into a
<a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-keyframeeffect title=keyframeeffect>KeyframeEffect</a>
(see <a data-section="" href=#conversion-of-css-keyframes>§3.1.3 Converting a CSS Keyframes rule into a
KeyframeEffect</a>), then stored
against the name in the <a class=idl-code data-link-spec=css-animations data-link-type=attribute href=#dom-document-keyframes title=keyframes>keyframes</a> map.
<dt>Otherwise:
<dd>The change is ignored.
</dl>
<p>When the last <a class=css-code data-link-spec=css-animations data-link-type=at-rule href=http://dev.w3.org/csswg/css-animations-1/#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule for a given name is
removed from a style sheet, the action taken depends upon the current value
stored against the name in the <a class=idl-code data-link-spec=css-animations data-link-type=attribute href=#dom-document-keyframes title=keyframes>keyframes</a>
map.
<dl>
<dt>If the current value has only been set due to style changes:
<dd>
<p>The value referenced by the <a class=css-code data-link-spec=css-animations data-link-type=at-rule href=http://dev.w3.org/csswg/css-animations-1/#at-ruledef-keyframes title=@keyframes>@keyframes</a> name is
cleared from the <a class=idl-code data-link-spec=css-animations data-link-type=attribute href=#dom-document-keyframes title=keyframes>keyframes</a> map.
<dt>Otherwise:
<dd>The removal is ignored.
</dl>
<h4 class="heading settled heading" data-level=3.1.3 id=conversion-of-css-keyframes><span class=secno>3.1.3 </span><span class=content>Converting a CSS Keyframes rule into a
KeyframeEffect</span><a class=self-link href=#conversion-of-css-keyframes></a></h4>
<p>A CSS <a class=css-code data-link-spec=css-animations data-link-type=at-rule href=http://dev.w3.org/csswg/css-animations-1/#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule <em>keyframes</em> is
converted into a <a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-keyframeeffect title=keyframeeffect>KeyframeEffect</a> using the following process:
<ol>
<li>Initialize an empty list <em>keyframeList</em>.
<li>For each <em>keyframe</em> in keyframes:
<ol>
<li>Create a new dictionary <em>newKeyframe</em>.
<li>Set <em>newKeyframe</em>’s <a data-link-spec=css-animations data-link-type=dfn href=#offset title=offset>offset</a> to the offset defined by
<em>keyframe</em>.
<li>If <em>keyframe</em> defines an <a class=property data-link-spec=css-animations data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation-timing-function title=animation-timing-function>animation-timing-function</a>, set
<em>newKeyframe</em>’s <a data-link-spec=css-animations data-link-type=dfn href=#easing title=easing>easing</a> to the defined <a class=property data-link-spec=css-animations data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation-timing-function title=animation-timing-function>animation-timing-function</a>.
<li>For each <em>property</em> defined in <em>keyframe</em>:
<ol>
<li>Set <em>newKeyframe[property]</em> to the value associated with that
property in <em>keyframe</em>
<li>Add <em>property</em> to referencedProperties.
</ol>
</ol>
<li>Add <em>newKeyframe</em> to <em>keyframeList</em>.
<li>Remove keyframes with duplicated offsets from <em>keyframeList</em>such that
only the last keyframe to specify a given offset remains.
<li>Construct a new <a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-keyframeeffect title=keyframeeffect>KeyframeEffect</a>, providing
<em>keyframeList</em> as the frames parameter.
</ol>
</div>
<h3 class="heading settled heading" data-level=3.2 id=web-animations-instantiation><span class=secno>3.2 </span><span class=content>Web Animations Instantiation</span><a class=self-link href=#web-animations-instantiation></a></h3>
<div data-link-spec=css-animations>
<p>For CSS Animations, mappings into the Web Animations model are established
pairwise between a specific <a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-animationeffect title=animationeffect>AnimationEffect</a>, the
<dfn data-dfn-type=dfn data-noexport="" id=animating-effect>animating effect<a class=self-link href=#animating-effect></a></dfn>, and a specific element, the
<dfn data-dfn-type=dfn data-noexport="" id=animating-element>animating element<a class=self-link href=#animating-element></a></dfn>.
<p>When a CSS Animation is to be started, the value of <a class=property data-link-spec=css-animations data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation-name title=animation-name>animation-name</a> is used
as an index into the <a data-link-spec=css-animations data-link-type=dfn href=#keyframes title=keyframes>keyframes</a> map, and the matching
<a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-animationeffect title=animationeffect>AnimationEffect</a> (if any) is used to instantiate the
<a data-link-spec=css-animations data-link-type=dfn href=#animating-effect title="animating effect">animating effect</a> by following the procedure defined below
(see <a data-section="" href=#instantiating-an-animating-effect>§3.4 Instantiating the animating effect
</a>).
<p>When a CSS Animation is started an <a data-link-spec=css-animations data-link-type=dfn href=#animation title=animation>Animation</a> is constructed and
associated with a <a data-link-spec=css-animations data-link-type=dfn href=#player title=player>Player</a> on the <a data-link-spec=css-animations data-link-type=dfn href=#document-timeline title="document timeline">Document Timeline</a>. The animation
is configured as follows:
<p><ul>
<li>The <a data-link-spec=css-animations data-link-type=dfn href=#target-element title="target element">target element</a> is set to the <a data-link-spec=css-animations data-link-type=dfn href=#animating-element title="animating element">animating element</a>.
<li>The <a data-link-spec=css-animations data-link-type=dfn href=#start-delay title="start delay">start delay</a> is set to the current used value of the
<a class=property data-link-spec=css-animations data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation-delay title=animation-delay>animation-delay</a> property for the <a data-link-spec=css-animations data-link-type=dfn href=#animating-element title="animating element">animating element</a>.
<li>The <a data-link-spec=css-animations data-link-type=dfn href=#iteration-duration title="iteration duration">iteration duration</a> is set to the current used value of the
<a class=property data-link-spec=css-animations data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation-duration title=animation-duration>animation-duration</a> property for the <a data-link-spec=css-animations data-link-type=dfn href=#animating-element title="animating element">animating element</a>.
<li>The <a data-link-spec=css-animations data-link-type=dfn href=#iteration-count title="iteration count">iteration count</a> is set to the current used value of the
<a class=property data-link-spec=css-animations data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation-iteration-count title=animation-iteration-count>animation-iteration-count</a> property for the <a data-link-spec=css-animations data-link-type=dfn href=#animating-element title="animating element">animating element</a>.
<li>The <a data-link-spec=css-animations data-link-type=dfn href=#direction title=direction>direction</a> is set to the current used value of the
<a class=property data-link-spec=css-animations data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation-direction title=animation-direction>animation-direction</a> property for the <a data-link-spec=css-animations data-link-type=dfn href=#animating-element title="animating element">animating element</a>.
<li>The <a data-link-spec=css-animations data-link-type=dfn href=#fill-mode title="fill mode">fill mode</a> is set to the current used value of the
<a class=property data-link-spec=css-animations data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> property for the <a data-link-spec=css-animations data-link-type=dfn href=#animating-element title="animating element">animating element</a>.
<li>The <a data-link-spec=css-animations data-link-type=dfn href=#animation-effect title="animation effect">animation effect</a> is set to the <a data-link-spec=css-animations data-link-type=dfn href=#animating-effect title="animating effect">animating effect</a>
</ul>
<p class=issue id=issue-0f1dc13a><a class=self-link href=#issue-0f1dc13a></a> Deal with animation-play-state
<p class=issue id=issue-66af4048><a class=self-link href=#issue-66af4048></a> Explain where we need to cancel the Player for a css animation.
<h3 class="heading settled heading" data-level=3.3 id=css-animations-events><span class=secno>3.3 </span><span class=content>CSS Animations Events</span><a class=self-link href=#css-animations-events></a></h3>
<p>The <a class=idl-code data-link-spec=css-animations data-link-type=event href=http://dev.w3.org/csswg/css-animations-1/#dom-animationevent-animationstart title=animationstart>animationstart</a> event is triggered to fire each time the
corresponding <a data-link-spec=css-animations data-link-type=dfn href=#animation title=animation>Animation</a> enters the <a data-link-spec=css-animations data-link-type=dfn href=#active-phase title="active phase">active phase</a> or
<a data-link-spec=css-animations data-link-type=dfn href=#after-phase title="after phase">after phase</a> during a <a data-link-spec=css-animations data-link-type=dfn href=#sample title=sample>sample</a>.
<p>The <a class=idl-code data-link-spec=css-animations data-link-type=event href=http://dev.w3.org/csswg/css-animations-1/#dom-animationevent-animationiteration title=animationiteration>animationiteration</a> event is triggered to fire, on each <a data-link-spec=css-animations data-link-type=dfn href=#sample title=sample>sample</a>
where all of the following conditions are met:
<ol>
<li>the corresponding <a data-link-spec=css-animations data-link-type=dfn href=#animation title=animation>Animation</a> is in the <a data-link-spec=css-animations data-link-type=dfn href=#active-phase title="active phase">active phase</a>
<li>the corresponding <a data-link-spec=css-animations data-link-type=dfn href=#animation title=animation>Animation</a> was in the <a data-link-spec=css-animations data-link-type=dfn href=#active-phase title="active phase">active phase</a> on the
last <a data-link-spec=css-animations data-link-type=dfn href=#sample title=sample>sample</a>
<li>the corresponding <a data-link-spec=css-animations data-link-type=dfn href=#animation title=animation>Animation</a> has a <a data-link-spec=css-animations data-link-type=dfn href=#current-iteration title="current iteration">current iteration</a> which is
different to the
<a data-link-spec=css-animations data-link-type=dfn href=#current-iteration title="current iteration">current iteration</a> of the last <a data-link-spec=css-animations data-link-type=dfn href=#sample title=sample>sample</a>.
</ol>
<p>The <a class=idl-code data-link-spec=css-animations data-link-type=event href=http://dev.w3.org/csswg/css-animations-1/#dom-animationevent-animationend title=animationend>animationend</a> event is triggered to fire each time the
corresponding <a data-link-spec=css-animations data-link-type=dfn href=#animation title=animation>Animation</a> enters the <a data-link-spec=css-animations data-link-type=dfn href=#after-phase title="after phase">after phase</a> during a
<a data-link-spec=css-animations data-link-type=dfn href=#sample title=sample>sample</a>.
<h3 class="heading settled heading" data-level=3.4 id=instantiating-an-animating-effect><span class=secno>3.4 </span><span class=content>Instantiating the animating effect
</span><a class=self-link href=#instantiating-an-animating-effect></a></h3>
<p>The <a data-link-spec=css-animations data-link-type=dfn href=#animating-effect title="animating effect">animating effect</a> is instantiated from an
<a class=idl-code data-link-spec=css-animations data-link-type=interface href=#dom-animationeffect title=animationeffect>AnimationEffect</a> (the <em>reference effect</em>) stored in the
<a class=idl-code data-link-spec=css-animations data-link-type=attribute href=#dom-document-keyframes title=keyframes>keyframes</a> attribute using the following process:
<p class=issue id=issue-2e72571b><a class=self-link href=#issue-2e72571b></a> turn this into boring old specificese
<dl>
<dt>If the <em>reference effect</em> is a KeyframeEffect which was converted
from a CSS <a class=css-code data-link-spec=css-animations data-link-type=at-rule href=http://dev.w3.org/csswg/css-animations-1/#at-ruledef-keyframes title=@keyframes>@keyframes</a> rule using the process
defined in <a data-section="" href=#conversion-of-css-keyframes>§3.1.3 Converting a CSS Keyframes rule into a
KeyframeEffect</a>:
<dd>
<ol>
<li>The <em>result effect</em> is created as a clone of the
<em>reference effect</em>.
<li>Convert "add" keyframes at an offset of 0 and 1 by snapshotting
their referenced properties from the computed style of the
<a data-link-spec=css-animations data-link-type=dfn href=#animating-element title="animating element">animating element</a>, then changing the keyframe to a "replace" keyframe.
<li>Set the <a data-link-spec=css-animations data-link-type=dfn href=#easing title=easing>easing</a> of all keyframes which do not have an <a data-link-spec=css-animations data-link-type=dfn href=#easing title=easing>easing</a>
to the value of <a class=property data-link-spec=css-animations data-link-type=propdesc href=http://dev.w3.org/csswg/css-animations-1/#propdef-animation-timing-function title=animation-timing-function>animation-timing-function</a>.
</ol>
<dt>Otherwise
<dd> The <a data-link-spec=css-animations data-link-type=dfn href=#animating-effect title="animating effect">animating effect</a> is the <em>reference effect</em>.
<h2 class="heading settled heading" data-level=4 id=exposure-in-the-web-animations-api><span class=secno>4 </span><span class=content>Exposure in the Web Animations API</span><a class=self-link href=#exposure-in-the-web-animations-api></a></h2>
<p><a data-link-spec=css-animations data-link-type=dfn href=#player title=player>Player</a>s generated by CSS Animations and CSS Transitions are accessible
via <a data-link-spec=css-animations data-link-type=dfn href=#getanimationplayers title=getanimationplayers>getAnimationPlayers</a> with the restriction that <a data-link-spec=css-animations data-link-type=dfn href=#source title=source>source</a> will
point to a read-only <a data-link-spec=css-animations data-link-type=dfn href=#timeditem title=timeditem>TimedItem</a> which disallows changes to its
<a data-link-spec=css-animations data-link-type=dfn href=#specified-timing title="specified timing">specified timing</a> and <a data-link-spec=css-animations data-link-type=dfn href=#effect title=effect>effect</a>.
<p class=note>Note: The <a data-link-spec=css-animations data-link-type=dfn href=#player title=player>Player</a> remains fully functional. The <a data-link-spec=css-animations data-link-type=dfn href=#source title=source>source</a>,
<a data-link-spec=css-animations data-link-type=dfn href=#playbackrate title=playbackrate>playbackRate</a>, <a data-link-spec=css-animations data-link-type=dfn href=#currenttime title=currenttime>currentTime</a>, startTime and play control methods will
be live and function as normal.
</dl></div>
<div style=display:none>
REMOVE ME: Definitions that should be resolved by Web Animations
<p><dfn data-dfn-type=dfn data-noexport="" id=animation>animation<a class=self-link href=#animation></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=player>player<a class=self-link href=#player></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=document-timeline>document timeline<a class=self-link href=#document-timeline></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=target-element>target element<a class=self-link href=#target-element></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=start-delay>start delay<a class=self-link href=#start-delay></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=iteration-duration>iteration duration<a class=self-link href=#iteration-duration></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=timing-function>timing function<a class=self-link href=#timing-function></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=animation-effect>animation effect<a class=self-link href=#animation-effect></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=keyframe-animation-effect>keyframe animation effect<a class=self-link href=#keyframe-animation-effect></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=keyframes>keyframes<a class=self-link href=#keyframes></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=after-phase>after phase<a class=self-link href=#after-phase></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=custom-player-priority>custom player priority<a class=self-link href=#custom-player-priority></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=cancel>cancel<a class=self-link href=#cancel></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=getanimationplayers>getanimationplayers<a class=self-link href=#getanimationplayers></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=timeditem>TimedItem<a class=self-link href=#timeditem></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=source>source<a class=self-link href=#source></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=specified-timing>specified timing<a class=self-link href=#specified-timing></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=effect>effect<a class=self-link href=#effect></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=playbackrate>playbackRate<a class=self-link href=#playbackrate></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=currenttime>currentTime<a class=self-link href=#currenttime></a></dfn>
<dfn class=idl-code data-dfn-type=interface data-export="" id=dom-keyframeeffect>keyframeEffect<a class=self-link href=#dom-keyframeeffect></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=offset>offset<a class=self-link href=#offset></a></dfn>
<dfn class=idl-code data-dfn-type=interface data-export="" id=dom-animationeffect>animationEffect<a class=self-link href=#dom-animationeffect></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=sample>sample<a class=self-link href=#sample></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=easing>easing<a class=self-link href=#easing></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=iteration-count>iteration count<a class=self-link href=#iteration-count></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=direction>direction<a class=self-link href=#direction></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=fill-mode>fill mode<a class=self-link href=#fill-mode></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=current-iteration>current iteration<a class=self-link href=#current-iteration></a></dfn>
<dfn data-dfn-type=dfn data-noexport="" id=active-phase>active phase<a class=self-link href=#active-phase></a></dfn>
</div>
<h2 class="no-ref no-num heading settled heading" id=conformance><span class=content>
Conformance</span><a class=self-link href=#conformance></a></h2>
<h3 class="no-ref heading settled heading" id=conventions><span class=content>
Document conventions</span><a class=self-link href=#conventions></a></h3>
<p>Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words "MUST",
"MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
"RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
<p>All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=rfc2119>[RFC2119]</a></p>
<p>Examples in this specification are introduced with the words "for example"
or are set apart from the normative text with <code>class="example"</code>,
like this:
<div class=example>
<p>This is an example of an informative example.</p>
</div>
<p>Informative notes begin with the word "Note" and are set apart from the
normative text with <code>class="note"</code>, like this:
<p class=note>Note, this is an informative note.</p>
<h3 class="no-ref heading settled heading" id=conformance-classes><span class=content>
Conformance classes</span><a class=self-link href=#conformance-classes></a></h3>
<p>Conformance to this specification
is defined for three conformance classes:
<dl>
<dt>style sheet
<dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#style-sheet>CSS
style sheet</a>.
<dt>renderer
<dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a>
that interprets the semantics of a style sheet and renders
documents that use them.
<dt>authoring tool
<dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a>
that writes a style sheet.
</dl>
<p>A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
<p>A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
<p>An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
<h3 class="no-ref heading settled heading" id=partial><span class=content>
Partial implementations</span><a class=self-link href=#partial></a></h3>
<p>So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers <strong>must</strong>
treat as invalid (and <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignore
as appropriate</a>) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents <strong>must not</strong> selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.</p>
<h3 class="no-ref heading settled heading" id=experimental><span class=content>
Experimental implementations</span><a class=self-link href=#experimental></a></h3>
<p>To avoid clashes with future CSS features, the CSS2.1 specification
reserves a <a href=http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>prefixed
syntax</a> for proprietary and experimental extensions to CSS.
<p>Prior to a specification reaching the Candidate Recommendation stage
in the W3C process, all implementations of a CSS feature are considered
experimental. The CSS Working Group recommends that implementations
use a vendor-prefixed syntax for such features, including those in
W3C Working Drafts. This avoids incompatibilities with future changes
in the draft.
</p>
<h3 class="no-ref heading settled heading" id=testing><span class=content>
Non-experimental implementations</span><a class=self-link href=#testing></a></h3>
<p>Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
<p>To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
<p>Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
<a href=http://www.w3.org/Style/CSS/Test/>http://www.w3.org/Style/CSS/Test/</a>.
Questions should be directed to the
<a href=http://lists.w3.org/Archives/Public/public-css-testsuite>public-css-testsuite@w3.org</a>
mailing list.
<h2 class="no-num no-ref heading settled heading" id=references><span class=content>
References</span><a class=self-link href=#references></a></h2>
<h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
Normative References</span><a class=self-link href=#normative></a></h3>
<div data-fill-with=normative-references><dl><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></dl></div>
<h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
Informative References</span><a class=self-link href=#informative></a></h3>
<div data-fill-with=informative-references><dl><dt id=css3-animations title=CSS3-ANIMATIONS><a class=self-link href=#css3-animations></a>[CSS3-ANIMATIONS]<dd>Dean Jackson; et al. <a href=http://www.w3.org/TR/2013/WD-css3-animations-20130219/>CSS Animations</a>. 19 February 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-animations-20130219/>http://www.w3.org/TR/2013/WD-css3-animations-20130219/</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=svg12 title=SVG12><a class=self-link href=#svg12></a>[SVG12]<dd>Dean Jackson; Craig Northway. <a href=http://www.w3.org/TR/2005/WD-SVG12-20050413/>Scalable Vector Graphics (SVG) Full 1.2 Specification</a>. 13 April 2005. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2005/WD-SVG12-20050413/>http://www.w3.org/TR/2005/WD-SVG12-20050413/</a></dl></div>
<h2 class="no-num no-ref heading settled heading" id=index><span class=content>
Index</span><a class=self-link href=#index></a></h2>
<div data-fill-with=index><ul class=indexlist>
<li>active phase, <a href=#active-phase title="section 3.2">3.2</a>
<li>after phase, <a href=#after-phase title="section 3.2">3.2</a>
<li>animating effect, <a href=#animating-effect title="section 3.2">3.2</a>
<li>animating element, <a href=#animating-element title="section 3.2">3.2</a>
<li>animation, <a href=#animation title="section 3.2">3.2</a>
<li>animationEffect, <a href=#dom-animationeffect title="section 3.2">3.2</a>
<li>animation effect, <a href=#animation-effect title="section 3.2">3.2</a>
<li>cancel, <a href=#cancel title="section 3.2">3.2</a>
<li>CSSKeyframesMap, <a href=#dom-csskeyframesmap title="section 3.1.1">3.1.1</a>
<li>current iteration, <a href=#current-iteration title="section 3.2">3.2</a>
<li>currentTime, <a href=#currenttime title="section 3.2">3.2</a>
<li>custom player priority, <a href=#custom-player-priority title="section 3.2">3.2</a>
<li>direction, <a href=#direction title="section 3.2">3.2</a>
<li>document timeline, <a href=#document-timeline title="section 3.2">3.2</a>
<li>easing, <a href=#easing title="section 3.2">3.2</a>
<li>effect, <a href=#effect title="section 3.2">3.2</a>
<li>fill mode, <a href=#fill-mode title="section 3.2">3.2</a>
<li>getanimationplayers, <a href=#getanimationplayers title="section 3.2">3.2</a>
<li>iteration count, <a href=#iteration-count title="section 3.2">3.2</a>
<li>iteration duration, <a href=#iteration-duration title="section 3.2">3.2</a>
<li>keyframe animation effect, <a href=#keyframe-animation-effect title="section 3.2">3.2</a>
<li>keyframeEffect, <a href=#dom-keyframeeffect title="section 3.2">3.2</a>
<li>keyframes<ul><li>attribute for Document, <a href=#dom-document-keyframes title="section 3.1.2">3.1.2</a>
<li>definition of, <a href=#keyframes title="section 3.2">3.2</a>
</ul><li>offset, <a href=#offset title="section 3.2">3.2</a>
<li>playbackRate, <a href=#playbackrate title="section 3.2">3.2</a>
<li>player, <a href=#player title="section 3.2">3.2</a>
<li>sample, <a href=#sample title="section 3.2">3.2</a>
<li>source, <a href=#source title="section 3.2">3.2</a>
<li>specified timing, <a href=#specified-timing title="section 3.2">3.2</a>
<li>start delay, <a href=#start-delay title="section 3.2">3.2</a>
<li>String, <a href=#dom-string title="section 3.1">3.1</a>
<li>target element, <a href=#target-element title="section 3.2">3.2</a>
<li>TimedItem, <a href=#timeditem title="section 3.2">3.2</a>
<li>timing function, <a href=#timing-function title="section 3.2">3.2</a>
<li>transitioning element, <a href=#transitioning-element title="section 2">2</a>
<li>transitioning property, <a href=#transitioning-property title="section 2">2</a>
</ul></div>
<h2 class="no-num no-ref heading settled heading" id=property-index><span class=content>
Property index</span><a class=self-link href=#property-index></a></h2>
<div data-fill-with=property-index><p>No properties defined.</div>
<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue> Should the KeyframeEffects generated by @keyframes rules be read-only?
<a href=#issue-1a6a93a1> ↵ </a></div><div class=issue> Deal with animation-play-state
<a href=#issue-0f1dc13a> ↵ </a></div><div class=issue> Explain where we need to cancel the Player for a css animation.
<a href=#issue-66af4048> ↵ </a></div><div class=issue> turn this into boring old specificese
<a href=#issue-2e72571b> ↵ </a></div></div>