diff --git a/components/layout/style/index.ts b/components/layout/style/index.ts
index cd8fabc65..6215d39df 100644
--- a/components/layout/style/index.ts
+++ b/components/layout/style/index.ts
@@ -99,7 +99,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = token => {
         // fix firefox can't set width smaller than content on flex item
         minWidth: 0,
         background: colorBgHeader,
-        transition: `all ${motionDurationMid}`,
+        transition: `all ${motionDurationMid}, background 0s`,
 
         '&-children': {
           height: '100%',
diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts
index 89b138d4e..89661da30 100644
--- a/components/menu/style/index.ts
+++ b/components/menu/style/index.ts
@@ -248,11 +248,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = token => {
         lineHeight: 0, // Fix display inline-block gap
         listStyle: 'none',
         outline: 'none',
-        transition: [
-          `background ${motionDurationSlow}`,
-          // Magic cubic here but smooth transition
-          `width ${motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`,
-        ].join(','),
+        transition: `width ${motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`,
 
         [`ul, ol`]: {
           margin: 0,