Skip to content

Commit df85c10

Browse files
birtlesbirtles
committed
[css-animations-2] Spec interaction between animation-play-state and API
1 parent 11d19c6 commit df85c10

File tree

2 files changed

+240
-5
lines changed

2 files changed

+240
-5
lines changed

‎css-animations-2/Overview.bs

+121
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
11
<h1>CSS Animations Level 2</h1>
22

3+
<style type="text/css">
4+
table.play-state-transitions {
5+
empty-cells: hide;
6+
border-spacing: 0px;
7+
}
8+
table.play-state-transitions td {
9+
padding: 0.2em 1em;
10+
border: 1px solid black;
11+
}
12+
table.play-state-transitions th.rowgroup {
13+
transform: rotate(-180deg);
14+
writing-mode: vertical-lr;
15+
padding-left: 5px;
16+
}
17+
</style>
18+
319
<pre class='metadata'>
420
Status: ED
521
Work Status: Exploring
@@ -14,8 +30,12 @@ Abstract: This CSS module describes a way for authors to animate the values of C
1430
</pre>
1531
<pre class="anchors">
1632
urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animations
33+
text: current time
34+
text: pause an animation
35+
text: play an animation
1736
text: target element
1837
text: target effect
38+
text: target effect end
1939
</pre>
2040

2141
<h2 id="delta">Delta specification</h2>
@@ -76,6 +96,107 @@ animation.effect = null;
7696
7797
</div>
7898
99+
# Keyframes # {#keyframes}
100+
101+
## The 'animation-play-state' property ## {#animation-play-state}
102+
103+
### Interaction between 'animation-play-state' and the Web Animations API ### {#interaction-between-animation-play-state-and-web-animations-API}
104+
105+
Both this specification and the Web Animations specification [[WEB-ANIMATIONS]]
106+
define mechanisms for pause control, specifically the 'animation-play-state'
107+
property, and the {{Animation/play()}} and {{Animation/pause()}} methods
108+
respectively.
109+
110+
<div class="note">
111+
112+
The interaction of these methods can be summarized as follows:
113+
114+
* Calling {{Animation/pause()}} is sticky. The animation will remain paused
115+
until there is a subsequent call to {{Animation/play()}} after which point
116+
the animation will begin tracking changes to the computed value of the
117+
'animation-play-state' property on the <a>owning element</a> from the next
118+
moment it becomes newly ''paused''.
119+
* If the computed 'animation-play-state' on the <a>owning element</a> is
120+
''paused'', calling {{Animation/play()}} will temporarily override the
121+
'animation-play-state' until it next becomes ''running''.
122+
123+
</div>
124+
125+
With regards to the pausing, an animation can be considered to be in one of
126+
five mutually-exclusive states:
127+
128+
<ul style="list-style-type: upper-latin">
129+
<li>Running
130+
<li>Running and temporarily overriding 'animation-play-state': ''paused''
131+
<li>Paused and sticky overriding 'animation-play-state': ''running''
132+
<li>Paused and sticky overriding 'animation-play-state': ''paused''
133+
<li>Paused by 'animation-play-state'
134+
</ul>
135+
136+
A state transition chart follows:
137+
138+
<table class="play-state-transitions">
139+
<tr>
140+
<td rowspan="2"></td>
141+
<td></td>
142+
<th colspan="5">Initial state</th>
143+
</tr>
144+
<tr>
145+
<th>Event</th>
146+
<th>A</th>
147+
<th>B</th>
148+
<th>C</th>
149+
<th>D</th>
150+
<th>E</th>
151+
</tr>
152+
<tr>
153+
<th rowspan="4" class="rowgroup">Resulting state</th>
154+
<td>{{Animation/play()}}</td>
155+
<td>A</td>
156+
<td>B</td>
157+
<td>A</td>
158+
<td>B</td>
159+
<td>B</td>
160+
</tr>
161+
<tr>
162+
<td>{{Animation/pause()}}</td>
163+
<td>C</td>
164+
<td>D</td>
165+
<td>C</td>
166+
<td>D</td>
167+
<td>D</td>
168+
</tr>
169+
<tr>
170+
<td>'animation-play-state' &rarr; ''running''</td>
171+
<td>A</td>
172+
<td>A</td>
173+
<td>C</td>
174+
<td>C</td>
175+
<td>A</td>
176+
</tr>
177+
<tr>
178+
<td>'animation-play-state' &rarr; ''paused''</td>
179+
<td>E</td>
180+
<td>B</td>
181+
<td>D</td>
182+
<td>D</td>
183+
<td>E</td>
184+
</tr>
185+
</table>
186+
187+
If any change causes an animation to change from one of the running states (A,
188+
B) to one of the paused states (C, D, E), the user agent must run the <a>pause
189+
an animation</a> procedure on the animation.
190+
191+
Likewise, for any change from one of the the paused states to one of the
192+
running states, the user agent must run the <a>play an animation</a> procedure
193+
on the animation. If the change is due to a change in the computed value of
194+
'animation-play-state' (i.e. the transition E &rarr; A) the
195+
<var>auto-rewind</var> flag for that procedure must be set to false; otherwise
196+
it must be set to true.
197+
198+
</div>
199+
79200
<h2 id="events">Animation Events</h2>
80201
81202
<h3 id="event-animationevent">Types of <code>AnimationEvent</code></h3>

