Use CSS registered custom property for animation angle (props @westonruter).

Author: Felix Arntz

src/wp-includes/css/view-transitions-animation-wipe.css

@@ -1,3 +1,9 @@
+@property --wp-view-transition-angle {
+	syntax: "<angle>";
+	initial-value: 270deg;
+	inherits: false;
+}
+
 @property --wp-view-transition-progress {
 	syntax: "<number>";
 	initial-value: 0;
@@ -32,5 +38,5 @@
 	transform: none;
 	animation: wp-view-transition-new-animation 1.2s cubic-bezier(0.45, 0, 0.35, 1.0);
 	animation-fill-mode: both;
-	mask-image: linear-gradient(270deg, #000 calc(-70% + calc(170% * var(--wp-view-transition-progress, 0))), transparent calc(170% * var(--wp-view-transition-progress, 0)));
+	mask-image: linear-gradient(var(--wp-view-transition-angle), #000 calc(-70% + calc(170% * var(--wp-view-transition-progress, 0))), transparent calc(170% * var(--wp-view-transition-progress, 0)));
 }

src/wp-includes/theme.php

@@ -4485,12 +4485,18 @@ function wp_load_view_transitions() {
 		case 'wipe-from-bottom':
 			$animation_stylesheet = file_get_contents( ABSPATH . WPINC . "/css/view-transitions-animation-wipe{$suffix}.css" );
 			if ( str_ends_with( $theme_support['default-animation'], 'left' ) ) {
-				$animation_stylesheet = str_replace( '270deg', '90deg', $animation_stylesheet );
+				$animation_angle = 90;
 			} elseif ( str_ends_with( $theme_support['default-animation'], 'top' ) ) {
-				$animation_stylesheet = str_replace( '270deg', '180deg', $animation_stylesheet );
+				$animation_angle = 180;
 			} elseif ( str_ends_with( $theme_support['default-animation'], 'bottom' ) ) {
-				$animation_stylesheet = str_replace( '270deg', '0deg', $animation_stylesheet );
+				$animation_angle = 0;
+			} else {
+				$animation_angle = 270;
 			}
+			$animation_stylesheet .= sprintf(
+				'::view-transition-new(root) { --wp-view-transition-angle: %ddeg; }',
+				$animation_angle
+			);
 			wp_add_inline_style( 'wp-view-transitions', $animation_stylesheet );
 			break;
 		case 'default':