[css-ui-4] Simplify animation code in examples

Author: frivoal

css-ui-4/Overview.bs

@@ -184,15 +184,14 @@ textarea {
         animation: caret-alternate 2s step-end infinite;
 }
 @keyframes caret-alternate {
-	from { caret-color: blue; }
 	50% { caret-color: red; }
 }
 	</code></pre>
 
 	The simulated rendering below illustrates how this would look.
 	<style>
-@-webkit-keyframes caret-alternate { from { border-color: blue; } 50% { border-color: red; } }
-@keyframes caret-alternate { from { border-color: blue; } 50% { border-color: red; } }
+@-webkit-keyframes caret-alternate { 50% { border-color: red; } }
+@keyframes caret-alternate { 50% { border-color: red; } }
 	</style>
 	<div style="border:inset; background: white; width: 10em;">
 		Text area
@@ -277,12 +276,12 @@ The stacking position of the caret is left undefined, within the following const
 	the insertion point is between the letters u and m.
 
 	<style>
-@-webkit-keyframes caret-bar { from { outline-color: black; } 50% { outline-color: transparent; } }
-@-webkit-keyframes caret-block { from { background: #bbb; } 50% { background: transparent; } }
-@-webkit-keyframes caret-underscore { from { border-color: black; } 50% { border-color: transparent; } }
-@keyframes caret-bar { from { outline-color: black; } 50% { outline-color: transparent; } }
-@keyframes caret-block { from { background: #bbb; } 50% { background: transparent; } }
-@keyframes caret-underscore { from { border-color: black; } 50% { border-color: transparent; } }
+@-webkit-keyframes caret-bar { 50% { outline-color: transparent; } }
+@-webkit-keyframes caret-block { 50% { background: transparent; } }
+@-webkit-keyframes caret-underscore { 50% { border-color: transparent; } }
+@keyframes caret-bar { 50% { outline-color: transparent; } }
+@keyframes caret-block { 50% { background: transparent; } }
+@keyframes caret-underscore { 50% { border-color: transparent; } }
 #caret-shape-example {
 	min-width: 25em;
 }
@@ -297,9 +296,9 @@ The stacking position of the caret is left undefined, within the following const
 	</style>
 	<table id="caret-shape-example">
 		<tr><th>'caret-shape'<th>Sample rendering
-		<tr><td>''bar''<td>Lorem ipsu<span style="outline: 1px solid;animation: caret-bar 2s step-end infinite;-webkit-animation: caret-bar 2s step-end infinite;">&#8203;</span>m
-		<tr><td>''block''<td>Lorem ipsu<span style="-webkit-animation: caret-block 2s step-end infinite;animation: caret-block 2s step-end infinite;">m</span>
-		<tr><td>''underscore''<td>Lorem ispu<span style="border-bottom: 2px solid; -webkit-animation: caret-underscore 2s step-end infinite; animation: caret-underscore 2s step-end infinite;">m</span>
+		<tr><td>''bar''<td>Lorem ipsu<span style="outline: 1px solid black;animation: caret-bar 2s step-end infinite;-webkit-animation: caret-bar 2s step-end infinite;">&#8203;</span>m
+		<tr><td>''block''<td>Lorem ipsu<span style="background: #bbb; -webkit-animation: caret-block 2s step-end infinite;animation: caret-block 2s step-end infinite;">m</span>
+		<tr><td>''underscore''<td>Lorem ispu<span style="border-bottom: 2px solid black; -webkit-animation: caret-underscore 2s step-end infinite; animation: caret-underscore 2s step-end infinite;">m</span>
 	</table>
 </div>
 
@@ -319,8 +318,8 @@ The stacking position of the caret is left undefined, within the following const
 	</code></pre>
 
 	<style>
-@-webkit-keyframes terminal-caret { from { border-color: white; } 50% { border-color: transparent; } }
-@keyframes terminal-caret { from { border-color: white; } 50% { border-color: transparent; } }
+@-webkit-keyframes terminal-caret { 50% { border-color: transparent; } }
+@keyframes terminal-caret { 50% { border-color: transparent; } }
 	</style>
 	<pre style="background: black; color: white; font-family: monospace; padding: 1ex">
 	user@host:css-ui-4 $ ls -a