[css-animations] Make animation-delay live

Mon, 01 Feb 2016 10:33:00 +1100

author
Brian Birtles <[email protected]>
date
Mon, 01 Feb 2016 10:33:00 +1100
changeset 16985
84b2940a9c52
parent 16984
e4c3fc1523eb
child 16986
5be73fbc8592

[css-animations] Make animation-delay live

As resolved:
https://lists.w3.org/Archives/Public/www-style/2015Oct/0226.html

This fixes issue 67.

css-animations/Overview.bs file | annotate | diff | comparison | revisions
css-animations/Overview.html file | annotate | diff | comparison | revisions
     1.1 --- a/css-animations/Overview.bs	Sat Jan 30 03:36:10 2016 -0800
     1.2 +++ b/css-animations/Overview.bs	Mon Feb 01 10:33:00 2016 +1100
     1.3 @@ -134,17 +134,13 @@
     1.4  	identifiers in the computed value of the 'animation-name' property and the
     1.5  	animation uses a valid @keyframes rule. Once an
     1.6  	animation has started it continues until it ends or the 'animation-name' is
     1.7 -	removed. Changing the values of animation properties while the animation
     1.8 -	is running has no effect on the amount of time that has elapsed since the
     1.9 -	animation started running i.e. once the animation is running, updates to
    1.10 -	'animation-delay' have no effect. The remainder of the animation runs
    1.11 -	according to the new animation property values.
    1.12 -
    1.13 -	Note also that changing the value
    1.14 -	of 'animation-name' does not necessarily restart an animation (e.g., if a list
    1.15 -	of animations are applied and one is removed from the list, only that animation
    1.16 -	will stop; The other animations will continue). In order to restart an animation,
    1.17 -	it must be removed then reapplied.
    1.18 +	removed. Changes to the values of animation properties while the animation
    1.19 +	is running apply as if the animation had those values from when it
    1.20 +	began. For example, shortening the 'animation-delay' may cause the animation
    1.21 +	to jump forwards or even finish immediately and dispatch an
    1.22 +	<a idl>animationend</a> event.
    1.23 +	Conversely, extending the 'animation-delay' may cause an animation to
    1.24 +	re-start and dispatch an <a idl>animationstart</a> event.
    1.25  
    1.26  	The end of the animation is defined by the combination of the
    1.27  	'animation-duration', 'animation-iteration-count' and 'animation-fill-mode'
     2.1 --- a/css-animations/Overview.html	Sat Jan 30 03:36:10 2016 -0800
     2.2 +++ b/css-animations/Overview.html	Mon Feb 01 10:33:00 2016 +1100
     2.3 @@ -67,7 +67,7 @@
     2.4    <div class="head">
     2.5     <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>
     2.6     <h1 class="p-name no-ref" id="title">CSS Animations Level 1</h1>
     2.7 -   <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>
     2.8 +   <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>
     2.9     <div data-fill-with="spec-metadata">
    2.10      <dl>
    2.11       <dt>This version:
    2.12 @@ -101,7 +101,7 @@
    2.13      </dl>
    2.14     </div>
    2.15     <div data-fill-with="warning"></div>
    2.16 -   <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>
    2.17 +   <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>
    2.18     <hr title="Separator for header">
    2.19    </div>
    2.20    <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
    2.21 @@ -295,15 +295,12 @@
    2.22  	identifiers in the computed value of the <a class="property" data-link-type="propdesc" href="#propdef-animation-name">animation-name</a> property and the
    2.23  	animation uses a valid @keyframes rule. Once an
    2.24  	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
    2.25 -	removed. Changing the values of animation properties while the animation
    2.26 -	is running has no effect on the amount of time that has elapsed since the
    2.27 -	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
    2.28 -	according to the new animation property values.</p>
    2.29 -   <p>Note also that changing the value
    2.30 -	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
    2.31 -	of animations are applied and one is removed from the list, only that animation
    2.32 -	will stop; The other animations will continue). In order to restart an animation,
    2.33 -	it must be removed then reapplied.</p>
    2.34 +	removed. Changes to the values of animation properties while the animation
    2.35 +	is running apply as if the animation had those values from when it
    2.36 +	began. For example, shortening the <a class="property" data-link-type="propdesc" href="#propdef-animation-delay">animation-delay</a> may cause the animation
    2.37 +	to jump forwards or even finish immediately and dispatch an <a data-link-type="idl" href="#dom-animationevent-animationend">animationend</a> event.
    2.38 +	Conversely, extending the <a class="property" data-link-type="propdesc" href="#propdef-animation-delay">animation-delay</a> may cause an animation to
    2.39 +	re-start and dispatch an <a data-link-type="idl" href="#dom-animationevent-animationstart">animationstart</a> event.</p>
    2.40     <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>
    2.41     <div class="example" id="example-dee38741">
    2.42      <a class="self-link" href="#example-dee38741"></a> 
    2.43 @@ -1617,9 +1614,9 @@
    2.44     <dt id="biblio-css-display-3"><a class="self-link" href="#biblio-css-display-3"></a>[CSS-DISPLAY-3]
    2.45     <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>
    2.46     <dt id="biblio-css-position-3"><a class="self-link" href="#biblio-css-position-3"></a>[CSS-POSITION-3]
    2.47 -   <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>
    2.48 +   <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>
    2.49     <dt id="biblio-css-transitions-1"><a class="self-link" href="#biblio-css-transitions-1"></a>[CSS-TRANSITIONS-1]
    2.50 -   <dd>CSS Transitions Module Level 1 URL: <a href="http://www.w3.org/TR/css3-transitions/">http://www.w3.org/TR/css3-transitions/</a>
    2.51 +   <dd>CSS Transitions Module Level 1 URL: <a href="https://www.w3.org/TR/css3-transitions/">https://www.w3.org/TR/css3-transitions/</a>
    2.52     <dt id="biblio-css-values"><a class="self-link" href="#biblio-css-values"></a>[CSS-VALUES]
    2.53     <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>
    2.54     <dt id="biblio-css3-transitions"><a class="self-link" href="#biblio-css3-transitions"></a>[CSS3-TRANSITIONS]

mercurial