[css-animations] Rewrite the @Keyframes grammar as a CSS grammar. Ref the correct terms in a few spots in the same section.

Author: tabatkins

css-animations/Overview.bs

@@ -214,32 +214,44 @@ Keyframes</h2>
 	during the animation. The keyframes specify the behavior of one cycle of the animation;
 	the animation may iterate zero or more times.
 
-	Keyframes are specified using a specialized CSS at-rule. A <dfn>@keyframes</dfn> rule consists of the
-	keyword "@keyframes", followed by either an identifier or a string giving a name for the animation (which will
-	be referenced using 'animation-name'), followed by a set of style rules (delimited by curly
-	braces).
-
-	The keyframe selector for a keyframe style rule 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%''.
-	<span class="note">Note that the percentage unit specifier must be used on percentage values.
-	Therefore, ''0'' is an invalid keyframe selector.</span>
+	Keyframes are specified using the <dfn>@keyframes</dfn> at-rule,
+	defined as follows:
+
+	<pre>
+		@keyframes = @keyframes [ <<custom-ident>> | <<string>> ] { <<rule-list>> }
+
+		<dfn>&lt;keyframe-block></dfn> = <<keyframe-selector>># { <<declaration-list>> }
+
+		<dfn>&lt;keyframe-selector></dfn> = from | to | <<percentage>>
+	</pre>
+
+	The <<rule-list>> inside of ''@keyframes'' can only contain <<keyframe-block>> rules.
+
+	The <<declaration-list>> inside of <<keyframe-block>> accepts any CSS property
+	except those defined in this specification,
+	but <em>does</em> accept the 'animation-play-state' property
+	and interprets it specially.
+	None of the properties interact with the cascade
+	(so using ''!important'' on them is invalid and will cause the property to be ignored).
+
+	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.
+
+	<span class="note">Note that the percentage unit specifier must be used on percentage values. Therefore, ''0'' is an invalid keyframe selector.</span>
 
 	If a ''0%'' or ''from'' keyframe is not specified, then the user agent constructs a ''0%'' keyframe
 	using the computed values of the properties being animated. If a ''100%'' or ''to'' keyframe is not
 	specified, then the user agent constructs a ''100%'' keyframe using the computed values of the
-	properties being animated. If a keyframe selector specifies negative percentage values or values
-	higher than ''100%'', then the keyframe will be ignored.
+	properties being animated.
 
-	The keyframe declaration block for a keyframe rule consists of properties and values. The properties
+	The <<keyframe-block>> contains properties and values. The properties
 	defined by this specification are ignored in these rules, with the exception of
-	'animation-timing-function', the behavior of which is described below. In addition, keyframe rule
-	declarations qualified with !important are ignored.
+	'animation-timing-function', the behavior of which is described below. In addition, properties qualified with !important are invalid and ignored.
 
-	The @keyframes rule that is used by an animation will be the last one encountered in sorted rules
-	order that matches the name of the animation specified by the 'animation-name' property.
+	If multiple ''@keyframes'' rules are defined with the same name,
+	the last one in document order wins,
+	and all preceding ones are ignored.
 
 	<div class='example'>
 		<pre>
@@ -333,20 +345,6 @@ Keyframes</h2>
 		</figure>
 	</div>
 
-	The following is the grammar for the keyframes rule:
-
-	<pre>
-		keyframes_rule: KEYFRAMES_SYM S+ IDENT S* '{' S* keyframes_blocks '}' S*;
-
-		keyframes_blocks: [ keyframe_selector '{' S* declaration? [ ';' S* declaration? ]* '}' S* ]* ;
-
-		keyframe_selector: [ FROM_SYM | TO_SYM | PERCENTAGE ] S* [ ',' S* [ FROM_SYM | TO_SYM | PERCENTAGE ] S* ]*;
-
-		@{K}{E}{Y}{F}{R}{A}{M}{E}{S}   {return KEYFRAMES_SYM;}
-		{F}{R}{O}{M}                   {return FROM_SYM;}
-		{T}{O}                         {return TO_SYM;}
-	</pre>
-
 	<p class="issue">
 		This specification needs to define
 		how the value is determined from the keyframes,