[css-animations] Define 0s duration behavior in animation-duration; 0s duration causes instantaneous execution, even if iteration count is infinite

Author: Sylvain Galineau

css-animations/Overview.bs

@@ -431,9 +431,15 @@ The 'animation-duration' property</h3>
 			If the <<time>> is ''0s'', like the initial value,
 			the keyframes of the animation have no effect,
 			but the animation itself still occurs instantaneously.
-			That is, 'animation-fill-mode' applies as normal, 
-			filling backwards or forwards as appropriate; 
-			start and end events are fired.
+			Specifically, start and end events are fired; if 
+			'animation-fill-mode' is set to ''backwards'' or 
+			''both'', the first frame of the animation, as defined by 
+			'animation-direction', will be displayed during the 
+			'animation-delay'. Then the last frame of the animation, 
+			as defined by 'animation-direction', will be displayed if 
+			'animation-fill-mode' is set to ''forwards'' or ''both''. 
+			If 'animation-fill-mode' is set to ''animation-fill-mode/none'' 
+			then the animation has no visible effect. 
 	</dl>
 
 <h3 id="animation-timing-function">
@@ -498,7 +504,7 @@ The 'animation-iteration-count' property</h3>
 	<dl dfn-type=value dfn-for=animation-iteration-count>
 		<dt><dfn>infinite</dfn>
 		<dd>
-			The animation will repeat forever.
+			The animation will repeat forever. 
 
 		<dt><dfn><<number>></dfn>
 		<dd>
@@ -509,19 +515,11 @@ The 'animation-iteration-count' property</h3>
 
 			<p>A value of ''0'' is valid and, similar to an 'animation-duration' 
 			of ''0s'', causes the animation to occur instantaneously. 
-			Specifically, if 'animation-fill-mode' is set to ''backwards'' or 
-			''both'', the first frame of the animation, as defined by 
-			'animation-direction', will be displayed during the 
-			'animation-delay'. Then the last frame of the animation, 
-			as defined by 'animation-direction', will be displayed if 
-			'animation-fill-mode' is set to ''forwards'' or ''both''. 
-			If 'animation-fill-mode' is set to ''animation-fill-mode/none'' 
-			then the animation has no effect. 
-
-			<p class="issue">If similar to animation-duration:0s, also relates to whether
-			animation events fire?
 	</dl>
 
+	If the animation has a duration of ''0s'', it will occur instantaneously for any
+	valid value of 'animation-iteration-count', including ''infinite''.
+
 
 <h3 id="animation-direction">
 The 'animation-direction' property</h3>

css-animations/Overview.html

@@ -162,8 +162,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 		<li><a href=#normative><span class=secno></span> Normative References</a>
 		<li><a href=#informative><span class=secno></span> Informative References</a></ul>
 	<li><a href=#index><span class=secno></span> Index</a>
-	<li><a href=#property-index><span class=secno></span> Property index</a>
-	<li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
+	<li><a href=#property-index><span class=secno></span> Property index</a></ul></div>
 
 
 
@@ -539,9 +538,15 @@ <h3 class="heading settled heading" data-level=4.3 id=animation-duration><span c
 <p>			If the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#time-value title="<time>">&lt;time&gt;</a> is <span class=css data-link-type=maybe title=0s>0s</span>, like the initial value,
 			the keyframes of the animation have no effect,
 			but the animation itself still occurs instantaneously.
-			That is, <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> applies as normal, 
-			filling backwards or forwards as appropriate; 
-			start and end events are fired.
+			Specifically, start and end events are fired; if 
+			<a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> is set to <a class=css data-link-type=maybe href=#valuedef-backwards title=backwards>backwards</a> or 
+			<a class=css data-link-type=maybe href=#valuedef-both title=both>both</a>, the first frame of the animation, as defined by 
+			<a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a>, will be displayed during the 
+			<a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a>. Then the last frame of the animation, 
+			as defined by <a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a>, will be displayed if 
+			<a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> is set to <a class=css data-link-type=maybe href=#valuedef-forwards title=forwards>forwards</a> or <a class=css data-link-type=maybe href=#valuedef-both title=both>both</a>. 
+			If <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> is set to <a class=css data-link-for=animation-fill-mode data-link-type=maybe href=#valuedef-none title=none>none</a> 
+			then the animation has no visible effect. 
 	</dl>
 
 <h3 class="heading settled heading" data-level=4.4 id=animation-timing-function><span class=secno>4.4 </span><span class=content>