‎css-animations-2/Overview.html

+119-5
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,21 @@
4949
}
5050
</style>
5151
<meta content="Bikeshed 1.0.0" name="generator">
52+
<style type="text/css">
53+
table.play-state-transitions {
54+
empty-cells: hide;
55+
border-spacing: 0px;
56+
}
57+
table.play-state-transitions td {
58+
padding: 0.2em 1em;
59+
border: 1px solid black;
60+
}
61+
table.play-state-transitions th.rowgroup {
62+
transform: rotate(-180deg);
63+
writing-mode: vertical-lr;
64+
padding-left: 5px;
65+
}
66+
</style>
5267
</head>
5368
<body class="h-entry">
5469
<div class="head">
@@ -113,9 +128,18 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
113128
<li><a href="#owning-element-section"><span class="secno">2.1</span> <span class="content">Owning element</span></a>
114129
</ul>
115130
<li>
116-
<a href="#events"><span class="secno">3</span> <span class="content">Animation Events</span></a>
131+
<a href="#keyframes"><span class="secno">3</span> <span class="content">Keyframes</span></a>
132+
<ul class="toc">
133+
<li>
134+
<a href="#animation-play-state"><span class="secno">3.1</span> <span class="content">The <span class="property">animation-play-state</span> property</span></a>
135+
<ul class="toc">
136+
<li><a href="#interaction-between-animation-play-state-and-web-animations-API"><span class="secno">3.1.1</span> <span class="content">Interaction between <span class="property">animation-play-state</span> and the Web Animations API</span></a>
137+
</ul>
138+
</ul>
139+
<li>
140+
<a href="#events"><span class="secno">4</span> <span class="content">Animation Events</span></a>
117141
<ul class="toc">
118-
<li><a href="#event-animationevent"><span class="secno">3.1</span> <span class="content">Types of <code>AnimationEvent</code></span></a>
142+
<li><a href="#event-animationevent"><span class="secno">4.1</span> <span class="content">Types of <code>AnimationEvent</code></span></a>
119143
</ul>
120144
<li>
121145
<a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
@@ -179,8 +203,85 @@ <h3 class="heading settled" data-level="2.1" id="owning-element-section"><span c
179203
// animation.effect.target is undefined != animation’s owning element
180204
</pre>
181205
</div>
182-
<h2 class="heading settled" data-level="3" id="events"><span class="secno">3. </span><span class="content">Animation Events</span><a class="self-link" href="#events"></a></h2>
183-
<h3 class="heading settled" data-level="3.1" id="event-animationevent"><span class="secno">3.1. </span><span class="content">Types of <code>AnimationEvent</code></span><a class="self-link" href="#event-animationevent"></a></h3>
206+
<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>
207+
<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>
208+
<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>
209+
<p>Both this specification and the Web Animations specification <a data-link-type="biblio" href="#biblio-web-animations">[WEB-ANIMATIONS]</a> define mechanisms for pause control, specifically 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, and the <code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-play">play()</a></code> and <code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-pause">pause()</a></code> methods
210+
respectively.</p>
211+
<div class="note" role="note">
212+
<p>The interaction of these methods can be summarized as follows:</p>
213+
<ul>
214+
<li data-md="">
215+
<p>Calling <code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-pause">pause()</a></code> is sticky. The animation will remain paused
216+
until there is a subsequent call to <code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-play">play()</a></code> after which point
217+
the animation will begin tracking changes to the computed value of 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 on the <a data-link-type="dfn" href="#owning-element">owning element</a> from the next
218+
moment it becomes newly <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>.</p>
219+
<li data-md="">
220+
<p>If the computed <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> on the <a data-link-type="dfn" href="#owning-element">owning element</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>, calling <code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-play">play()</a></code> will temporarily override the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> until it next becomes <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-running">running</a>.</p>
221+
</ul>
222+
</div>
223+
<p>With regards to the pausing, an animation can be considered to be in one of
224+
five mutually-exclusive states:</p>
225+
<ul style="list-style-type: upper-latin">
226+
<li>Running
227+
<li>Running and temporarily overriding <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a>: <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>
228+
<li>Paused and sticky overriding <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a>: <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-running">running</a>
229+
<li>Paused and sticky overriding <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a>: <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>
230+
<li>Paused by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a>
231+
</ul>
232+
<p>A state transition chart follows:</p>
233+
<table class="play-state-transitions">
234+
<tbody>
235+
<tr>
236+
<td rowspan="2">
237+
<td>
238+
<th colspan="5">Initial state
239+
<tr>
240+
<th>Event
241+
<th>A
242+
<th>B
243+
<th>C
244+
<th>D
245+
<th>E
246+
<tr>
247+
<th class="rowgroup" rowspan="4">Resulting state
248+
<td><code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-play">play()</a></code>
249+
<td>A
250+
<td>B
251+
<td>A
252+
<td>B
253+
<td>B
254+
<tr>
255+
<td><code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-pause">pause()</a></code>
256+
<td>C
257+
<td>D
258+
<td>C
259+
<td>D
260+
<td>D
261+
<tr>
262+
<td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> → <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-running">running</a>
263+
<td>A
264+
<td>A
265+
<td>C
266+
<td>C
267+
<td>A
268+
<tr>
269+
<td><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> → <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>
270+
<td>E
271+
<td>B
272+
<td>D
273+
<td>D
274+
<td>E
275+
</table>
276+
<p>If any change causes an animation to change from one of the running states (A,
277+
B) to one of the paused states (C, D, E) the user agent must run the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#pause-an-animation">pause
278+
an animation</a> procedure on the animation.</p>
279+
<p>Likewise, for any change from one of the the paused states to one of the
280+
running states, the user agent must run the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#play-an-animation">play an animation</a> procedure
281+
on the animation. If the change is due to a change in the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> (i.e. the transition E → A) the <var>auto-rewind</var> flag for that procedure must be set to false; otherwise
282+
it must be set to true.</p>
283+
<h2 class="heading settled" data-level="4" id="events"><span class="secno">4. </span><span class="content">Animation Events</span><a class="self-link" href="#events"></a></h2>
284+
<h3 class="heading settled" data-level="4.1" id="event-animationevent"><span class="secno">4.1. </span><span class="content">Types of <code>AnimationEvent</code></span><a class="self-link" href="#event-animationevent"></a></h3>
184285
<p>The <em>additional</em> types of animation events that can occur are:</p>
185286
<dl>
186287
<dt><dfn class="idl-code" data-dfn-for="animationevent" data-dfn-type="event" data-export="" id="dom-animationevent-animationcancel">animationcancel<a class="self-link" href="#dom-animationevent-animationcancel"></a></dfn>
@@ -285,7 +386,7 @@ <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-exper
285386
<h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
286387
<h3 class="no-num heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
287388
<ul class="indexlist">
288-
<li><a href="#dom-animationevent-animationcancel">animationcancel</a><span>, in §3.1</span>
389+
<li><a href="#dom-animationevent-animationcancel">animationcancel</a><span>, in §4.1</span>
289390
<li><a href="#owning-element">owning element</a><span>, in §2.1</span>
290391
</ul>
291392
<h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
@@ -294,14 +395,25 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
294395
<a data-link-type="biblio" href="#biblio-css-animations-1">[css-animations-1]</a> defines the following terms:
295396
<ul>
296397
<li><a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-name">animation-name</a>
398+
<li><a href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a>
297399
<li><a href="https://drafts.csswg.org/css-animations-1/#dom-animationevent-animationend">animationend</a>
400+
<li><a href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>
401+
<li><a href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-running">running</a>
298402
</ul>
299403
<li>
300404
<a data-link-type="biblio" href="#biblio-web-animations">[web-animations]</a> defines the following terms:
301405
<ul>
406+
<li><a href="https://w3c.github.io/web-animations/#pause-an-animation">pause an animation</a>
407+
<li><a href="https://w3c.github.io/web-animations/#play-an-animation">play an animation</a>
302408
<li><a href="https://w3c.github.io/web-animations/#target-effect">target effect</a>
303409
<li><a href="https://w3c.github.io/web-animations/#target-element">target element</a>
304410
</ul>
411+
<li>
412+
<a data-link-type="biblio" href="#biblio-web-animations-1">[web-animations-1]</a> defines the following terms:
413+
<ul>
414+
<li><a href="http://www.w3.org/TR/web-animations/#dom-animation-pause">pause()</a>
415+
<li><a href="http://www.w3.org/TR/web-animations/#dom-animation-play">play()</a>
416+
</ul>
305417
</ul>
306418
<h2 class="no-num heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
307419
<h3 class="no-num heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
@@ -314,6 +426,8 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
314426
<dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
315427
<dt id="biblio-web-animations"><a class="self-link" href="#biblio-web-animations"></a>[WEB-ANIMATIONS]
316428
<dd>Brian Birtles; et al. <a href="http://www.w3.org/TR/web-animations-1/">Web Animations</a>. 7 July 2015. WD. URL: <a href="http://www.w3.org/TR/web-animations-1/">http://www.w3.org/TR/web-animations-1/</a>
429+
<dt id="biblio-web-animations-1"><a class="self-link" href="#biblio-web-animations-1"></a>[WEB-ANIMATIONS-1]
430+
<dd>Brian Birtles; et al. <a href="http://www.w3.org/TR/web-animations-1/">Web Animations</a>. 7 July 2015. WD. URL: <a href="http://www.w3.org/TR/web-animations-1/">http://www.w3.org/TR/web-animations-1/</a>
317431
</dl>
318432
</body>
319433
</html>

0 commit comments

Comments
 (0)