diff --git a/desktop/src/globals.css b/desktop/src/globals.css
index eaf54c27..af1a365b 100644
--- a/desktop/src/globals.css
+++ b/desktop/src/globals.css
@@ -35,3 +35,18 @@ h4 { @apply text-lg font-medium; }
 .os-hide-horizontal-scrollbar > .os-scrollbar-horizontal {
     display: none;
 }
+
+.page-animation-enter-active, .page-animation-leave-active {
+    transition: opacity 200ms, transform 250ms;
+    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.page-animation-enter, .page-animation-leave-to {
+    opacity: 0;
+    transform: translateX(-75px);
+}
+
+.page-animation-enter-to, .page-animation-leave {
+    opacity: 1;
+    transform: translateX(0);
+}
diff --git a/desktop/src/ui/components/AnimatedRoutes.tsx b/desktop/src/ui/components/AnimatedRoutes.tsx
index a9929feb..31733eb6 100644
--- a/desktop/src/ui/components/AnimatedRoutes.tsx
+++ b/desktop/src/ui/components/AnimatedRoutes.tsx
@@ -2,52 +2,15 @@ import type { ParentProps } from 'solid-js';
 import { Transition } from 'solid-transition-group';
 
 function AnimatedRoutes(props: ParentProps) {
-	const keyframesEnter = [
-		{
-			opacity: 0,
-			transform: 'translateX(-100px)',
-		},
-		{
-			opacity: 1,
-			transform: 'translateX(0px)',
-		},
-	];
-
-	const keyframesExit = [
-		{
-			opacity: 1,
-			transform: 'translateX(0px)',
-		},
-		{
-			opacity: 0,
-			transform: 'translateX(100px)',
-		},
-	];
-
-	const properties: KeyframeAnimationOptions = {
-		duration: 100,
-		easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
-	};
-
 	return (
 		<Transition
 			mode="outin"
-			onEnter={(element, done) => {
-				const animation = element.animate(
-					keyframesEnter,
-					properties,
-				);
-
-				animation.onfinish = done;
-			}}
-			onExit={(element, done) => {
-				const animation = element.animate(
-					keyframesExit,
-					properties,
-				);
-
-				animation.onfinish = done;
-			}}
+			enterClass="page-animation-enter"
+			enterActiveClass="page-animation-enter-active"
+			enterToClass="page-animation-enter-to"
+			exitClass="page-animation-leave"
+			exitActiveClass="page-animation-leave-active"
+			exitToClass="page-animation-leave-to"
 		>
 			{props.children}
 		</Transition>