diff --git a/components/_util/theme/index.tsx b/components/_util/theme/index.tsx
index 118216fda8..f5adc4d645 100644
--- a/components/_util/theme/index.tsx
+++ b/components/_util/theme/index.tsx
@@ -105,5 +105,4 @@ export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactEle
 
 export type GenerateStyle<ComponentToken extends object, ReturnType = CSSInterpolation> = (
   token: ComponentToken,
-  hashId?: string,
 ) => ReturnType;
diff --git a/components/_util/theme/util/motion.tsx b/components/_util/theme/util/motion.tsx
index f6b2698161..d984dff064 100644
--- a/components/_util/theme/util/motion.tsx
+++ b/components/_util/theme/util/motion.tsx
@@ -13,7 +13,6 @@ const initMotionCommonLeave = (duration: string): CSSObject => ({
 });
 
 export const initMotion = (
-  hashId: string,
   motionName: string,
   inKeyframes: Keyframes,
   outKeyframes: Keyframes,
@@ -39,12 +38,12 @@ export const initMotion = (
       ${motionCls}-enter${motionCls}-enter-active,
       ${motionCls}-appear${motionCls}-appear-active
     `]: {
-      animationName: inKeyframes.getName(hashId),
+      animationName: inKeyframes,
       animationPlayState: 'running',
     },
 
     [`${motionCls}-leave${motionCls}-leave-active`]: {
-      animationName: outKeyframes.getName(hashId),
+      animationName: outKeyframes,
       animationPlayState: 'running',
       pointerEvents: 'none',
     },
diff --git a/components/_util/theme/util/slide.tsx b/components/_util/theme/util/slide.tsx
index 15632cd7c1..ec85e0f072 100644
--- a/components/_util/theme/util/slide.tsx
+++ b/components/_util/theme/util/slide.tsx
@@ -3,7 +3,6 @@ import type { DerivativeToken } from '..';
 import { initMotion } from './motion';
 
 export const initSlideMotion = (
-  hashId: string,
   rootPrefixCls: string,
   motionName: string,
   inKeyframes: Keyframes,
@@ -14,7 +13,7 @@ export const initSlideMotion = (
   const motionCls = `.${rootMotionName}`;
 
   return [
-    initMotion(hashId, rootMotionName, inKeyframes, outKeyframes, token.motionDurationMid),
+    initMotion(rootMotionName, inKeyframes, outKeyframes, token.motionDurationMid),
 
     {
       [`
diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx
index 6a62c59770..7e64148f83 100644
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@@ -54,10 +54,7 @@ const antBadgeLoadingCircle = new Keyframes('antBadgeLoadingCircle', {
   },
 });
 
-const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
-  token: BadgeToken,
-  hashId: string,
-): CSSObject => {
+const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSObject => {
   const { componentCls, iconCls, antCls } = token;
   const numberPrefixCls = `${antCls}-scroll-number`;
   const ribbonPrefixCls = `${antCls}-ribbon`;
@@ -147,9 +144,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
         transform: 'translate(50%, -50%)',
         transformOrigin: '100% 0%',
         [`${iconCls}-spin`]: {
-          animation: `${antBadgeLoadingCircle.getName(hashId)} ${
-            token.motionDurationFast
-          } infinite linear`,
+          animationName: antBadgeLoadingCircle,
+          animationDuration: token.motionDurationFast,
+          animationIterationCount: 'infinite',
+          animationTimingFunction: 'linear',
         },
       },
       [`&${componentCls}-status`]: {
@@ -181,7 +179,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
             height: '100%',
             border: `1px solid ${token.colorPrimary}`,
             borderRadius: '50%',
-            animation: `${antStatusProcessing.getName(hashId)} 1.2s infinite ease-in-out`, // FIXME: hard code, copied from old less file
+            animationName: antStatusProcessing,
+            animationDuration: '1.2s',
+            animationIterationCount: 'infinite',
+            animationTimingFunction: 'ease-in-out',
             content: '""',
           },
         },
