Use keyframes to specify plus-lighter blending for cross-fades (#9000)

* Use keyframes to specify plus-lighter blending for cross-fades

* Fix indentation

Author: khushalsagar

css-view-transitions-1/Overview.bs

@@ -837,11 +837,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	@keyframes -ua-view-transition-fade-in {
 		from { opacity: 0; }
 	}
-	:root::view-transition-old(*) {
-		animation-name: -ua-view-transition-fade-out;
-	}
-	:root::view-transition-new(*) {
-		animation-name: -ua-view-transition-fade-in;
+
+	/* Keyframes for blending when there are 2 images */
+	@keyframes -ua-mix-blend-mode-plus-lighter {
+		from { mix-blend-mode: plus-lighter }
+		to { mix-blend-mode: plus-lighter }
 	}
 	```
 
@@ -1143,7 +1143,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		: <dfn>image pair isolation rule</dfn>
 		:: A {{CSSStyleRule}} or null. Initially null.
 
-		: <dfn>view blend mode rule</dfn>
+		: <dfn>image animation name rule</dfn>
 		:: A {{CSSStyleRule}} or null. Initially null.
 	</dl>
 
@@ -1420,6 +1420,36 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 				are not painted (as if they had ''visibility: hidden'')
 				and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists.
 
+			1. If |capturedElement|'s [=captured element/old image=] is null, then:
+				1. [=Assert=]: |capturedElement|'s [=captured element/new element=] is not null.
+
+				1. Set |capturedElement|'s [=captured element/image animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/dynamic view transition style sheet=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						:root::view-transition-new(<var>transitionName</var>) {
+							animation-name: -ua-view-transition-fade-in;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
+			1. If |capturedElement|'s [=captured element/new element=] is null, then:
+				1. [=Assert=]: |capturedElement|'s [=captured element/old image=] is not null.
+
+				1. Set |capturedElement|'s [=captured element/image animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/dynamic view transition style sheet=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						:root::view-transition-old(<var>transitionName</var>) {
+							animation-name: -ua-view-transition-fade-out;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
 			1. If both of |capturedElement|'s [=captured element/old image=] and [=captured element/new element=]
 				are not null, then:
 
@@ -1469,14 +1499,16 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 					Note: The above code example contains variables to be replaced.
 
-				1. Set |capturedElement|'s [=captured element/view blend mode rule=] to a new {{CSSStyleRule}} representing the following CSS,
+				1. Set |capturedElement|'s [=captured element/image animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,
 					and append it to |document|'s [=document/dynamic view transition style sheet=]:
 
 					<!-- deliberately using <pre> so the example can contain <var> references -->
 					<pre highlight="css">
-						:root::view-transition-old(<var>transitionName</var>),
+						:root::view-transition-old(<var>transitionName</var>) {
+							animation-name: -ua-view-transition-fade-out, -ua-mix-blend-mode-plus-lighter;
+						}
 						:root::view-transition-new(<var>transitionName</var>) {
-							mix-blend-mode: plus-lighter;
+							animation-name: -ua-view-transition-fade-in, -ua-mix-blend-mode-plus-lighter;
 						}
 					</pre>
 
@@ -1789,6 +1821,11 @@ This should be feasible since access to this data should already be prevented in
 
 This appendix is <em>informative</em>.
 
+<h3 id="changes-since-2022-05-30">
+Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230530/">2022-05-30 Working Draft</a>
+</h3>
+* Use a keyframe to add plus-lighter blending during cross-fade. See <a href="https://github.com/w3c/csswg-drafts/issues/8924">issue 8924</a>.
+
 <h3 id="changes-since-2022-05-25">
 Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230525/">2022-05-25 Working Draft</a>
 </h3>