You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-animations-2/Overview.bs
+3
Original file line number
Diff line number
Diff line change
@@ -29,6 +29,9 @@ Editor: L. David Baron, Mozilla, dbaron@dbaron.org
29
29
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.
<h4class="heading settled" data-level="3.1.1" id="interaction-between-animation-play-state-and-web-animations-API"><spanclass="secno">3.1.1. </span><spanclass="content">Interaction between <aclass="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><aclass="self-link" href="#interaction-between-animation-play-state-and-web-animations-API"></a></h4>
209
-
<p>Both this specification and the Web Animations specification <adata-link-type="biblio" href="#biblio-web-animations">[WEB-ANIMATIONS]</a> define mechanisms for pause control, specifically the <aclass="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> property, and the <codeclass="idl"><adata-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-play">play()</a></code> and <codeclass="idl"><adata-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-pause">pause()</a></code> methods
209
+
<p>Both this specification and the Web Animations specification <adata-link-type="biblio" href="#biblio-web-animations">[WEB-ANIMATIONS]</a> define mechanisms for pause control, specifically the <aclass="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> property, and the <codeclass="idl"><adata-link-type="idl" href="https://w3c.github.io/web-animations/#play">play()</a></code> and <codeclass="idl"><adata-link-type="idl" href="https://w3c.github.io/web-animations/#pause">pause()</a></code> methods
210
210
respectively.</p>
211
211
<divclass="note" role="note">
212
212
<p>The interaction of these methods can be summarized as follows:</p>
213
213
<ul>
214
214
<lidata-md="">
215
-
<p>Calling <codeclass="idl"><adata-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 <codeclass="idl"><adata-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-play">play()</a></code> after which point
215
+
<p>Calling <codeclass="idl"><adata-link-type="idl" href="https://w3c.github.io/web-animations/#pause">pause()</a></code> is sticky. The animation will remain paused
216
+
until there is a subsequent call to <codeclass="idl"><adata-link-type="idl" href="https://w3c.github.io/web-animations/#play">play()</a></code> after which point
217
217
the animation will begin tracking changes to the computed value of the <aclass="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> property on the <adata-link-type="dfn" href="#owning-element">owning element</a> from the next
218
218
moment it becomes newly <aclass="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>.</p>
219
219
<lidata-md="">
220
-
<p>If the computed <aclass="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> on the <adata-link-type="dfn" href="#owning-element">owning element</a> is <aclass="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>, calling <codeclass="idl"><adata-link-type="idl" href="http://www.w3.org/TR/web-animations/#dom-animation-play">play()</a></code> will temporarily override the <aclass="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 <aclass="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-running">running</a>.</p>
220
+
<p>If the computed <aclass="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-animations-1/#propdef-animation-play-state">animation-play-state</a> on the <adata-link-type="dfn" href="#owning-element">owning element</a> is <aclass="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-paused">paused</a>, calling <codeclass="idl"><adata-link-type="idl" href="https://w3c.github.io/web-animations/#play">play()</a></code> will temporarily override the <aclass="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 <aclass="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#valdef-animation-play-state-running">running</a>.</p>
221
221
</ul>
222
222
</div>
223
223
<p>With regards to the pausing, an animation can be considered to be in one of
<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 <adata-link-type="dfn" href="https://w3c.github.io/web-animations/#pause-an-animation">pause
277
+
B) to one of the paused states (C, D, E), the user agent must run the <adata-link-type="dfn" href="https://w3c.github.io/web-animations/#pause-an-animation">pause
278
278
an animation</a> procedure on the animation.</p>
279
279
<p>Likewise, for any change from one of the the paused states to one of the
280
280
running states, the user agent must run the <adata-link-type="dfn" href="https://w3c.github.io/web-animations/#play-an-animation">play an animation</a> procedure
<dd>S. Bradner. <ahref="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <ahref="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
0 commit comments