@@ -204,28 +205,28 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
         },
       },
       [`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
-        animation: `${antZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
-          token.motionEaseOutBack
-        }`,
+        animationName: antZoomBadgeIn,
+        animationDuration: token.motionDurationSlow,
+        animationTimingFunction: token.motionEaseOutBack,
         animationFillMode: 'both',
       },
       [`${componentCls}-zoom-leave`]: {
-        animation: `${antZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
-          token.motionEaseOutBack
-        }`,
+        animationName: antZoomBadgeOut,
+        animationDuration: token.motionDurationSlow,
+        animationTimingFunction: token.motionEaseOutBack,
         animationFillMode: 'both',
       },
       [`&${componentCls}-not-a-wrapper`]: {
         [`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
-          animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
-            token.motionEaseOutBack
-          }`,
+          animationName: antNoWrapperZoomBadgeIn,
+          animationDuration: token.motionDurationSlow,
+          animationTimingFunction: token.motionEaseOutBack,
         },
 
         [`${componentCls}-zoom-leave`]: {
-          animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
-            token.motionEaseOutBack
-          }`,
+          animationName: antNoWrapperZoomBadgeOut,
+          animationDuration: token.motionDurationSlow,
+          animationTimingFunction: token.motionEaseOutBack,
         },
         [`&:not(${componentCls}-status)`]: {
           verticalAlign: 'middle',
@@ -310,18 +311,12 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
           borderColor: 'currentcolor currentcolor transparent transparent',
         },
       },
-      antStatusProcessing,
-      antZoomBadgeIn,
-      antZoomBadgeOut,
-      antNoWrapperZoomBadgeIn,
-      antNoWrapperZoomBadgeOut,
-      antBadgeLoadingCircle,
     },
   };
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Badge', (token, { hashId }) => {
+export default genComponentStyleHook('Badge', token => {
   const badgeZIndex = 'auto';
   const badgeHeight = 20; // FIXME: hard code
   const badgeTextColor = token.colorBgComponent;
@@ -346,5 +341,14 @@ export default genComponentStyleHook('Badge', (token, { hashId }) => {
     badgeStatusSize,
   });
 
-  return [genSharedBadgeStyle(badgeToken, hashId), { display: 'none' }];
+  return [
+    genSharedBadgeStyle(badgeToken),
+    { display: 'none' },
+    antStatusProcessing,
+    antZoomBadgeIn,
+    antZoomBadgeOut,
+    antNoWrapperZoomBadgeIn,
+    antNoWrapperZoomBadgeOut,
+    antBadgeLoadingCircle,
+  ];
 });
diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx
index 8209e084fa..f807dc7a23 100644
--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@@ -257,7 +257,7 @@ const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 };
 
 // ============================== Loading ==============================
-const genCardLoadingStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject => {
+const genCardLoadingStyle: GenerateStyle<CardToken> = (token): CSSObject => {
   const { componentCls, gradientMin, gradientMax } = token;
 
   return {
@@ -277,13 +277,16 @@ const genCardLoadingStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject
       background: `linear-gradient(90deg, ${gradientMin}, ${gradientMax}, ${gradientMin})`,
       backgroundSize: '600% 600%',
       borderRadius: token.radiusBase,
-      animation: `${antCardLoading.getName(hashId)} 1.4s ease infinite`, // FIXME: hardcode in v4
+      animationName: antCardLoading,
+      animationDuration: '1.4s', // FIXME: hardcode
+      animationTimingFunction: 'ease',
+      animationIterationCount: 'infinite',
     },
   };
 };
 
 // ============================== Basic ==============================
