diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
index 6f035b468a..5e7f44aecb 100644
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@@ -192,7 +192,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
         background: token.badgeColor,
         borderRadius: calc(indicatorHeight).div(2).equal(),
         boxShadow: `0 0 0 ${unit(badgeShadowSize)} ${token.badgeShadowColor}`,
-        transition: `background ${token.motionDurationMid}`,
+        transition: `background-color ${token.motionDurationMid}`,
 
         a: {
           color: token.badgeTextColor,
diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts
index 296cd6818a..6a801d762f 100644
--- a/components/calendar/style/index.ts
+++ b/components/calendar/style/index.ts
@@ -196,7 +196,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
         border: 0,
         borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
         borderRadius: 0,
-        transition: `background ${token.motionDurationSlow}`,
+        transition: `background-color ${token.motionDurationSlow}`,
         '&-value': {
           lineHeight: unit(token.dateValueHeight),
           transition: `color ${token.motionDurationSlow}`,
diff --git a/components/date-picker/style/panel.ts b/components/date-picker/style/panel.ts
index d070d5d47b..4a0dc319a7 100644
--- a/components/date-picker/style/panel.ts
+++ b/components/date-picker/style/panel.ts
@@ -45,7 +45,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       height: cellHeight,
       lineHeight: unit(cellHeight),
       borderRadius: borderRadiusSM,
-      transition: `background ${motionDurationMid}`,
+      transition: `background-color ${motionDurationMid}`,
     },
 
     // >>> Hover
@@ -446,7 +446,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
       '&-week-panel-row': {
         td: {
           '&:before': {
-            transition: `background ${motionDurationMid}`,
+            transition: `background-color ${motionDurationMid}`,
           },
 
           '&:first-child:before': {
@@ -542,7 +542,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           overflowY: 'hidden',
           textAlign: 'start',
           listStyle: 'none',
-          transition: `background ${motionDurationMid}`,
+          transition: `background-color ${motionDurationMid}`,
           overflowX: 'hidden',
 
           '&::-webkit-scrollbar': {
@@ -597,7 +597,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
                 lineHeight: unit(timeCellHeight),
                 borderRadius: borderRadiusSM,
                 cursor: 'pointer',
-                transition: `background ${motionDurationMid}`,
+                transition: `background-color ${motionDurationMid}`,
 
                 '&:hover': {
                   background: cellHoverBg,
diff --git a/components/layout/style/sider.ts b/components/layout/style/sider.ts
index b8fca04b79..ca51fbfca0 100644
--- a/components/layout/style/sider.ts
+++ b/components/layout/style/sider.ts
@@ -88,7 +88,7 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
         background: siderBg,
         borderRadius: `0 ${unit(borderRadiusLG)} ${unit(borderRadiusLG)} 0`,
         cursor: 'pointer',
-        transition: `background ${motionDurationSlow} ease`,
+        transition: `background-color ${motionDurationSlow} ease`,
 
         '&::after': {
           position: 'absolute',
diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts
index e8547fa61b..1b1c302ce0 100644
--- a/components/mentions/style/index.ts
+++ b/components/mentions/style/index.ts
@@ -111,7 +111,7 @@ const genDropdownStyle: GenerateStyle<MentionsToken> = (token) => {
             fontWeight: 'normal',
             lineHeight,
             cursor: 'pointer',
-            transition: `background ${motionDurationSlow} ease`,
+            transition: `background-color ${motionDurationSlow} ease`,
 
             '&:hover': {
               backgroundColor: controlItemBgHover,
diff --git a/components/menu/style/horizontal.ts b/components/menu/style/horizontal.ts
index 28a97e0d18..e7d44c37e9 100644
--- a/components/menu/style/horizontal.ts
+++ b/components/menu/style/horizontal.ts
@@ -43,9 +43,10 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
       },
 
       [`${componentCls}-item, ${componentCls}-submenu-title`]: {
-        transition: [`border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`].join(
-          ',',
-        ),
+        transition: [
+          `border-color ${motionDurationSlow}`,
+          `background-color ${motionDurationSlow}`,
+        ].join(','),
       },
 
       // ===================== Sub Menu =====================
diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts
index 5afd02f31a..35da3e9ae2 100644
--- a/components/menu/style/index.ts
+++ b/components/menu/style/index.ts
@@ -428,7 +428,7 @@ const genMenuItemStyle = (token: MenuToken): CSSObject => {
       cursor: 'pointer',
       transition: [
         `border-color ${motionDurationSlow}`,
-        `background ${motionDurationSlow}`,
+        `background-color ${motionDurationSlow}`,
         `padding calc(${motionDurationSlow} + 0.1s) ${motionEaseInOut}`,
       ].join(','),
 
@@ -517,7 +517,7 @@ const genSubMenuArrowStyle = (token: MenuToken): CSSObject => {
           backgroundColor: 'currentcolor',
           borderRadius,
           transition: [
-            `background ${motionDurationSlow} ${motionEaseInOut}`,
+            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
             `transform ${motionDurationSlow} ${motionEaseInOut}`,
             `top ${motionDurationSlow} ${motionEaseInOut}`,
             `color ${motionDurationSlow} ${motionEaseInOut}`,
@@ -621,14 +621,14 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
         [`&-horizontal ${componentCls}-submenu`]: {
           transition: [
             `border-color ${motionDurationSlow} ${motionEaseInOut}`,
-            `background ${motionDurationSlow} ${motionEaseInOut}`,
+            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
           ].join(','),
         },
 
         [`${componentCls}-submenu, ${componentCls}-submenu-inline`]: {
           transition: [
             `border-color ${motionDurationSlow} ${motionEaseInOut}`,
-            `background ${motionDurationSlow} ${motionEaseInOut}`,
+            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
             `padding ${motionDurationMid} ${motionEaseInOut}`,
           ].join(','),
         },
@@ -636,7 +636,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
         [`${componentCls}-submenu ${componentCls}-sub`]: {
           cursor: 'initial',
           transition: [
-            `background ${motionDurationSlow} ${motionEaseInOut}`,
+            `background-color ${motionDurationSlow} ${motionEaseInOut}`,
             `padding ${motionDurationSlow} ${motionEaseInOut}`,
           ].join(','),
         },
diff --git a/components/menu/style/vertical.ts b/components/menu/style/vertical.ts
index e8f90cc22a..92a561d824 100644
--- a/components/menu/style/vertical.ts
+++ b/components/menu/style/vertical.ts
@@ -127,7 +127,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
             alignItems: 'center',
             transition: [
               `border-color ${motionDurationSlow}`,
-              `background ${motionDurationSlow}`,
+              `background-color ${motionDurationSlow}`,
               `padding ${motionDurationFast} ${motionEaseOut}`,
             ].join(','),
 
diff --git a/components/radio/style/index.ts b/components/radio/style/index.ts
index 09ff876a68..c7799e8c68 100644
--- a/components/radio/style/index.ts
+++ b/components/radio/style/index.ts
@@ -390,7 +390,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
       cursor: 'pointer',
       transition: [
         `color ${motionDurationMid}`,
-        `background ${motionDurationMid}`,
+        `background-color ${motionDurationMid}`,
         `box-shadow ${motionDurationMid}`,
       ].join(','),
 
diff --git a/components/select/style/dropdown.ts b/components/select/style/dropdown.ts
index b2205e6946..360d5a84fd 100644
--- a/components/select/style/dropdown.ts
+++ b/components/select/style/dropdown.ts
@@ -96,7 +96,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
         [selectItemCls]: {
           ...genItemStyle(token),
           cursor: 'pointer',
-          transition: `background ${token.motionDurationSlow} ease`,
+          transition: `background-color ${token.motionDurationSlow} ease`,
           borderRadius: token.borderRadiusSM,
 
           // =========== Group ============
diff --git a/components/steps/style/icon.ts b/components/steps/style/icon.ts
index 3fdcd2e8f9..4c54fb01b1 100644
--- a/components/steps/style/icon.ts
+++ b/components/steps/style/icon.ts
@@ -37,7 +37,7 @@ const genIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
         textAlign: 'center',
         borderRadius: varRef('icon-size'),
         border: `${varRef('icon-border-width')} ${lineType} transparent`,
-        transition: ['background', 'border', 'color', 'inset', 'transform']
+        transition: ['background-color', 'border', 'color', 'inset', 'transform']
           .map((key) => `${key} ${motionDurationSlow}`)
           .join(', '),
         zIndex: 1,
diff --git a/components/steps/style/inline.ts b/components/steps/style/inline.ts
index ff9e600aa8..0a3804e72e 100644
--- a/components/steps/style/inline.ts
+++ b/components/steps/style/inline.ts
@@ -51,7 +51,7 @@ const genInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
           marginInline: token.calc(token.marginXXS).div(2).equal(),
           borderRadius: token.borderRadiusSM,
           cursor: 'pointer',
-          transition: `background ${token.motionDurationMid}`,
+          transition: `background-color ${token.motionDurationMid}`,
           '&:hover': {
             background: token.controlItemBgHover,
           },
diff --git a/components/steps/style/panel.ts b/components/steps/style/panel.ts
index 9f51acb9dc..d344cd9917 100644
--- a/components/steps/style/panel.ts
+++ b/components/steps/style/panel.ts
@@ -72,7 +72,7 @@ const genPanelStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
               .equal(),
             [varName('item-base-width')]: `calc(${varRef('item-base-height')} * 0.7071)`,
 
-            transition: `background ${motionDurationMid}`,
+            transition: `background-color ${motionDurationMid}`,
           },
         },
 
diff --git a/components/table/style/index.ts b/components/table/style/index.ts
index 0710d09ded..42e1dcaf44 100644
--- a/components/table/style/index.ts
+++ b/components/table/style/index.ts
@@ -316,7 +316,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
           textAlign: 'start',
           background: tableHeaderBg,
           borderBottom: tableBorder,
-          transition: `background ${motionDurationMid} ease`,
+          transition: `background-color ${motionDurationMid} ease`,
 
           "&[colspan]:not([colspan='1'])": {
             textAlign: 'center',
@@ -345,7 +345,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       [`${componentCls}-tbody`]: {
         '> tr': {
           '> th, > td': {
-            transition: `background ${motionDurationMid}, border-color ${motionDurationMid}`,
+            transition: `background-color ${motionDurationMid}, border-color ${motionDurationMid}`,
             borderBottom: tableBorder,
 
             // ========================= Nest Table ===========================
@@ -376,7 +376,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
             textAlign: 'start',
             background: tableHeaderBg,
             borderBottom: tableBorder,
-            transition: `background ${motionDurationMid} ease`,
+            transition: `background-color ${motionDurationMid} ease`,
           },
 
           // measure cell styles
diff --git a/components/table/style/virtual.ts b/components/table/style/virtual.ts
index 38978211df..2c09e5217b 100644
--- a/components/table/style/virtual.ts
+++ b/components/table/style/virtual.ts
@@ -17,7 +17,7 @@ const genVirtualStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
       [`${componentCls}-tbody-virtual`]: {
         [`${componentCls}-tbody-virtual-holder-inner`]: {
           [`
-            & > ${componentCls}-row, 
+            & > ${componentCls}-row,
             & > div:not(${componentCls}-row) > ${componentCls}-row
           `]: {
             display: 'flex',
@@ -28,7 +28,7 @@ const genVirtualStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
 
         [`${componentCls}-cell`]: {
           borderBottom: tableBorder,
-          transition: `background ${motionDurationMid}`,
+          transition: `background-color ${motionDurationMid}`,
         },
 
         [`${componentCls}-expanded-row`]: {