[css-animations] Change ordering requirements for parsing keywords within the animation shorthand to prioritize animation-name lowest, and also require nonambiguous serialization with allowance for being non-minimal (which we could perhaps tighten later).

Fixes:
http://lists.w3.org/Archives/Public/www-style/2014Jan/0325.html
http://lists.w3.org/Archives/Public/www-style/2011Apr/0344.html

Author: dbaron

css-animations/Overview.html

@@ -1458,18 +1458,41 @@ <h3 id=animation-shorthand-property><span class=secno>4.10. </span> The
   </table>
 
   <div class=prod> <dfn id=single-animation>&lt;single-animation&gt;</dfn> =
-   &lt;single-animation-name&gt; || <span>&lt;time&gt;</span> ||
-   &lt;single-animation-timing-function&gt; || <span>&lt;time&gt;</span> ||
-   &lt;single-animation-iteration-count&gt; ||
+   <span>&lt;time&gt;</span> || &lt;single-animation-timing-function&gt; ||
+   <span>&lt;time&gt;</span> || &lt;single-animation-iteration-count&gt; ||
    &lt;single-animation-direction&gt; || &lt;single-animation-fill-mode&gt;
-   || &lt;single-animation-play-state&gt;</div>
+   || &lt;single-animation-play-state&gt; || &lt;single-animation-name&gt;</div>
 
   <p> Note that order is important within each animation definition: the
    first value in each &lt;single-animation&gt; that can be parsed as a
    <var>&lt;time&gt;</var> is assigned to the animation-duration, and the
    second value in each &lt;single-animation&gt; that can be parsed as a
    <var>&lt;time&gt;</var> is assigned to animation-delay.
 
+  <p> Note that order is also important within each animation definition for
+   distinguishing &lt;single-animation-name&gt; values from other keywords.
+   When parsing, keywords that are valid for properties other than ‘<a
+   href="#animation-name"><code class=property>animation-name</code></a>’
+   must be accepted for those properties rather than for ‘<a
+   href="#animation-name"><code class=property>animation-name</code></a>’.
+   Furthermore, when serializing, default values of other properties must be
+   output in at least the cases necessary to distinguish an ‘<a
+   href="#animation-name"><code class=property>animation-name</code></a>’
+   that could be a value of another property, and may be output in additional
+   cases. <span class=example> For example, a value parsed from ‘<code
+   class=css>animation: 3s none backwards</code>’ (where ‘<a
+   href="#animation-fill-mode"><code
+   class=property>animation-fill-mode</code></a>’ is ‘<code
+   class=css>none</code>’ and ‘<a href="#animation-name"><code
+   class=property>animation-name</code></a>’ is ‘<code
+   class=css>backwards</code>’) must not be serialized as ‘<code
+   class=css>animation: 3s backwards</code>’ (where ‘<a
+   href="#animation-fill-mode"><code
+   class=property>animation-fill-mode</code></a>’ is ‘<code
+   class=css>backwards</code>’ and ‘<a href="#animation-name"><code
+   class=property>animation-name</code></a>’ is ‘<code
+   class=css>none</code>’). </span>
+
   <p class=issue> Need to also explain how order is important in terms of
    animation-name versus keywords, and probably also adjust the canonical
    order to match.

css-animations/Overview.src.html

@@ -1037,14 +1037,14 @@ <h3 id="animation-shorthand-property">
 
 	<div class="prod">
 		<dfn id="single-animation">&lt;single-animation&gt;</dfn> =
-				&lt;single-animation-name&gt; ||
 				<span>&lt;time&gt;</span> ||
 				&lt;single-animation-timing-function&gt; ||
 				<span>&lt;time&gt;</span> ||
 				&lt;single-animation-iteration-count&gt; ||
 				&lt;single-animation-direction&gt; ||
 				&lt;single-animation-fill-mode&gt; ||
-				&lt;single-animation-play-state&gt;
+				&lt;single-animation-play-state&gt; ||
+				&lt;single-animation-name&gt;
 	</div>
 
 	<p>
@@ -1057,6 +1057,28 @@ <h3 id="animation-shorthand-property">
 		is assigned to animation-delay.
 	</p>
 
+	<p>
+		Note that order is also important within each animation definition
+		for distinguishing &lt;single-animation-name&gt; values
+		from other keywords.
+		When parsing, keywords that are valid for
+		properties other than 'animation-name'
+		must be accepted for those properties
+		rather than for 'animation-name'.
+		Furthermore, when serializing,
+		default values of other properties must be output
+		in at least the cases necessary to distinguish an
+		'animation-name' that could be a value of another property,
+		and may be output in additional cases.
+		<span class="example">
+			For example, a value parsed from ''animation: 3s none backwards''
+			(where 'animation-fill-mode' is ''none'' and
+			'animation-name' is ''backwards'')
+			must not be serialized as ''animation: 3s backwards''
+			(where 'animation-fill-mode' is ''backwards'' and
+			'animation-name' is ''none'').
+		</span>
+
 	<p class="issue">
 		Need to also explain how order is important in terms of animation-name
 		versus keywords, and probably also adjust the canonical order to