fix(desktop-menu): use transition instead of animated keyframes

src/_shell/menu/desktop/desktop-menu.css

@@ -1,25 +1,18 @@
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
+.desktop-menu-opacity-transition {
+  transition:
+    opacity 0.5s,
+    display 0.5s,
+    overlay 0.5s;
+
+  transition-behavior: allow-discrete;
 
-@keyframes fadeOut {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+  opacity: 0;
 }
 
 .popover-showing {
-  animation: fadeIn both 500ms ease;
+  opacity: 1;
 }
 
 .popover-closing {
-  animation: fadeOut both 500ms ease;
+  opacity: 0;
 }

src/_shell/menu/desktop/desktop-menu.tsx

@@ -97,7 +97,7 @@ export const MenuPopoverLink = component$<MenuPopoverLinkProps>(
           onToggle$={event => {
             isOpenedSig.value = event.newState === 'open';
           }}
-          class='listbox container w-full'
+          class='listbox desktop-menu-opacity-transition container w-full'
         >
           <div class='flex justify-between'>
             <ul class='flex basis-10/12 gap-10 p-10'>