diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index ad702986e7d..e7289828240 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -30,6 +30,8 @@ spec:css-images-4; type:function; text:element()
 urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	text: NavigateEvent
 	text: signal; for: NavigateEvent; url: #ref-for-dom-navigateevent-signal①
+urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
+	text: HTML user agent style sheet; url: #the-css-user-agent-style-sheet-and-presentational-hints
 </pre>
 
 <style>
@@ -162,7 +164,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			Note: The value <css>none</css> is invalid as a <<custom-ident>>.
 	</dl>
 
-	The [=document element=] participates in a view transition by default using the following style in the [=user-agent origin=]:
+	The [=document element=] participates in a view transition by default using the following rule,
+	added to the [=HTML user agent style sheet=]:
 
 	```css
 	html {
@@ -178,10 +181,23 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	This may be confusing, since the elements themselves are not necessarily referring to the same object,
 	but it is a useful model to consider them to be visual states of the same conceptual page entity, that we happen to call "element".
 
+# User-agent keyframes # {#ua-keyframes}
+
+	The following <<@keyframes>> are added to the [=HTML user agent style sheet=]:
+
+	```css
+	@keyframes -ua-view-transition-fade-out {
+		to { opacity: 0; }
+	}
+
+	@keyframes -ua-view-transition-fade-in {
+		from { opacity: 0; }
+	}
+	```
+
 # Pseudo-elements # {#pseudo}
 
-	While the UA is [=animating a view transition=],
-	it creates the following <dfn export>view-transition pseudo-elements</dfn> to represent the various items being animated.
+	The following <dfn export>view-transition pseudo-elements</dfn> represent the various items being animated.
 
 	The ''::view-transition'' pseudo-element acts as a grouping element for other [=view-transition pseudo-elements=]
 	and has the document's [=document element=] as its [=originating element=].
@@ -215,7 +231,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	:: This pseudo-element is the grouping container of all the other [=view-transition pseudo-elements=].
 		Its [=originating element=] is the document's [=document element=].
 
-		The following [=user-agent origin=] styles apply to this element:
+		The following is added to the [=HTML user agent style sheet=]:
 
 		```css
 		html::view-transition {
@@ -234,7 +250,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		Its [=originating element=] is the ''::view-transition'' pseudo-element.
 
-		The following [=user-agent origin=] styles apply to this element:
+		The following is added to the [=HTML user agent style sheet=]:
 
 		```css
 		html::view-transition-group(*) {
@@ -250,13 +266,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		<div class="note">
 			The aim of the style is to position the element relative to its ''::view-transition'' parent.
 
-			In addition to above, styles in the [=user-agent origin=] animate this pseudo-element's 'width' and 'height'
+			In addition to above, styles in the [=document/view transition style sheet=] animate this pseudo-element's 'width' and 'height'
 			from the size of the old element's [=border box=] to that of the new element's [=border box=].
 			Also the element's 'transform' is animated from the old element's screen space transform to the new element's screen space transform.
 			This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
 		</div>
 
-
 		Issue: The selector for this and subsequently defined pseudo-elements is likely to change to indicate position in the pseudo-tree hierarchy.
 
 	: <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn>
@@ -265,7 +280,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		Its [=originating element=] is the ''::view-transition-group()'' pseudo-element with the same transition-name.
 
-		The following [=user-agent origin=] styles apply to this element:
+		The following is added to the [=HTML user agent style sheet=]:
 
 		```css
 		html::view-transition-image-pair(*) {
@@ -277,14 +292,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		}
 		```
 
-		In addition to above, styles in the [=user-agent origin=] add ''isolation: isolate'' to this pseudo-element
-		if it has both ''::view-transition-new()'' and ''::view-transition-old()'' as children.
-
-		Note: The aim of the style is to position the element to occupy the same space as its ''::view-transition-group()'' element
-		and provide isolation for blending.
-
-		Issue: Isolation is only necessary to get the right cross-fade between new and old image pixels.
-		Would it be simpler to always add it and try to optimize in the implementation?
+		Note: The aim of the style is to position the element to occupy the same space as its ''::view-transition-group()'' element.
 
 	: <dfn>::view-transition-old( <<pt-name-selector>> )</dfn>
 	::  One of these pseudo-elements exists for each element in the old DOM being animated by the view transition,
@@ -293,7 +301,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		Its [=originating element=] is the ''::view-transition-image-pair()'' pseudo-element with the same transition-name.
 
-		The following [=user-agent origin=] styles apply to this element:
+		The following is added to the [=HTML user agent style sheet=]:
 
 		```css
 		html::view-transition-old(*) {
@@ -310,20 +318,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		Note: The aim of the style is to match the element's inline size while retaining the aspect ratio.
 		It is also placed at the block start.
 
-		In addition to above, styles in the [=user-agent origin=] add ''mix-blend-mode: plus-lighter'' to this pseudo element
-		if the ancestor ''::view-transition-image-pair()'' has both ''::view-transition-new()'' and ''::view-transition-old()'' as descendants.
-
-		Note: ''mix-blend-mode: plus-lighter'' ensures that the blending of identical pixels from the old and new images results in the same color value as those pixels.
-
-		Additional [=user-agent origin=] styles added to animate these pseudo-elements
-		are detailed in [=Animate a view transition=].
+		Note: Additional styles in the [=document/view transition style sheet=] added to animate these pseudo-elements are detailed in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
 
 	: <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>
-	::  Identical to ''::view-transition-old()'',
+	:: Identical to ''::view-transition-old()'',
 		except it deals with the new element instead.
 
 	The precise tree structure, and in particular the order of sibling pseudo-elements,
-	is defined in the [=Create transition pseudo-elements=] algorithm.
+	is defined in the [=setup transition pseudo-elements=] algorithm.
 
 # Concepts # {#concepts}
 
@@ -420,6 +422,34 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			Issue: The type of "element" needs to be linked or defined.
 	</dl>
 
+	In addition, a [=captured element=] has the following <dfn for="captured element">style definitions</dfn>:
+
+	<dl dfn-for="captured element">
+		: <dfn>group keyframes</dfn>
+		:: A {{CSSKeyframesRule}} or null. Initially null.
+
+		: <dfn>group animation name rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>group styles rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>old view-box rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>new view-box rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>image pair isolation rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>view blend mode rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+	</dl>
+
+	Note: These are used to update, and later remove styles
+	from a [=document=]'s [=document/view transition style sheet=].
+
 ## Additions to {{Document}} ## {#additions-to-document}
 
 	A {{Document}} additionally has:
@@ -430,6 +460,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		: <dfn>transition suppressing rendering</dfn>
 		:: a boolean. Initially false.
+
+		: <dfn>view transition style sheet</dfn>
+		:: a [=style sheet=].
+			Initially a new [=style sheet=] in the [=user-agent origin=], ordered after the [=HTML user agent style sheet=].
+
+			Note: This is used to hold dynamic styles relating to transitions.
 	</dl>
 
 # API # {#api}
@@ -465,7 +501,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		1. Set |document|'s [=active DOM transition=] to |transition|.
 
-			Note: The process continues in [=perform an old capture=] which is executed at the next [=rendering opportunity=].
+			Note: The process continues in [=setup view transition=], via [=perform pending transition operations=], which is called in [[#monkey-patch-to-rendering-algorithm]].
 
 		1. Return |transition|.
 	</div>
@@ -627,16 +663,16 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		1. If |document|'s [=document/active DOM transition=] is not null, then:
 
 			1. If |document|'s [=document/active DOM transition=]'s [=ViewTransition/phase=] is "`pending-capture`",
-				then [=perform an old capture=] with |document|'s [=document/active DOM transition=].
+				then [=setup view transition=] with |document|'s [=document/active DOM transition=].
 
 			1. Otherwise, if |document|'s [=document/active DOM transition=]'s [=ViewTransition/phase=] is "`animating`",
 				then [=update transition DOM=] for |document|'s [=document/active DOM transition=].
 	</div>
 
-## [=Perform an old capture=] ## {#perform-an-old-capture-algorithm}
+## [=Setup view transition=] ## {#setup-view-transition-algorithm}
 
 	<div algorithm>
-		To <dfn>perform an old capture</dfn> given a {{ViewTransition}} |transition|,
+		To <dfn>setup view transition</dfn> given a {{ViewTransition}} |transition|,
 			perform the following steps:
 
 		1. Let |namedElements| be |transition|'s [=ViewTransition/named elements=].
@@ -650,7 +686,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			Issue: The link for "paint order" doesn't seem right.
 				Is there a more canonical definition?
-		
+
 			1. If any [=flat tree=] ancestor of this |element| [=skips its contents=], then [=continue=].
 
 			1. Let |transitionName| be the [=computed value=] of 'view-transition-name' for |element|.
@@ -677,7 +713,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			1. Set |capture|'s [=old image=] to the result of [=capturing the image=] of |element|.
 
-			1. Set |capture|'s [=old styles=] to the following:
+			1. Set |capture|'s [=captured element/old styles=] to the following:
 
 				: 'transform'
 				:: A CSS transform that would place |element|
@@ -693,6 +729,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 				:: ''object-view-box/none'' if |element| is the [=document element=],
 					otherwise, an 'object-view-box' value that, when applied to the old image,
 					will cause the view box to coincide with |element|'s [=border box=] in the image.
+					This must be expressed using ''&lt;basic-shape&gt;/inset()''.
 
 				: 'writing-mode'
 				:: The 'writing-mode' of |element|.
@@ -739,14 +776,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 					1. Set [=document/transition suppressing rendering=] to false.
 
-					1. Set |usedTransitionNames| to a new [=/set=].
+					1. Let |usedTransitionNames| be a new [=/set=] of strings.
 
 					1. [=list/For each=] |element| of every {{Element}} and [=pseudo-element=] connected to |document|,
 						in [paint order](https://drafts.csswg.org/css2/#painting-order):
 
 						Issue: The link for "paint order" doesn't seem right.
 							Is there a more canonical definition?
-		
+
 						1. If any [=flat tree=] ancestor of this |element| [=skips its contents=], then [=continue=].
 
 						1. Let |transitionName| be the [=computed value=] of 'view-transition-name' for |element|.
@@ -777,24 +814,24 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 						1. Let |capture|'s [=new element=] item be |element|.
 
-					1. [=Create transition pseudo-elements=] for |transition|.
-
-					1. [=Style transition pseudo-elements=] for |transition|.
+					1. [=Setup transition pseudo-elements=] for |transition|.
 
-					1. [=Animate a view transition=] |transition|.
+					1. [=Update pseudo-element styles=] for |transition|.
 
 						Note: The above steps will require running document lifecycle phases,
 							to compute information calculated during style/layout.
 
-					1. [=Resolve=] [=ViewTransition/ready promise=].
+					1. Set |transition|'s [=ViewTransition/phase=] to "`animating`".
 
-				* If the promise was rejected with reason |r|, then:
+					1. [=Resolve=] |transition|'s [=ViewTransition/ready promise=].
+
+				* If the promise was rejected with reason |reason|, then:
 
 					1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.
 
 						Note: This happens if |transition| was [=skip the view transition|skipped=] before this point.
 
-					1. [=skip the view transition=] |transition| with |r|.
+					1. [=Skip the view transition=] |transition| with |reason|.
 	</div>
 
 ## Skip the view transition ## {#skip-the-view-transition-algorithm}
@@ -812,13 +849,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 		1. Set [=document/transition suppressing rendering=] to false.
 
-		1. If |transition|'s [=ViewTransition/phase=] is equal to or [=phases/after=] "`animating`", then:
-
-			1. Remove all associated [=view-transition pseudo-elements=] from |document|.
-
-				Issue: There needs to be a definition/link for "remove".
-
-				Issue: There needs to be a definition/link for "associated".
+		1. If |transition|'s [=ViewTransition/phase=] is equal to or [=phases/after=] "`animating`",
+			then [=clear view transition=] |transition|.
 
 		1. Set |transition|'s [=ViewTransition/phase=] to "`done`".
 
@@ -828,13 +860,13 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			Note: The ready promise would've been resolved if {{ViewTransition/skipTransition()}} is called after we start animating.
 
-		1. [=promise/React=] to [=ViewTransition/DOM updated promise=]:
+		1. [=promise/React=] to |transition|'s [=ViewTransition/DOM updated promise=]:
 
-			* If [=ViewTransition/DOM updated promise=] was resolved,
+			* If |transition|'s [=ViewTransition/DOM updated promise=] was resolved,
 				then [=resolve=] |transition|'s [=ViewTransition/finished promise=].
 
-			* If [=ViewTransition/DOM updated promise=] was rejected with reason |r|,
-				then [=reject=] |transition|'s [=ViewTransition/finished promise=] with |r|.
+			* If |transition|'s [=ViewTransition/DOM updated promise=] was rejected with reason |reason|,
+				then [=reject=] |transition|'s [=ViewTransition/finished promise=] with |reason|.
 	</div>
 
 ## [=Capture the image=] ## {#capture-the-image-algorithm}
@@ -947,11 +979,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			1. Set |transition|'s [=ViewTransition/phase=] to "`done`".
 
-			1. Remove all associated [=view-transition pseudo-elements=] from |document|.
-
-				Issue: There needs to be a definition/link for "remove".
-
-				Issue: There needs to be a definition/link for "associated".
+			1. [=Clear view transition=] |transition|.
 
 			1. Set |document|'s [=document/active DOM transition=] to null.
 
@@ -959,9 +987,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			1. Return.
 
-		1. [=Style transition pseudo-elements=] for |transition|.
-
-		1. [=Animate a view transition=] for |transition|.
+		1. [=Update pseudo-element styles=] for |transition|.
 
 			Note: The above implies that a change in incoming element's size or position will cause a new keyframe to be generated.
 				This can cause a visual jump.
@@ -987,83 +1013,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			Issue: Define the algorithm used to clip the snapshot when it exceeds max size.
 	</div>
 
-## [=Animate a view transition=] ## {#animate-a-view-transition-algorithm}
+## [=Setup transition pseudo-elements=] ## {#setup-transition-pseudo-elements-algorithm}
 
 	<div algorithm>
-		To <dfn>animate a view transition</dfn> given a {{ViewTransition}} |transition|:
-
-		1. Generate a <<@keyframes>> named "-ua-view-transition-fade-out" in
-			[=user-agent origin=] as follows:
-
-			```css
-			@keyframes -ua-view-transition-fade-out {
-				to { opacity: 0; }
-			}
-			```
-
-		1. Generate a <<@keyframes>> named "-ua-view-transition-fade-in" in
-			[=user-agent origin=] as follows:
-
-			```css
-			@keyframes -ua-view-transition-fade-in {
-				from { opacity: 0; }
-			}
-			```
-
-		1. Apply the following styles in [=user-agent origin=]:
-
-			```css
-			html::view-transition-old(*) {
-				animation: -ua-view-transition-fade-out 0.25s both;
-			}
-
-			html::view-transition-new(*) {
-				animation: -ua-view-transition-fade-in 0.25s both;
-			}
-			```
-
-		1. [=map/For each=] |name| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
-
-			1. If neither of |capturedElement|'s [=captured element/old image=] or [=captured element/new element=] is null:
-
-				1. Let |transform| be |capturedElement|'s [=old styles=]'s 'transform' property.
-
-				1. Let |width| be |capturedElement|'s [=old styles=]'s 'width' property.
-
-				1. Let |height| be |capturedElement|'s [=old styles=]'s 'height' property.
-
-				1. Generate a <<@keyframes>> named "-ua-view-transition-group-anim-|name|" in
-					[=user-agent origin=] as follows:
-
-				<!-- deliberately using <pre> so the example can contain <var> references -->
-				<pre highlight="css">
-					@keyframes -ua-view-transition-group-anim-<var>name</var> {
-						from {
-							transform: <var>transform</var>;
-							width: <var>width</var>;
-							height: <var>height</var>;
-						}
-					}
-				</pre>
-
-			1. Apply the following styles in [=user-agent origin=]:
-
-				<!-- deliberately using <pre> so the example can contain <var> references -->
-				<pre highlight="css">
-					html::view-transition-group(<var>name</var>) {
-						animation-name: -ua-view-transition-group-anim-<var>name</var>;
-					}
-				</pre>
+		To <dfn>setup transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:
 
-		1. Set |transition|'s [=ViewTransition/phase=] to "`animating`".
-	</div>
-
-## [=Create transition pseudo-elements=] ## {#create-transition-pseudo-elements-algorithm}
-
-	<div algorithm>
-		To <dfn>create transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:
+		1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=].
 
-		1. Let |transitionRoot| be the result of creating a new ''::view-transition'' pseudo-element.
+		1. Let |transitionRoot| be the result of creating a new ''::view-transition'' pseudo-element in |document|'s [=snapshot viewport=].
 
 		1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
 
@@ -1088,6 +1045,20 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 				1. Append |old| to |imagePair|.
 
+				1. Let |oldViewBox| be |capturedElement|'s [=captured element/old styles=] 'object-view-box' property.
+
+				1. Set |capturedElement|'s [=captured element/old view-box rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/view transition style sheet=].
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-old(<var>transitionName</var>) {
+							object-view-box: <var>oldViewBox</var>;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
 			1. If |capturedElement|'s [=new element=] is not null, then:
 
 				1. Let |new| be a new ''::view-transition-new()'' [=replaced element=] pseudo-element,
@@ -1101,32 +1072,95 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 				except the [=view-transition pseudo-elements=],
 				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 both of |capturedElement|'s [=captured element/old image=] and [=captured element/new element=]
+				are not null, then:
+
+				1. Let |transform| be |capturedElement|'s [=captured element/old styles=]'s 'transform' property.
+
+				1. Let |width| be |capturedElement|'s [=captured element/old styles=]'s 'width' property.
+
+				1. Let |height| be |capturedElement|'s [=captured element/old styles=]'s 'height' property.
+
+				1. Set |capturedElement|'s [=captured element/group keyframes=] to a new {{CSSKeyframesRule}} representing the following CSS,
+					and append it to |document|'s [=document/view transition style sheet=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						@keyframes -ua-view-transition-group-anim-<var>transitionName</var> {
+							from {
+								transform: <var>transform</var>;
+								width: <var>width</var>;
+								height: <var>height</var>;
+							}
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
+				1. Set |capturedElement|'s [=captured element/group animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/view transition style sheet=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-group(<var>transitionName</var>) {
+							animation-name: -ua-view-transition-group-anim-<var>transitionName</var>;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
+				1. Set |capturedElement|'s [=captured element/image pair isolation rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/view transition style sheet=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-image-pair(<var>transitionName</var>) {
+							isolation: isolate;
+						}
+					</pre>
+
+					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,
+					and append it to |document|'s [=document/view transition style sheet=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-old(<var>transitionName</var>),
+						html::view-transition-new(<var>transitionName</var>) {
+							mix-blend-mode: plus-lighter;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
+					Note: ''mix-blend-mode: plus-lighter'' ensures that the blending of identical pixels from the old and new images results in the same color value as those pixels, and achieves a "correct" cross-fade.
+
+					Issue: Isolation and the dynamic setting of blending is only necessary to get the right cross-fade between new and old image pixels.
+					Would it be simpler to always add it and try to optimize in the implementation?
 	</div>
 
-## [=Style transition pseudo-elements=] ## {#style-transition-pseudo-elements-algorithm}
+## [=Update pseudo-element styles=] ## {#style-transition-pseudo-elements-algorithm}
 
 	<div algorithm>
-		To <dfn>style transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:
+		To <dfn>update pseudo-element styles</dfn> for a {{ViewTransition}} |transition|:
 
 		1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
 
-			1. Let |group| be the ''::view-transition-group()'' pseudo-element with the name |transitionName|.
-
-					Issue: "name" should be defined/linked.
-
 			1. Let |width|, |height|, |transform|, |writingMode|, and |direction| be null.
 
 			1. If |capturedElement|'s [=new element=] is null, then:
 
-				1. Set |width| to |capturedElement|'s [=old styles=] 'width' property.
+				1. Set |width| to |capturedElement|'s [=captured element/old styles=] 'width' property.
 
-				1. Set |height| to |capturedElement|'s [=old styles=] 'height' property.
+				1. Set |height| to |capturedElement|'s [=captured element/old styles=] 'height' property.
 
-				1. Set |transform| to |capturedElement|'s [=old styles=] 'transform' property.
+				1. Set |transform| to |capturedElement|'s [=captured element/old styles=] 'transform' property.
 
-				1. Set |writingMode| to |capturedElement|'s [=old styles=] 'writing-mode' property.
+				1. Set |writingMode| to |capturedElement|'s [=captured element/old styles=] 'writing-mode' property.
 
-				1. Set |direction| to |capturedElement|'s [=old styles=] 'direction' property.
+				1. Set |direction| to |capturedElement|'s [=captured element/old styles=] 'direction' property.
 
 			1. Otherwise:
 
@@ -1140,32 +1174,52 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 				1. Set |direction| to the [=computed value=] of 'direction' on |capturedElement|'s [=new element=].
 
-			1. At the [=user-agent origin=],
-				set |group|'s 'width', 'height', 'transform', 'writing-mode', and 'direction' properties
-				to |width|, |height|, |transform|, |writingMode|, and |direction|.
-
-			1. If |capturedElement|'s [=captured element/old image=] is not null, then:
+			1. If |capturedElement|'s [=captured element/group styles rule=] is null,
+				then set |capturedElement|'s [=captured element/group styles rule=] to a new {{CSSStyleRule}} representing the following CSS,
+				and append it to |document|'s [=document/view transition style sheet=].
 
-				1. Let |old| be the ''::view-transition-old()'' [=replaced element=] pseudo-element,
-					with the name |transitionName|,
-					displaying |capturedElement|'s [=captured element/old image=].
+				Otherwise, update |capturedElement|'s [=captured element/group styles rule=] to match the following CSS:
 
-				1. At the [=user-agent origin=],
-					set |old|'s 'object-view-box' property to |capturedElement|'s [=old styles=] 'object-view-box' property.
+				<!-- deliberately using <pre> so the example can contain <var> references -->
+				<pre highlight="css">
+					html::view-transition-group(<var>transitionName</var>) {
+						width: <var>width</var>;
+						height: <var>height</var>;
+						transform: <var>transform</var>;
+						writing-mode: <var>writingMode</var>;
+						direction: <var>direction</var>;
+					}
+				</pre>
 
-					Issue: Which of ''xywh()''/''rect()''/''inset()'' should we use?
+				Note: The above code example contains variables to be replaced.
 
 			1. If |capturedElement|'s [=new element=] is not null, then:
 
-				1. Let |new| be the ''::view-transition-new()'' [=replaced element=] pseudo-element, with the name |transitionName|,
+				1. Let |new| be the ''::view-transition-new()'' [=replaced element=] pseudo-element,
+					with the name |transitionName|,
 					displaying the [=capture the image=] of |capturedElement|'s [=new element=].
 
-				1. At the [=user-agent origin=],
-					set |new|'s 'object-view-box' property to a value that when applied to |new|,
-					will cause the view box to coincide with [=new element=]'s [=border box=] in the image.
-		
+				1. Let |newViewBox| be an ''object-view-box'' value that when applied to |new|,
+					will cause the view box to coincide with |capturedElement|'s [=new element=]'s [=border box=] in the image.
+					This must be expressed using ''&lt;basic-shape&gt;/inset()''.
+
+				1. If |capturedElement|'s [=captured element/new view-box rule=] is null,
+					then set |capturedElement|'s [=captured element/new view-box rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/view transition style sheet=].
+
+					Otherwise, update |capturedElement|'s [=captured element/new view-box rule=] to match the following CSS:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-new(<var>transitionName</var>) {
+							object-view-box: <var>newViewBox</var>;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
 		This algorithm must be executed to update styles in [=user-agent origin=] if its effects can be observed by a web API.
-		
+
 		Note: An example of such a web API is `window.getComputedStyle(document.documentElement, "::view-transition")`.
 	</div>
 
@@ -1189,6 +1243,27 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			* If |callbackPromise| was rejected with reason |r|, then [=reject=] |transition|'s [=ViewTransition/DOM updated promise=] with |r|.
 	</div>
 
+## [=Clear view transition=] ## {#clear-view-transition-algorithm}
+
+	<div algorithm>
+		To <dfn>clear view transition</dfn> of a {{ViewTransition}} |transition|:
+
+		1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].
+
+		1. Remove all associated [=view-transition pseudo-elements=] from |document|.
+
+				Issue: There needs to be a definition/link for "remove".
+
+				Issue: There needs to be a definition/link for "associated".
+
+		1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]:
+
+			1. [=list/For each=] |style| of |capturedElement|'s [=captured element/style definitions=]:
+
+				1. If |style| is not null,
+					then remove |style| from |document|'s [=document/view transition style sheet=].
+	</div>
+
 <h2 id="priv" class="no-num">Privacy Considerations</h2>
 
 This specification introduces no new privacy considerations.