tmp

Author: jakearchibald

css-view-transitions-1/Overview.bs

@@ -178,6 +178,20 @@ 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 [=user-agent origin=]:
+
+	```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=],
@@ -992,36 +1006,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	<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: