Skip to content

Commit 75c440a

Browse files
birtlesbirtles
committed
[css-animations-2] Add animation composite order section
1 parent 8acea35 commit 75c440a

File tree

2 files changed

+93
-0
lines changed

2 files changed

+93
-0
lines changed

‎css-animations-2/Overview.bs

+50
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,12 @@ urlPrefix: https://w3c.github.io/web-animations/; type: method; for: Animation;
3838
urlPrefix: https://w3c.github.io/web-animations/; type: method; for: KeyframeEffectReadOnly; spec: web-animations
3939
text: getFrames()
4040
urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animations
41+
text: animation
4142
text: animation playback rate
43+
text: animation type
4244
text: current iteration
4345
text: current time
46+
text: global animation list
4447
text: idle play state
4548
text: pause an animation
4649
text: play an animation
@@ -109,6 +112,53 @@ animation.effect = null;
109112
110113
</div>
111114
115+
## Animation composite order ## {#animation-composite-order}
116+
117+
<a spec='web-animations'>Animations</a> generated from the markup or interfaces
118+
(e.g. the {{CSSAnimation()}} constructor) defined in this specification have an
119+
<a>animation type</a> of &lsquo;CSS Animation&rsquo;.
120+
121+
CSS Animations <em>with</em> an <a>owning element</a> have a <em>later</em>
122+
composite order than CSS Transitions but an <em>earlier</em> composite order
123+
than animations without a specific <a>animation type</a>.
124+
125+
Within the set of CSS Animations <em>with</em> an <a>owning element</a>, two
126+
animations <var>A</var> and <var>B</var> are sorted in composite order (first to
127+
last) as follows:
128+
129+
1. If the <a>owning element</a> of <var>A</var> and <var>B</var>
130+
differs, sort <var>A</var> and <var>B</var> by <a>tree order</a>
131+
of their corresponding <a>owning elements</a>.
132+
With regard to pseudo-elements, the sort order is as follows:
133+
134+
* element
135+
* ::before
136+
* ::after
137+
* element children
138+
139+
1. Otherwise, sort <var>A</var> and <var>B</var> based on their position in the
140+
computed value of the 'animation-name' property of the (common) <a>owning
141+
element</a>.
142+
143+
The composite order of CSS Animations <em>without</em> an <a>owning element</a>
144+
is based on their position in the <a>global animation list</a>.
145+
146+
CSS Animations generated using the markup defined in this specification are
147+
<em>not</em> added to the <a>global animation list</a> when they are created.
148+
Instead, these animations are appended to the <a>global animation list</a> at
149+
the first moment when they transition out of the <a>idle play state</a> after
150+
being disassociated from their <a>owning element</a>.
151+
CSS Animations that have been disassociated from their <a>owning element</a>
152+
but are still <a lt="idle play state">idle</a> do not have a defined
153+
composite order.
154+
155+
Note, this behavior relies on the fact that disassociating an animation
156+
from its <a>owning element</a> always causes it to enter (or remain) in the
157+
<a>idle play state</a>.
158+
159+
CSS Animations created using the {{CSSAnimation()}} constructor are appended
160+
to the <a>global animation list</a> at the moment they are constructed.
161+
112162
# Keyframes # {#keyframes}
113163
114164
## The 'animation-play-state' property ## {#animation-play-state}

‎css-animations-2/Overview.html

