Skip to content

Commit 40af4c9

Browse files
committed
[css-animations] Make animation-delay live
As resolved: https://lists.w3.org/Archives/Public/www-style/2015Oct/0226.html This fixes issue 67.
1 parent c1739a5 commit 40af4c9

File tree

2 files changed

+17
-24
lines changed

2 files changed

+17
-24
lines changed

css-animations/Overview.bs

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -134,17 +134,13 @@ Animations</h2>
134134
identifiers in the computed value of the 'animation-name' property and the
135135
animation uses a valid @keyframes rule. Once an
136136
animation has started it continues until it ends or the 'animation-name' is
137-
removed. Changing the values of animation properties while the animation
138-
is running has no effect on the amount of time that has elapsed since the
139-
animation started running i.e. once the animation is running, updates to
140-
'animation-delay' have no effect. The remainder of the animation runs
141-
according to the new animation property values.
142-
143-
Note also that changing the value
144-
of 'animation-name' does not necessarily restart an animation (e.g., if a list
145-
of animations are applied and one is removed from the list, only that animation
146-
will stop; The other animations will continue). In order to restart an animation,
147-
it must be removed then reapplied.
137+
removed. Changes to the values of animation properties while the animation
138+
is running apply as if the animation had those values from when it
139+
began. For example, shortening the 'animation-delay' may cause the animation
140+
to jump forwards or even finish immediately and dispatch an
141+
<a idl>animationend</a> event.
142+
Conversely, extending the 'animation-delay' may cause an animation to
143+
re-start and dispatch an <a idl>animationstart</a> event.
148144

149145
The end of the animation is defined by the combination of the
150146
'animation-duration', 'animation-iteration-count' and 'animation-fill-mode'

css-animations/Overview.html

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
<div class="head">
6868
<p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> </a> </p>
6969
<h1 class="p-name no-ref" id="title">CSS Animations Level 1</h1>
70-
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-10-26">26 October 2015</time></span></h2>
70+
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2016-02-01">1 February 2016</time></span></h2>
7171
<div data-fill-with="spec-metadata">
7272
<dl>
7373
<dt>This version:
@@ -101,7 +101,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="cont
101101
</dl>
102102
</div>
103103
<div data-fill-with="warning"></div>
104-
<p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2015 <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>). 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>
104+
<p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2016 <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>). 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>
105105
<hr title="Separator for header">
106106
</div>
107107
<h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
@@ -295,15 +295,12 @@ <h2 class="heading settled" data-level="3" id="animations"><span class="secno">3
295295
identifiers in the computed value of the <a class="property" data-link-type="propdesc" href="#propdef-animation-name">animation-name</a> property and the
296296
animation uses a valid @keyframes rule. Once an
297297
animation has started it continues until it ends or the <a class="property" data-link-type="propdesc" href="#propdef-animation-name">animation-name</a> is
298-
removed. Changing the values of animation properties while the animation
299-
is running has no effect on the amount of time that has elapsed since the
300-
animation started running i.e. once the animation is running, updates to <a class="property" data-link-type="propdesc" href="#propdef-animation-delay">animation-delay</a> have no effect. The remainder of the animation runs
301-
according to the new animation property values.</p>
302-
<p>Note also that changing the value
303-
of <a class="property" data-link-type="propdesc" href="#propdef-animation-name">animation-name</a> does not necessarily restart an animation (e.g., if a list
304-
of animations are applied and one is removed from the list, only that animation
305-
will stop; The other animations will continue). In order to restart an animation,
306-
it must be removed then reapplied.</p>
298+
removed. Changes to the values of animation properties while the animation
299+
is running apply as if the animation had those values from when it
300+
began. For example, shortening the <a class="property" data-link-type="propdesc" href="#propdef-animation-delay">animation-delay</a> may cause the animation
301+
to jump forwards or even finish immediately and dispatch an <a data-link-type="idl" href="#dom-animationevent-animationend">animationend</a> event.
302+
Conversely, extending the <a class="property" data-link-type="propdesc" href="#propdef-animation-delay">animation-delay</a> may cause an animation to
303+
re-start and dispatch an <a data-link-type="idl" href="#dom-animationevent-animationstart">animationstart</a> event.</p>
307304
<p>The end of the animation is defined by the combination of the <a class="property" data-link-type="propdesc" href="#propdef-animation-duration">animation-duration</a>, <a class="property" data-link-type="propdesc" href="#propdef-animation-iteration-count">animation-iteration-count</a> and <a class="property" data-link-type="propdesc" href="#propdef-animation-fill-mode">animation-fill-mode</a> properties.</p>
308305
<div class="example" id="example-dee38741">
309306
<a class="self-link" href="#example-dee38741"></a>
@@ -1617,9 +1614,9 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
16171614
<dt id="biblio-css-display-3"><a class="self-link" href="#biblio-css-display-3"></a>[CSS-DISPLAY-3]
16181615
<dd>Tab Atkins Jr.; Elika Etemad. <a href="http://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 15 October 2015. WD. URL: <a href="http://www.w3.org/TR/css-display-3/">http://www.w3.org/TR/css-display-3/</a>
16191616
<dt id="biblio-css-position-3"><a class="self-link" href="#biblio-css-position-3"></a>[CSS-POSITION-3]
1620-
<dd>CSS Positioned Layout Module Level 3 URL: <a href="http://www.w3.org/TR/css3-positioning/">http://www.w3.org/TR/css3-positioning/</a>
1617+
<dd>CSS Positioned Layout Module Level 3 URL: <a href="https://www.w3.org/TR/css3-positioning/">https://www.w3.org/TR/css3-positioning/</a>
16211618
<dt id="biblio-css-transitions-1"><a class="self-link" href="#biblio-css-transitions-1"></a>[CSS-TRANSITIONS-1]
1622-
<dd>CSS Transitions Module Level 1 URL: <a href="http://www.w3.org/TR/css3-transitions/">http://www.w3.org/TR/css3-transitions/</a>
1619+
<dd>CSS Transitions Module Level 1 URL: <a href="https://www.w3.org/TR/css3-transitions/">https://www.w3.org/TR/css3-transitions/</a>
16231620
<dt id="biblio-css-values"><a class="self-link" href="#biblio-css-values"></a>[CSS-VALUES]
16241621
<dd>Tab Atkins Jr.; Elika Etemad. <a href="http://www.w3.org/TR/css-values/">CSS Values and Units Module Level 3</a>. 11 June 2015. CR. URL: <a href="http://www.w3.org/TR/css-values/">http://www.w3.org/TR/css-values/</a>
16251622
<dt id="biblio-css3-transitions"><a class="self-link" href="#biblio-css3-transitions"></a>[CSS3-TRANSITIONS]

0 commit comments

Comments
 (0)