[css-animations] Clarify active duration and its relationship to negative animation delays

Author: Sylvain Galineau

css-animations/Overview.bs

@@ -482,10 +482,14 @@ The 'animation-iteration-count' property</h3>
 
 	The 'animation-iteration-count' property specifies the number of times an animation cycle
 	is played. The initial value is ''1'', meaning the animation will play from beginning to end
-	once.  This property is often used in conjunction with an
+	once. This property is often used in conjunction with an
 	'animation-direction' value of ''alternate'', which will cause the animation to play in
 	reverse on alternate cycles.
 
+	The time window during which the animation is active 
+	(<code>duration</code> x <code>iteration-count</code>)
+	is known as the <dfn>active duration</dfn>. 
+
 	<pre class='propdef'>
 	Name: animation-iteration-count
 	Value: <<single-animation-iteration-count>>#
@@ -641,7 +645,8 @@ The 'animation-delay' property</h3>
 			Similar to a delay of ''0s'', it means that the animation executes immediately,
 			but is automatically progressed by the absolute value of the delay,
 			as if the animation had started the specified time in the past,
-			and so it appears to start partway through its play-cycle already.
+			and so it appears to start partway through its 
+			<a href="#animation-iteration-count">active duration</a>.
 			If an animation's keyframes have an implied starting value,
 			the values are taken from the time the animation starts,
 			not some time in the past.
@@ -1036,6 +1041,8 @@ Acknowledgements</h2>
 
 	Thanks especially to the feedback from
 	Tab Atkins,
+	Brian Birtles,
+	Shane Stephens,
 	Carine Bournez,
 	Christian Budde,
 	Anne van Kesteren,