+43
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
127127
<a href="#animations"><span class="secno">2</span> <span class="content">Animations</span></a>
128128
<ul class="toc">
129129
<li><a href="#owning-element-section"><span class="secno">2.1</span> <span class="content">Owning element</span></a>
130+
<li><a href="#animation-composite-order"><span class="secno">2.2</span> <span class="content">Animation composite order</span></a>
130131
</ul>
131132
<li>
132133
<a href="#keyframes"><span class="secno">3</span> <span class="content">Keyframes</span></a>
@@ -213,6 +214,44 @@ <h3 class="heading settled" data-level="2.1" id="owning-element-section"><span c
213214
// animation.effect.target is undefined != animation’s owning element
214215
</pre>
215216
</div>
217+
<h3 class="heading settled" data-level="2.2" id="animation-composite-order"><span class="secno">2.2. </span><span class="content">Animation composite order</span><a class="self-link" href="#animation-composite-order"></a></h3>
218+
<p><a data-link-type="dfn" href="https://w3c.github.io/web-animations/#animation">Animations</a> generated from the markup or interfaces
219+
(e.g. the <code class="idl"><a data-link-type="idl" href="#dom-cssanimation-cssanimation">CSSAnimation()</a></code> constructor) defined in this specification have an <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#animation-type">animation type</a> of ‘CSS Animation’.</p>
220+
<p>CSS Animations <em>with</em> an <a data-link-type="dfn" href="#owning-element">owning element</a> have a <em>later</em> composite order than CSS Transitions but an <em>earlier</em> composite order
221+
than animations without a specific <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#animation-type">animation type</a>.</p>
222+
<p>Within the set of CSS Animations <em>with</em> an <a data-link-type="dfn" href="#owning-element">owning element</a>, two
223+
animations <var>A</var> and <var>B</var> are sorted in composite order (first to
224+
last) as follows:</p>
225+
<ol>
226+
<li data-md="">
227+
<p>If the <a data-link-type="dfn" href="#owning-element">owning element</a> of <var>A</var> and <var>B</var> differs, sort <var>A</var> and <var>B</var> by <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order">tree order</a> of their corresponding <a data-link-type="dfn" href="#owning-element">owning elements</a>.
228+
With regard to pseudo-elements, the sort order is as follows:</p>
229+
<ul>
230+
<li data-md="">
231+
<p>element</p>
232+
<li data-md="">
233+
<p>::before</p>
234+
<li data-md="">
235+
<p>::after</p>
236+
<li data-md="">
237+
<p>element children</p>
238+
</ul>
239+
<li data-md="">
240+
<p>Otherwise, sort <var>A</var> and <var>B</var> based on their position in the
241+
computed value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-name">animation-name</a> property of the (common) <a data-link-type="dfn" href="#owning-element">owning
242+
element</a>.</p>
243+
</ol>
244+
<p>The composite order of CSS Animations <em>without</em> an <a data-link-type="dfn" href="#owning-element">owning element</a> is based on their position in the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#global-animation-list">global animation list</a>.</p>
245+
<p>CSS Animations generated using the markup defined in this specification are <em>not</em> added to the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#global-animation-list">global animation list</a> when they are created.
246+
Instead, these animations are appended to the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#global-animation-list">global animation list</a> at
247+
the first moment when they transition out of the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#idle-play-state">idle play state</a> after
248+
being disassociated from their <a data-link-type="dfn" href="#owning-element">owning element</a>.
249+
CSS Animations that have been disassociated from their <a data-link-type="dfn" href="#owning-element">owning element</a> but are still <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#idle-play-state">idle</a> do not have a defined
250+
composite order.</p>
251+
<p class="note" role="note">Note, this behavior relies on the fact that disassociating an animation
252+
from its <a data-link-type="dfn" href="#owning-element">owning element</a> always causes it to enter (or remain) in the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#idle-play-state">idle play state</a>.</p>
253+
<p>CSS Animations created using the <code class="idl"><a data-link-type="idl" href="#dom-cssanimation-cssanimation">CSSAnimation()</a></code> constructor are appended
254+
to the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#global-animation-list">global animation list</a> at the moment they are constructed.</p>
216255
<h2 class="heading settled" data-level="3" id="keyframes"><span class="secno">3. </span><span class="content">Keyframes</span><a class="self-link" href="#keyframes"></a></h2>
217256
<h3 class="heading settled" data-level="3.1" id="animation-play-state"><span class="secno">3.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> property</span><a class="self-link" href="#animation-play-state"></a></h3>
218257
<h4 class="heading settled" data-level="3.1.1" id="interaction-between-animation-play-state-and-web-animations-API"><span class="secno">3.1.1. </span><span class="content">Interaction between <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> and the Web Animations API</span><a class="self-link" href="#interaction-between-animation-play-state-and-web-animations-API"></a></h4>
@@ -556,16 +595,20 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
556595
<a data-link-type="biblio" href="#biblio-dom-ls">[dom-ls]</a> defines the following terms:
557596
<ul>
558597
<li><a href="https://dom.spec.whatwg.org/#element">Element</a>
598+
<li><a href="https://dom.spec.whatwg.org/#concept-tree-order">tree order</a>
559599
</ul>
560600
<li>
561601
<a data-link-type="biblio" href="#biblio-web-animations">[web-animations]</a> defines the following terms:
562602
<ul>
563603
<li><a href="https://w3c.github.io/web-animations/#animation">Animation</a>
564604
<li><a href="https://w3c.github.io/web-animations/#keyframeeffectreadonly">KeyframeEffectReadOnly</a>
605+
<li><a href="https://w3c.github.io/web-animations/#animation">animation</a>
565606
<li><a href="https://w3c.github.io/web-animations/#animation-playback-rate">animation playback rate</a>
607+
<li><a href="https://w3c.github.io/web-animations/#animation-type">animation type</a>
566608
<li><a href="https://w3c.github.io/web-animations/#current-iteration">current iteration</a>
567609
<li><a href="https://w3c.github.io/web-animations/#current-time">current time</a>
568610
<li><a href="https://w3c.github.io/web-animations/#getframes">getFrames()</a>
611+
<li><a href="https://w3c.github.io/web-animations/#global-animation-list">global animation list</a>
569612
<li><a href="https://w3c.github.io/web-animations/#idle-play-state">idle play state</a>
570613
<li><a href="https://w3c.github.io/web-animations/#pause-an-animation">pause an animation</a>
571614
<li><a href="https://w3c.github.io/web-animations/#pause">pause()</a>

0 commit comments

Comments
 (0)