diff --git a/docs/patterns/interaction.stories.mdx b/docs/patterns/interaction.stories.mdx
index 0caf5512ee..f78f39e6d5 100644
--- a/docs/patterns/interaction.stories.mdx
+++ b/docs/patterns/interaction.stories.mdx
@@ -50,7 +50,7 @@ An interactive element is... being interacted with.
         - a custom focus ring is applied
 
         #### Timing
-        Most state transitions use `var(--timing-base) ease-in` for a pleasant
+        Most state transitions use `var(--timing-base) ease-out` for a pleasant
         transition.
 
         #### CSS implementation
@@ -62,7 +62,7 @@ An interactive element is... being interacted with.
             .myElement {
                 background-color: var(--color-surface);
                 /* apply consistent transitions to background and box-shadow */
-                transition: all var(--timing-base) ease-in;
+                transition: all var(--timing-base) ease-out;
                 cursor: pointer;
                 /* hide the default focus ring, but still support "high contrast" modes */
                 outline: transparent;
diff --git a/packages/components/src/Menu/Menu.module.css b/packages/components/src/Menu/Menu.module.css
index 9217956ca6..11620ca0ef 100644
--- a/packages/components/src/Menu/Menu.module.css
+++ b/packages/components/src/Menu/Menu.module.css
@@ -76,8 +76,8 @@
   gap: var(--menu-space);
   align-items: center;
   transition:
-    background-color var(--timing-base) ease-in,
-    box-shadow var(--timing-base) ease-in;
+    background-color var(--timing-base) ease-out,
+    box-shadow var(--timing-base) ease-out;
 }
 
 .action:hover,