@@ -582,7 +587,7 @@ <h3 class="heading settled heading" data-level=4.5 id=animation-iteration-count>
 	<dl data-dfn-for=animation-iteration-count data-dfn-type=value>
 		<dt><dfn class=css-code data-dfn-for=animation-iteration-count data-dfn-type=value data-export="" id=valuedef-infinite>infinite<a class=self-link href=#valuedef-infinite></a></dfn>
 		<dd>
-			The animation will repeat forever.
+			The animation will repeat forever. 
 
 		<dt><dfn class=css-code data-dfn-for=animation-iteration-count data-dfn-type=value data-export="" id=valuedef-number><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><a class=self-link href=#valuedef-number></a></dfn>
 		<dd>
@@ -593,19 +598,11 @@ <h3 class="heading settled heading" data-level=4.5 id=animation-iteration-count>
 
 			<p>A value of <span class=css data-link-type=maybe title=0>0</span> is valid and, similar to an <a class=property data-link-type=propdesc href=#propdef-animation-duration title=animation-duration>animation-duration</a> 
 			of <span class=css data-link-type=maybe title=0s>0s</span>, causes the animation to occur instantaneously. 
-			Specifically, if <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> is set to <a class=css data-link-type=maybe href=#valuedef-backwards title=backwards>backwards</a> or 
-			<a class=css data-link-type=maybe href=#valuedef-both title=both>both</a>, the first frame of the animation, as defined by 
-			<a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a>, will be displayed during the 
-			<a class=property data-link-type=propdesc href=#propdef-animation-delay title=animation-delay>animation-delay</a>. Then the last frame of the animation, 
-			as defined by <a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a>, will be displayed if 
-			<a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> is set to <a class=css data-link-type=maybe href=#valuedef-forwards title=forwards>forwards</a> or <a class=css data-link-type=maybe href=#valuedef-both title=both>both</a>. 
-			If <a class=property data-link-type=propdesc href=#propdef-animation-fill-mode title=animation-fill-mode>animation-fill-mode</a> is set to <a class=css data-link-for=animation-fill-mode data-link-type=maybe href=#valuedef-none title=none>none</a> 
-			then the animation has no effect. 
-
-			<p class=issue id=issue-ef1c522a><a class=self-link href=#issue-ef1c522a></a>If similar to animation-duration:0s, also relates to whether
-			animation events fire?
 	</dl>
 
+<p>	If the animation has a duration of <span class=css data-link-type=maybe title=0s>0s</span>, it will occur instantaneously for any
+	valid value of <a class=property data-link-type=propdesc href=#propdef-animation-iteration-count title=animation-iteration-count>animation-iteration-count</a>, including <a class=css data-link-type=maybe href=#valuedef-infinite title=infinite>infinite</a>.
+
 
 <h3 class="heading settled heading" data-level=4.6 id=animation-direction><span class=secno>4.6 </span><span class=content>
 The <a class=property data-link-type=propdesc href=#propdef-animation-direction title=animation-direction>animation-direction</a> property</span><a class=self-link href=#animation-direction></a></h3>
@@ -1339,6 +1336,4 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
 <tr><th scope=row><a data-property="">animation</a><td>&lt;single-animation&gt;#<td>see individual properties<td>all elements, ::before and ::after pseudo-elements<td>no<td>N/A<td>interactive<td>no<td>per grammar<td>As specified</table></div>
 
 
-</ul><h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue>If similar to animation-duration:0s, also relates to whether
-			animation events fire?
-	<a href=#issue-ef1c522a> ↵ </a></div></div>
+</ul>