[css-values-4][editorial] Added more examples, slightly rephrased some bits without changing meaning. #9343

Author: tabatkins

css-values-4/Overview.bs

@@ -578,9 +578,10 @@ Representing Interpolated Values: the ''mix()'' notation</h3>
 	rather than the more typical comma
 	because the values themselves can contain commas.
 
+
 	If the two <<declaration-value>>s in ''mix()'' are [=interpolation|interpolable=]
-	(without using ''mix()'' itself)
 	as values for the property in which it is specified,
+	and the interpolated value can be represented without ''mix()'',
 	the [=computed value=] of ''mix()'' is
 	the result of interpolating these two values
 	to the progress given by the <<percentage>>.
@@ -591,6 +592,39 @@ Representing Interpolated Values: the ''mix()'' notation</h3>
 	and both <<declaration-value>>s computed
 	as values for this property.
 
+	<div class="example">
+		For example, most uses of ''mix()''
+		will resolve at computed-value time:
+
+		<pre>
+			color: mix(90%; red; blue);
+			/* via simple interpolation,
+			   computes to: */
+			color: rgb(10% 0 90%);
+
+			color: mix(90%; currentcolor; black);
+			/* can't be fully resolved at computed-value time,
+			   but still has a defined representation: */
+			color: color-mix(currentcolor 90%, black 10%);
+
+			float: mix(90%; left; right);
+			/* discretely animatable */
+			float: right;
+		</pre>
+
+		But a few cases don't have an intermediate representation:
+
+		<pre>
+			transform: mix(90%; translate(calc(1em + 50%)); rotate(30deg));
+			/* because functions don't match, it will interpolate
+			   via matrix(). But translate(%) needs layout
+			   information to turn into a matrix(), so the
+			   interpolated value can't actually be represented.
+			   Computes to: */
+			transform: mix(90%; translate(calc(16px + 50%)); rotate(30deg));
+		</pre>
+	</div>
+
 	A ''mix()'' notation is invalid
 	if it is not the sole value of the property;
 	if either of its <<declaration-value>>s
@@ -601,15 +635,16 @@ Representing Interpolated Values: the ''mix()'' notation</h3>
 	<div class="example">
 		For example, the following declarations are invalid,
 		and will be ignored:
+
 		<pre>
 			/* Invalid start value */
 			color: mix(90% ; #invalid ; #F00);
 
 			/* Function is mixed with other values */
 			background: url(ocean) mix(10% ; blue ; yellow);
 
-			/* 'display' is not animatable */
-			display: mix(0% ; inline ; block);
+			/* 'animation-*' is not animatable */
+			animation-delay: mix(0% ; 0s ; 2s);
 		</pre>
 	</div>