diff --git a/components/float-button/style/index.tsx b/components/float-button/style/index.tsx
index 6a82659360..ce82dfdf7b 100644
--- a/components/float-button/style/index.tsx
+++ b/components/float-button/style/index.tsx
@@ -4,6 +4,7 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { initFadeMotion } from '../../style/motion/fade';
 import { resetComponent } from '../../style';
+import { initMotion } from '../../style/motion/motion';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -23,9 +24,8 @@ type FloatButtonToken = FullToken<'FloatButton'> & {
   floatButtonInsetInlineEnd: number;
 };
 
-// ============================== Group ==============================
-const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
-  const { componentCls, floatButtonSize, margin, borderRadius, motionDurationSlow } = token;
+const initFloatButtonGroupMotion = (token: FloatButtonToken) => {
+  const { componentCls, floatButtonSize, motionDurationSlow, motionEaseInOutCirc } = token;
   const groupPrefixCls = `${componentCls}-group`;
   const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
     '0%': {
@@ -53,6 +53,35 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
       opacity: 0,
     },
   });
+
+  return [
+    {
+      [`${groupPrefixCls}-wrap`]: {
+        ...initMotion(`${groupPrefixCls}-wrap`, moveDownIn, moveDownOut, motionDurationSlow, true),
+      },
+    },
+    {
+      [`${groupPrefixCls}-wrap`]: {
+        [`
+          &${groupPrefixCls}-wrap-enter,
+          &${groupPrefixCls}-wrap-appear
+        `]: {
+          opacity: 0,
+          animationTimingFunction: motionEaseInOutCirc,
+        },
+
+        [`&${groupPrefixCls}-wrap-leave`]: {
+          animationTimingFunction: motionEaseInOutCirc,
+        },
+      },
+    },
+  ];
+};
+
+// ============================== Group ==============================
+const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
+  const { componentCls, floatButtonSize, margin, borderRadius } = token;
+  const groupPrefixCls = `${componentCls}-group`;
   return {
     [groupPrefixCls]: {
       ...resetComponent(token),
@@ -135,15 +164,6 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
       },
     },
 
-    [`${groupPrefixCls}-wrap-enter,${groupPrefixCls}-wrap-enter-active`]: {
-      animationName: moveDownIn,
-      animationDuration: motionDurationSlow,
-    },
-    [`${groupPrefixCls}-wrap-leave`]: {
-      animationName: moveDownOut,
-      animationDuration: motionDurationSlow,
-    },
-
     [`${groupPrefixCls}-circle-shadow`]: {
       boxShadow: 'none',
     },
@@ -308,5 +328,6 @@ export default genComponentStyleHook<'FloatButton'>('FloatButton', (token) => {
     floatButtonGroupStyle(floatButtonToken),
     sharedFloatButtonStyle(floatButtonToken),
     initFadeMotion(token),
+    initFloatButtonGroupMotion(floatButtonToken),
   ];
 });