[css-animations-1] Fix example 3

This fixes w3c#4118.

Author: birtles

css-animations-1/Overview.bs

@@ -248,31 +248,31 @@ Keyframes</h2>
 		so the first will be ignored:
 
 		<pre class=lang-css>
-		@keyframes foo { ... }
-		@keyframes "foo" { ... }
+		@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 { ... }
+		@keyframes FOO { /* ... */ }
 		</pre>
 
 		The following ''@keyframes'' rules are invalid
 		because they use disallowed <<custom-ident>> values:
 
 		<pre class=lang-css>
-		@keyframes initial { ... }
-		@keyframes None { ... }
+		@keyframes initial { /* ... */ }
+		@keyframes None { /* ... */ }
 		</pre>
 
-		However, those names *can* be specified with a <<string>>,
+		However, those names <em>can</em> be specified with a <<string>>,
 		so the following are both <em>valid</em>:
 
 		<pre class=lang-css>
-		@keyframes "initial" { ... }
-		@keyframes "None" { ... }
+		@keyframes "initial" { /* ... */ }
+		@keyframes "None" { /* ... */ }
 		</pre>
 	</div>
 
@@ -295,58 +295,62 @@ Keyframes</h2>
 	the last one in document order wins,
 	and all preceding ones are ignored.
 
-	<div class='example'>
-		<pre>
-		div {
-		  animation-name: slide-right;
-		  animation-duration: 2s;
-		}
+<div class='example'>
+<pre>
+div {
+  animation-name: slide-right;
+  animation-duration: 2s;
+}
 
-		@keyframes slide-right {
+@keyframes slide-right {
 
-		  from {
-		    margin-left: 0px;
-		  }
+  from {
+    margin-left: 0px;
+  }
 
-		  50% {
-		  	margin-left: 110px;
-		  	opacity: 1;
-		  }
+  50% {
+    margin-left: 110px;
+    opacity: 1;
+  }
 
-		  50% {
-		  	 opacity: 0.9;
-		  }
+  50% {
+    opacity: 0.9;
+  }
 
-		  to {
-		    margin-left: 200px;
-		  }
+  to {
+    margin-left: 200px;
+  }
 
-		}
-		</pre>
+}
+</pre>
 
-		At the 1s mark, the slide-right animation will have the same state as if we had defined the 50% rule like this:
+The two 50% rules from above can also be combined into an equivalent single rule
+as illustrated below:
 
-		<pre>
+<pre>
 
-		@keyframes slide-right {
+@keyframes slide-right {
 
-		  50% {
-		  	margin-left: 110px;
-		  	opacity: 0.9;
-		  }
+  from {
+    margin-left: 0px;
+  }
 
-		  to {
-		    margin-left: 200px;
-		  }
+  50% {
+    margin-left: 110px;
+    opacity: 0.9;
+  }
 
-		}
-		</pre>
+  to {
+    margin-left: 200px;
+  }
 
-	</div>
+}
+</pre>
+</div>
 
 	To determine the set of keyframes, all of the values in the selectors are sorted in increasing order
-	by time. The rules within the @keyframes rule then cascade; the properties of a keyframe may thus derive
-	from more than one @keyframes rule with the same selector value.
+	by time. The rules within the ''@keyframes'' rule then cascade; the properties of a keyframe may thus derive
+	from more than one ''@keyframes'' rule with the same selector value.
 
 	If a property is not specified for a keyframe, or is specified but invalid, the animation of that
 	property proceeds as if that keyframe did not exist. Conceptually, it is as if a set of keyframes is