diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts
index c35e2dd022..f327c3a313 100644
--- a/components/carousel/style/index.ts
+++ b/components/carousel/style/index.ts
@@ -233,10 +233,10 @@ const genDotsStyle: GenerateStyle<CarouselToken> = (token) => {
 
   const animation = new Keyframes(`${token.prefixCls}-dot-animation`, {
     from: {
-      transform: `translate3d(-100%, 0, 0)`,
+      width: 0,
     },
     to: {
-      transform: `translate3d(0%, 0, 0)`,
+      width: token.dotActiveWidth,
     },
   });
 
@@ -284,7 +284,7 @@ const genDotsStyle: GenerateStyle<CarouselToken> = (token) => {
             position: 'absolute',
             top: 0,
             insetInlineStart: 0,
-            width: '100%',
+            width: 0,
             height: dotHeight,
             content: '""',
             background: 'transparent',