[css-animations-2] Mark up productions

Author: heycam

css-animations-2/Overview.bs

@@ -429,7 +429,7 @@ Animation type: not animatable
 Canonical order: per grammar
 </pre>
 
-<dfn>&lt;single-animation-composition></dfn> = replace | add | accumulate
+<span class=prod><dfn>&lt;single-animation-composition></dfn> = replace | add | accumulate</span>
 
 The values of 'animation-composition' have the meaning defined for the
 corresponding values of the <a>composite operation</a> defined in Web
@@ -525,7 +525,7 @@ Canonical order: per grammar
 Animatable: no
 </pre>
 
-<pre>
+<pre class=prod>
 <dfn>&lt;single-animation-timeline></dfn> = auto | none | <<timeline-name>>
 </pre>
 
@@ -550,7 +550,7 @@ the following effects:
     <<timeline-name>>. If such a timeline at-rule exists, then the animation's
     [=timeline=] is a timeline as defined by that rule. Otherwise the animation
     is not associated with a [=timeline=].
-    <pre>
+    <pre class=prod>
       &lt;timeline-name> = <<custom-ident>> | <<string>>
     </pre>
 
@@ -567,7 +567,7 @@ select keyframes and timeline if necessary.
 
 The 'animation' shorthand property syntax is as follows:
 
-<dfn>&lt;single-animation></dfn> = <<time>> || <<easing-function>> || <<time>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || <<single-animation-timeline>>
+<span class=prod><dfn>&lt;single-animation></dfn> = <<time>> || <<easing-function>> || <<time>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || <<single-animation-timeline>></span>