-const genCardStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject => {
+const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
   const {
     componentCls,
     cardHoverableHoverBorder,
@@ -380,7 +383,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject => {
 
     [`${componentCls}-type-inner`]: genCardTypeInnerStyle(token),
 
-    [`${componentCls}-loading`]: genCardLoadingStyle(token, hashId),
+    [`${componentCls}-loading`]: genCardLoadingStyle(token),
   };
 };
 
@@ -444,7 +447,7 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Card', (token, { rootPrefixCls, hashId }) => {
+export default genComponentStyleHook('Card', (token, { rootPrefixCls }) => {
   const cardToken = mergeToken<CardToken>(token, {
     rootPrefixCls,
 
@@ -470,7 +473,7 @@ export default genComponentStyleHook('Card', (token, { rootPrefixCls, hashId })
 
   return [
     // Style
-    genCardStyle(cardToken, hashId),
+    genCardStyle(cardToken),
 
     // Size
     genCardSizeStyle(cardToken),
diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx
index ee628b9257..88d555bd0c 100644
--- a/components/cascader/style/index.tsx
+++ b/components/cascader/style/index.tsx
@@ -21,7 +21,7 @@ export interface ComponentToken {
 type CascaderToken = FullToken<'Cascader'>;
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
+const genBaseStyle: GenerateStyle<CascaderToken> = token => {
   const { prefixCls, componentCls } = token;
   const cascaderMenuItemCls = `${componentCls}-menu-item`;
   const iconCls = `
@@ -49,7 +49,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
     {
       [`${componentCls}-dropdown`]: [
         // ==================== Checkbox ====================
-        getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId!),
+        getCheckboxStyle(`${prefixCls}-checkbox`, token),
         {
           [componentCls]: {
             // ================== Checkbox ==================
@@ -158,12 +158,8 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
-  'Cascader',
-  (token, { hashId }) => [genBaseStyle(token, hashId)],
-  {
-    controlWidth: 184,
-    controlItemWidth: 111,
-    dropdownHeight: 180,
-  },
-);
+export default genComponentStyleHook('Cascader', token => [genBaseStyle(token)], {
+  controlWidth: 184,
+  controlItemWidth: 111,
+  dropdownHeight: 180,
+});
diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
index 6617c7c107..aecd3d2a3f 100644
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@@ -26,7 +26,7 @@ const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
 });
 
 // ============================== Styles ==============================
-export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) => {
+export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
   const { checkboxCls } = token;
   const wrapperCls = `${checkboxCls}-wrapper`;
 
@@ -197,7 +197,9 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
           border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`,
           borderRadius: token.controlRadius,
           visibility: 'hidden',
-          animation: `${antCheckboxEffect.getName(hashId)} ${token.motionDurationSlow} ease-in-out`,
+          animationName: antCheckboxEffect,
+          animationDuration: token.motionDurationSlow,
+          animationTimingFunction: 'ease-in-out',
           animationFillMode: 'backwards',
           content: '""',
         },
@@ -241,14 +243,14 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
 };
 
 // ============================== Export ==============================
-export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>, hashId: string) {
+export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>) {
   const checkboxToken: CheckboxToken = mergeToken<CheckboxToken>(token, {
     checkboxCls: `.${prefixCls}`,
   });
 
-  return [genCheckboxStyle(checkboxToken, hashId), antCheckboxEffect];
+  return [genCheckboxStyle(checkboxToken), antCheckboxEffect];
 }
 
-export default genComponentStyleHook('Checkbox', (token, { prefixCls, hashId }) => [
-  getStyle(prefixCls, token, hashId),
+export default genComponentStyleHook('Checkbox', (token, { prefixCls }) => [
+  getStyle(prefixCls, token),
 ]);
diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx
index 6396876de5..4e7adb5ec9 100644
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@@ -299,24 +299,24 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
           &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
           &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
           &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
-          animationName: slideDownIn.getName(token.hashId),
+          animationName: slideDownIn,
         },
 
         [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
           &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomRight,
           &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft,
           &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomRight`]: {
-          animationName: slideUpIn.getName(token.hashId),
+          animationName: slideUpIn,
         },
 
         [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
           &${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
-          animationName: slideDownOut.getName(token.hashId),
+          animationName: slideDownOut,
         },
 
         [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft,
           &${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomRight`]: {
-          animationName: slideUpOut.getName(token.hashId),
+          animationName: slideUpOut,
         },
 
         // Time picker with additional style
diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx
index 9036d69ca0..b826886956 100644
--- a/components/drawer/style/index.tsx
+++ b/components/drawer/style/index.tsx
@@ -30,10 +30,7 @@ const antdDrawerFadeIn = new Keyframes('antDrawerFadeIn', {
 });
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<DrawerToken> = (
-  token: DrawerToken,
-  hashId: string,
-): CSSObject => {
+const genBaseStyle: GenerateStyle<DrawerToken> = (token: DrawerToken): CSSObject => {
   const {
     componentCls,
     motionEaseOut,
@@ -171,7 +168,9 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (
       height: '100%',
       opacity: 1,
       transition: 'none',
-      animation: `${antdDrawerFadeIn.getName(hashId)} ${motionDurationSlow} ${motionEaseOut}`,
+      animationName: antdDrawerFadeIn,
+      animationDuration: token.motionDurationSlow,
+      animationTimingFunction: motionEaseOut,
       pointerEvents: 'auto',
     },
   };
@@ -285,7 +284,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Drawer', (token, { hashId }) => {
+export default genComponentStyleHook('Drawer', token => {
   const drawerToken = mergeToken<DrawerToken>(token, {
     black: '#000', // FIXME: hard code
     white: '#fff', // FIXME: hard code
@@ -310,5 +309,5 @@ export default genComponentStyleHook('Drawer', (token, { hashId }) => {
     motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code
   });
 
-  return [genBaseStyle(drawerToken, hashId), genDrawerStyle(drawerToken), antdDrawerFadeIn];
+  return [genBaseStyle(drawerToken), genDrawerStyle(drawerToken), antdDrawerFadeIn];
 });
diff --git a/components/image/style/index.tsx b/components/image/style/index.tsx
index 9df23f52b7..73c0a991fe 100644
--- a/components/image/style/index.tsx
+++ b/components/image/style/index.tsx
@@ -295,7 +295,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Image', (token, { hashId }) => {
+export default genComponentStyleHook('Image', token => {
   const imageToken = mergeToken<ImageToken>(token, {
     previewPrefixCls: `${token.componentCls}-preview`,
 
@@ -321,5 +321,5 @@ export default genComponentStyleHook('Image', (token, { hashId }) => {
     motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code in v4
   });
 
-  return [genImageStyle(imageToken, hashId)];
+  return [genImageStyle(imageToken)];
 });
diff --git a/components/list/style/index.tsx b/components/list/style/index.tsx
index 69f2b909b4..ffe2e1d35f 100644
--- a/components/list/style/index.tsx
+++ b/components/list/style/index.tsx
@@ -378,7 +378,7 @@ const genBaseStyle: GenerateStyle<ListToken> = token => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('List', (token, { hashId }) => {
+export default genComponentStyleHook('List', token => {
   const listToken = mergeToken<ListToken>(token, {
     listBorderedCls: `${token.componentCls}-bordered`,
     antPrefix: '.ant', // FIXME: hard code in v4
@@ -406,9 +406,5 @@ export default genComponentStyleHook('List', (token, { hashId }) => {
     lineHeight: 1.5,
   });
 
-  return [
-    genBaseStyle(listToken, hashId),
-    genBorderedStyle(listToken),
-    genResponsiveStyle(listToken),
-  ];
+  return [genBaseStyle(listToken), genBorderedStyle(listToken), genResponsiveStyle(listToken)];
 });
diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx
index d19b822331..51b151e0ff 100644
--- a/components/radio/style/index.tsx
+++ b/components/radio/style/index.tsx
@@ -121,11 +121,7 @@ function getGroupRadioStyle(
 }
 
 // Styles from radio-wrapper
-function getRadioBasicStyle(
-  prefixCls: string,
-  hashId: string,
-  token: RadioToken,
-): CSSInterpolation {
+function getRadioBasicStyle(prefixCls: string, token: RadioToken): CSSInterpolation {
   const radioInnerPrefixCls = `${prefixCls}-inner`;
 
   return {
@@ -164,7 +160,9 @@ function getRadioBasicStyle(
         border: `1px solid ${token.radioDotColor}`,
         borderRadius: '50%',
         visibility: 'hidden',
-        animation: `${antRadioEffect.getName(hashId)} 0.36s ease-in-out`,
+        animationName: antRadioEffect,
+        animationDuration: '0.36s',
+        animationTimingFunction: 'ease-in-out',
         animationFillMode: 'both',
         content: '""',
       },
@@ -465,13 +463,12 @@ function getRadioButtonStyle(prefixCls: string, token: RadioToken): CSSInterpola
 // ============================== Export ==============================
 export function getStyle(
   prefixCls: string,
-  hashId: string,
   antPrefix: string,
   token: RadioToken,
 ): CSSInterpolation {
   return [
     getGroupRadioStyle(prefixCls, antPrefix, token),
-    getRadioBasicStyle(prefixCls, hashId, token),
+    getRadioBasicStyle(prefixCls, token),
     getRadioButtonStyle(prefixCls, token),
   ];
 }
@@ -481,7 +478,7 @@ export default function useStyle(prefixCls: string, antPrefix: string): UseCompo
   return [
     useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
       const radioToken = getRadioToken(token);
-      return getStyle(prefixCls, hashId, antPrefix, radioToken);
+      return getStyle(prefixCls, antPrefix, radioToken);
     }),
     hashId,
   ];
diff --git a/components/select/style/dropdown.tsx b/components/select/style/dropdown.tsx
index 88faf5c717..80634a2788 100644
--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@@ -27,7 +27,7 @@ const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
   };
 };
 
-const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
+const genSingleStyle: GenerateStyle<SelectToken> = token => {
   const { rootPrefixCls, antCls, componentCls } = token;
 
   const selectItemCls = `${componentCls}-item`;
@@ -58,22 +58,22 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
             &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
             &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft
           `]: {
-          animationName: slideUpIn.getName(hashId),
+          animationName: slideUpIn,
         },
 
         [`
             &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
             &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft
           `]: {
-          animationName: slideDownIn.getName(hashId),
+          animationName: slideDownIn,
         },
 
         [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft`]: {
-          animationName: slideUpOut.getName(hashId),
+          animationName: slideUpOut,
         },
 
         [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft`]: {
-          animationName: slideDownOut.getName(hashId),
+          animationName: slideDownOut,
         },
 
         '&-hidden': {
@@ -153,8 +153,8 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
     },
 
     // Follow code may reuse in other components
-    initSlideMotion(hashId!, rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
-    initSlideMotion(hashId!, rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
+    initSlideMotion(rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
+    initSlideMotion(rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
     slideUpIn,
     slideUpOut,
     slideDownIn,
diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx
index 0654482844..af08b28d8f 100644
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@@ -258,7 +258,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
 };
 
 // ============================== Styles ==============================
-const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
+const genSelectStyle: GenerateStyle<SelectToken> = token => {
   const { componentCls } = token;
 
   return [
@@ -291,7 +291,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
     genMultipleStyle(token),
 
     // Dropdown
-    genDropdownStyle(token, hashId),
+    genDropdownStyle(token),
 
     // =====================================================
     // ==                       RTL                       ==
@@ -334,13 +334,13 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Select',
-  (token, { rootPrefixCls, hashId }) => {
+  (token, { rootPrefixCls }) => {
     const selectToken: SelectToken = mergeToken<SelectToken>(token, {
       rootPrefixCls,
       inputPaddingHorizontalBase: token.controlPaddingHorizontal - 1,
     });
 
-    return [genSelectStyle(selectToken, hashId)];
+    return [genSelectStyle(selectToken)];
   },
   token => ({
     zIndexDropdown: token.zIndexPopup + 50,
diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx
index f82ed7c85c..4bc82aeb18 100644
--- a/components/skeleton/style/index.tsx
+++ b/components/skeleton/style/index.tsx
@@ -40,13 +40,15 @@ const genSkeletonElementAvatarSize = (size: number): CSSObject => ({
   ...genSkeletonElementCommonSize(size),
 });
 
-const genSkeletonColor = (token: SkeletonToken, hashId: string): CSSObject => {
+const genSkeletonColor = (token: SkeletonToken): CSSObject => {
   const { skeletonColor, skeletonToColor } = token;
   return {
     background: `linear-gradient(90deg, ${skeletonColor} 25%, ${skeletonToColor} 37%, ${skeletonColor} 63%)`,
     backgroundSize: '400% 100%',
-    animation: `${skeletonClsLoading.getName(hashId)} 1.4s ease infinite`,
-    skeletonClsLoading,
+    animationName: skeletonClsLoading,
+    animationDuration: '1.4s', // FIXME: magic
+    animationTimingFunction: 'ease',
+    animationIterationCount: 'infinite',
   };
 };
 
@@ -189,7 +191,7 @@ const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
 };
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken, hashId: string) => {
+const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
   const {
     componentCls,
     skeletonAvatarCls,
@@ -319,29 +321,29 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken, hashId
     [`${componentCls}${componentCls}-active`]: {
       [`${componentCls}-content`]: {
         [`${skeletonTitleCls}, ${skeletonParagraphCls} > li`]: {
-          ...genSkeletonColor(token, hashId),
+          ...genSkeletonColor(token),
         },
       },
       [`${skeletonAvatarCls}`]: {
-        ...genSkeletonColor(token, hashId),
+        ...genSkeletonColor(token),
       },
 
       [`${skeletonButtonCls}`]: {
-        ...genSkeletonColor(token, hashId),
+        ...genSkeletonColor(token),
       },
 
       [`${skeletonInputCls}`]: {
-        ...genSkeletonColor(token, hashId),
+        ...genSkeletonColor(token),
       },
       [`${skeletonImageCls}`]: {
-        ...genSkeletonColor(token, hashId),
+        ...genSkeletonColor(token),
       },
     },
   };
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Skeleton', (token, { hashId }) => {
+export default genComponentStyleHook('Skeleton', token => {
   const { componentCls } = token;
 
   const skeletonToken = mergeToken<SkeletonToken>(token, {
@@ -361,5 +363,5 @@ export default genComponentStyleHook('Skeleton', (token, { hashId }) => {
     skeletonParagraphMarginTop: 28, // FIXME: hard code in v4
     borderRadius: 100, // FIXME: hard code in v4
   });
-  return [genBaseStyle(skeletonToken, hashId)];
+  return [genBaseStyle(skeletonToken), skeletonClsLoading];
 });
diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx
index 1bc33ff917..5f8c516200 100644
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@@ -282,14 +282,14 @@ const genVerticalStyle: GenerateStyle<SliderToken> = token => {
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Slider',
-  (token, { hashId }) => {
+  token => {
     const sliderToken = mergeToken<SliderToken>(token, {
       marginPart: (token.controlHeight - token.controlSize) / 2,
       marginFull: token.controlSize / 2,
       marginPartWithMark: token.controlHeightLG - token.controlSize,
     });
     return [
-      genBaseStyle(sliderToken, hashId),
+      genBaseStyle(sliderToken),
       genHorizontalStyle(sliderToken),
       genVerticalStyle(sliderToken),
     ];
diff --git a/components/spin/style/index.tsx b/components/spin/style/index.tsx
index 33bc2ec21b..f7eca2e01c 100644
--- a/components/spin/style/index.tsx
+++ b/components/spin/style/index.tsx
@@ -23,7 +23,7 @@ const antRotate = new Keyframes('antRotate', {
   to: { transform: 'rotate(405deg)' },
 });
 
-const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string): CSSObject => ({
+const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject => ({
   [`${token.componentCls}`]: {
     ...resetComponent(token),
     position: 'absolute',
@@ -155,7 +155,11 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string
         transform: 'scale(0.75)',
         transformOrigin: '50% 50%',
         opacity: 0.3,
-        animation: `${antSpinMove.getName(hashId)} 1s infinite linear alternate`,
+        animationName: antSpinMove,
+        animationDuration: '1s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear',
+        animationDirection: 'alternate',
 
         '&:nth-child(1)': {
           top: 0,
@@ -183,7 +187,10 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string
 
       '&-spin': {
         transform: 'rotate(45deg)',
-        animation: `${antRotate.getName(hashId)} 1.2s infinite linear`,
+        animationName: antRotate,
+        animationDuration: '1.2s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear',
       },
     },
 
@@ -213,20 +220,16 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string
     [`&${token.componentCls}-show-text ${token.componentCls}-text`]: {
       display: 'block',
     },
-
-    // animation
-    antSpinMove,
-    antRotate,
   },
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Spin', (token, { hashId }) => {
+export default genComponentStyleHook('Spin', token => {
   const spinToken = mergeToken<SpinToken>(token, {
     spinDotDefault: token.colorTextSecondary,
     spinDotSize: 20, // FIXME: hard code in v4
     spinDotSizeSM: 14, // FIXME: hard code in v4
     spinDotSizeLG: 32, // FIXME: hard code in v4
   });
-  return [genSpinStyle(spinToken, hashId)];
+  return [genSpinStyle(spinToken), antSpinMove, antRotate];
 });
diff --git a/components/tree-select/style/index.tsx b/components/tree-select/style/index.tsx
index 7e1c496add..d517ca6d3f 100644
--- a/components/tree-select/style/index.tsx
+++ b/components/tree-select/style/index.tsx
@@ -16,7 +16,7 @@ interface TreeSelectToken extends FullToken<'TreeSelect'> {
 }
 
 // =============================== Base ===============================
-const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
+const genBaseStyle: GenerateStyle<TreeSelectToken> = token => {
   const { componentCls, treePrefixCls } = token;
   const treeCls = `.${treePrefixCls}`;
 
@@ -31,7 +31,7 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
         },
 
         // ====================== Tree ======================
-        genTreeStyle(treePrefixCls, token, hashId!),
+        genTreeStyle(treePrefixCls, token),
         {
           [treeCls]: {
             borderRadius: 0,
@@ -48,7 +48,7 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
         },
 
         // ==================== Checkbox ====================
-        getCheckboxStyle(`${treePrefixCls}-checkbox`, token, hashId!),
+        getCheckboxStyle(`${treePrefixCls}-checkbox`, token),
 
         // ====================== RTL =======================
         {
@@ -69,10 +69,10 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
 
 // ============================== Export ==============================
 export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) {
-  return genComponentStyleHook('TreeSelect', (token, { hashId }) => {
+  return genComponentStyleHook('TreeSelect', token => {
     const treeSelectToken = mergeToken<TreeSelectToken>(token, {
       treePrefixCls,
     });
-    return [genBaseStyle(treeSelectToken, hashId)];
+    return [genBaseStyle(treeSelectToken)];
   })(prefixCls);
 }
diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx
index fe02971fbb..60692af908 100644
--- a/components/tree/style/index.tsx
+++ b/components/tree/style/index.tsx
@@ -67,7 +67,7 @@ type TreeToken = DerivativeToken & {
   treeTitleHeight: number;
 };
 
-export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string): CSSObject => {
+export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => {
   const { treeCls, treeNodeCls, treeNodePadding, treeTitleHeight } = token;
 
   const treeCheckBoxMarginVertical = (treeTitleHeight - token.fontSizeLG) / 2;
@@ -123,7 +123,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
               insetInlineStart: 0,
               border: `1px solid ${token.colorPrimary}`,
               opacity: 0,
-              animation: `${treeNodeFX.getName(hashId)} ${token.motionDurationSlow}`,
+              animationName: treeNodeFX,
+              animationDuration: token.motionDurationSlow,
               animationPlayState: 'running',
               animationFillMode: 'forwards',
               content: '""',
@@ -442,11 +443,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
 };
 
 // ============================== Merged ==============================
-export const genTreeStyle = (
-  prefixCls: string,
-  token: DerivativeToken,
-  hashId: string,
-): CSSInterpolation => {
+export const genTreeStyle = (prefixCls: string, token: DerivativeToken): CSSInterpolation => {
   const treeCls = `.${prefixCls}`;
   const treeNodeCls = `${treeCls}-treenode`;
 
@@ -462,7 +459,7 @@ export const genTreeStyle = (
 
   return [
     // Basic
-    genBaseStyle(prefixCls, treeToken, hashId),
+    genBaseStyle(prefixCls, treeToken),
     // Directory
     genDirectoryStyle(treeToken),
     treeNodeFX,
@@ -470,7 +467,7 @@ export const genTreeStyle = (
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Tree', (token, { prefixCls, hashId }) => [
-  getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
-  genTreeStyle(prefixCls, token, hashId),
+export default genComponentStyleHook('Tree', (token, { prefixCls }) => [
+  getCheckboxStyle(`${prefixCls}-checkbox`, token),
+  genTreeStyle(prefixCls, token),
 ]);
diff --git a/package.json b/package.json
index 155ff4d9c9..611cbee8ab 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
-    "@ant-design/cssinjs": "^0.0.0-alpha.27",
+    "@ant-design/cssinjs": "^0.0.0-alpha.29",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/react-slick": "~0.28.1",
     "@babel/runtime": "^7.12.5",