@@ -1057,9 +1064,9 @@ Working Group Resolutions that are pending editing</h2>
     		<li>Detail how/when keyframe values are computed; using <a href="http://lists.w3.org/Archives/Public/www-style/2014Aug/0132.html">G.beta in dbaron's mail</a>
     		<li>Agreed that both transitions and animations animate all properties. css-transitions to define animation of non-interoperable/discrete values. They take their starting values below 50% timing function progress, and end values above
     		<li>Dynamic changes to animation properties/keyframes. Tab to propose resolution. (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14713">Bug 14713</a>)
-    		<li>Negative animation-delay values apply against the active duration of the animation i.e. (animation-duration*animation-iteration-count). The delay can thus swallow iterations for which no iteration event will be fired. The start/end events are still fired. Even when delay == (-1*active_duration)
+    		<li><del>Negative animation-delay values apply against the active duration of the animation i.e. (animation-duration*animation-iteration-count). The delay can thus swallow iterations for which no iteration event will be fired. The start/end events are still fired. Even when delay == (-1*active_duration)
     		<li><del>Fire animation start/end events when animation-duration is zero, with 0 elapsedTime
-    		<li>If animation-iteration-count is infinite and duration is 0, treat the iteration-count as if it was finite and run a 0s second (option A in <a href="http://lists.w3.org/Archives/Public/www-style/2014Sep/0056.html">Brian's mail</a>)
+    		<li><del>If animation-iteration-count is infinite and duration is 0, treat the iteration-count as if it was finite and run a 0s second (option A in <a href="http://lists.w3.org/Archives/Public/www-style/2014Sep/0056.html">Brian's mail</a>)
     		<li><del>If an animation with a negative animation delay is initially paused, the start event still fires
     		</ul>
 

css-animations/Overview.html

@@ -577,10 +577,14 @@ <h3 class="heading settled heading" data-level=4.5 id=animation-iteration-count>
 
 <p>	The <a class=property data-link-type=propdesc href=#propdef-animation-iteration-count title=animation-iteration-count>animation-iteration-count</a> property specifies the number of times an animation cycle
 	is played. The initial value is <span class=css data-link-type=maybe title=1>1</span>, meaning the animation will play from beginning to end
-	once.  This property is often used in conjunction with an
+	once. This property is often used in conjunction with an
 	<a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a> value of <a class=css data-link-type=maybe href=#valuedef-alternate title=alternate>alternate</a>, which will cause the animation to play in
 	reverse on alternate cycles.
 
+<p>	The time window during which the animation is active 
+	(<code>duration</code> x <code>iteration-count</code>)
+	is known as the <dfn data-dfn-type=dfn data-noexport="" id=active-duration>active duration<a class=self-link href=#active-duration></a></dfn>. 
+
 <table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-animation-iteration-count>animation-iteration-count<a class=self-link href=#propdef-animation-iteration-count></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-single-animation-iteration-count title="<single-animation-iteration-count>">&lt;single-animation-iteration-count&gt;</a>#<tr><th>Initial:<td>1<tr><th>Applies to:<td>all elements, ::before and ::after pseudo-elements<tr><th>Inherited:<td>no<tr><th>Media:<td>interactive<tr><th>Computed value:<td>As specified<tr><th>Canonical order:<td>per grammar<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table>
 <p>	<dfn class=css-code data-dfn-type=type data-export="" id=typedef-single-animation-iteration-count>&lt;single-animation-iteration-count&gt;<a class=self-link href=#typedef-single-animation-iteration-count></a></dfn> = infinite | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a>
 
@@ -688,7 +692,8 @@ <h3 class="heading settled heading" data-level=4.8 id=animation-delay><span clas
 			Similar to a delay of <span class=css data-link-type=maybe title=0s>0s</span>, it means that the animation executes immediately,
 			but is automatically progressed by the absolute value of the delay,
 			as if the animation had started the specified time in the past,
-			and so it appears to start partway through its play-cycle already.
+			and so it appears to start partway through its 
+			<a href=#animation-iteration-count>active duration</a>.
 			If an animation’s keyframes have an implied starting value,
 			the values are taken from the time the animation starts,
 			not some time in the past.
@@ -1051,6 +1056,8 @@ <h2 class="heading settled heading" data-level=7 id=acknowledgements><span class
 
 <p>	Thanks especially to the feedback from
 	Tab Atkins,
+	Brian Birtles,
+	Shane Stephens,
 	Carine Bournez,
 	Christian Budde,
 	Anne van Kesteren,
@@ -1072,10 +1079,10 @@ <h2 class="heading settled heading" data-level=8 id=wg-resolutions-pending><span
     		<li>Detail how/when keyframe values are computed; using <a href=http://lists.w3.org/Archives/Public/www-style/2014Aug/0132.html>G.beta in dbaron’s mail</a>
     		<li>Agreed that both transitions and animations animate all properties. css-transitions to define animation of non-interoperable/discrete values. They take their starting values below 50% timing function progress, and end values above
     		<li>Dynamic changes to animation properties/keyframes. Tab to propose resolution. (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14713">Bug 14713</a>)
-    		<li>Negative animation-delay values apply against the active duration of the animation i.e. (animation-duration*animation-iteration-count). The delay can thus swallow iterations for which no iteration event will be fired. The start/end events are still fired. Even when delay == (-1*active_duration)
-    		<li><del>Fire animation start/end events when animation-duration is zero, with 0 elapsedTime
-    		</del><li>If animation-iteration-count is infinite and duration is 0, treat the iteration-count as if it was finite and run a 0s second (option A in <a href=http://lists.w3.org/Archives/Public/www-style/2014Sep/0056.html>Brian’s mail</a>)
-    		<li><del>If an animation with a negative animation delay is initially paused, the start event still fires
+    		<li><del>Negative animation-delay values apply against the active duration of the animation i.e. (animation-duration*animation-iteration-count). The delay can thus swallow iterations for which no iteration event will be fired. The start/end events are still fired. Even when delay == (-1*active_duration)
+    		</del><li><del>Fire animation start/end events when animation-duration is zero, with 0 elapsedTime
+    		</del><li><del>If animation-iteration-count is infinite and duration is 0, treat the iteration-count as if it was finite and run a 0s second (option A in <a href=http://lists.w3.org/Archives/Public/www-style/2014Sep/0056.html>Brian’s mail</a>)
+    		</del><li><del>If an animation with a negative animation delay is initially paused, the start event still fires
     		</del></ul>
 
     	<li>2012-10-29 minutes
@@ -1245,6 +1252,7 @@ <h3 class="no-num no-ref heading settled heading" id=informative><span class=con
 <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 Index</span><a class=self-link href=#index></a></h2>
 <div data-fill-with=index><ul class=indexlist>
+<li>active duration, <a href=#active-duration title="section 4.5">4.5</a>
 <li>alternate, <a href=#valuedef-alternate title="section 4.6">4.6</a>
 <li>alternate-reverse, <a href=#valuedef-alternate-reverse title="section 4.6">4.6</a>
 <li>animation, <a href=#propdef-animation title="section 4.10">4.10</a>