[css-animations] Define <keyframes-name> and how idents/strings are compared. Make animation-name refer to <keyframes-name> directly. Fixes #118

Author: tabatkins

css-animations/Overview.bs

@@ -218,7 +218,9 @@ Keyframes</h2>
 	defined as follows:
 
 	<pre>
-		@keyframes = @keyframes [ <<custom-ident>> | <<string>> ] { <<rule-list>> }
+		@keyframes = @keyframes <<keyframes-name>> { <<rule-list>> }
+
+		<dfn>&lt;keyframes-name></dfn> = <<custom-ident>> | <<string>>
 
 		<dfn>&lt;keyframe-block></dfn> = <<keyframe-selector>># { <<declaration-list>> }
 
@@ -234,6 +236,46 @@ Keyframes</h2>
 	None of the properties interact with the cascade
 	(so using ''!important'' on them is invalid and will cause the property to be ignored).
 
+	A ''@keyframes'' block has a name given by the <<custom-ident>> or <<string>> in its prelude.
+	The two syntaxes are equivalent in functionality;
+	the name is the value of the ident or string.
+	As normal for <<custom-ident>>s and <<string>>s,
+	the names are fully <a>case-sensitive</a>;
+	two names are equal only if they are codepoint-by-codepoint equal.
+	The <<custom-ident>> additionally excludes the ''none'' keyword.
+
+	<div class=example>
+		For example, the following two ''@keyframes'' rules have the same name,
+		so the first will be ignored:
+
+		<pre class=lang-css>
+		@keyframes foo { ... }
+		@keyframes "foo" { ... }
+		</pre>
+
+		On the other hand,
+		the following ''@keyframes'' rule's name is <em>different</em> from the previous two rules:
+
+		<pre class=lang-css>
+		@keyframes FOO { ... }
+		</pre>
+
+		The following ''@keyframes'' rules are invalid
+		because they use disallowed <<custom-ident>> values:
+
+		<pre class=lang-css>
+		@keyframes initial { ... }
+		@keyframes None { ... }
+		</pre>
+
+		However, those names *can* be specified with a <<string>>,
+		so the following are both <em>valid</em>:
+
+		<pre class=lang-css>
+		@keyframes "initial" { ... }
+		@keyframes "None" { ... }
+	</div>
+
 	The <<keyframe-selector>> for a <<keyframe-block>> consists of a comma-separated list of percentage values or the keywords ''from'' or ''to''. The selector is used to specify the percentage along the duration of the animation that the keyframe represents. The keyframe itself is specified by the block of property values declared on the selector. The keyword ''from'' is equivalent to the value ''0%''. The keyword ''to'' is equivalent to the value ''100%''.
 	Values less than ''0%'' or higher than ''100%'' are invalid
 	and cause their <<keyframe-block>> to be ignored.
@@ -425,7 +467,7 @@ The 'animation-name' property</h3>
 
 	<pre class='propdef'>
 	Name: animation-name
-	Value: <<single-animation-name>>#
+	Value: [ none | <<keyframes-name>> ]#
 	Initial: none
 	Applies to: all elements, ::before and ::after pseudo-elements
 	Inherited: none
@@ -436,8 +478,6 @@ The 'animation-name' property</h3>
 	Canonical order: per grammar
 	</pre>
 
-	<dfn>&lt;single-animation-name></dfn> = none | <<custom-ident>> | <<string>>
-
 	The values of 'animation-name' have the following meanings:
 
 	<dl dfn-type=value dfn-for=animation-name>
@@ -446,19 +486,11 @@ The 'animation-name' property</h3>
 			No keyframes are specified at all, so there will be no animation.
 			Any other animations properties specified for this animation have no effect.
 
-		<dt><dfn><<custom-ident>></dfn>
-		<dd>
-			The animation will use the keyframes with the name specified by the <<custom-ident>>,
-			if they exist. If no such keyframes exist, there is no animation.
-
-			The <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a>
-			and keywords defined by this property are not valid animation names.
-		<dt><dfn><<string>></dfn>
+		<dt><dfn><<keyframes-name>></dfn>
 		<dd>
-			The animation will use the keyframes with the name specified by the
-			<<string>>, if they exist. If no such keyframes exist, there is no
-			animation.
-		</dd>
+			The animation will use the keyframes with the name specified by the <<keyframes-name>>,
+			if they exist.
+			If no ''@keyframes'' rule with tha name exists, there is no animation.
 	</dl>
 
 <h3 id="animation-duration">