diff --git a/.gitignore b/.gitignore
index 4b14327..0bba155 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ lib
 es
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 coverage/
 .doc
 
diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
index 8127183..550b20a 100644
--- a/docs/examples/basic.tsx
+++ b/docs/examples/basic.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from 'rc-motion';
 import React from 'react';
 import './basic.less';
@@ -164,7 +164,7 @@ class App extends React.Component<{}, DemoState> {
               {({ style, className }, ref) => (
                 <Div
                   ref={ref}
-                  className={classNames('demo-block', className)}
+                  className={clsx('demo-block', className)}
                   style={style}
                 />
               )}
@@ -182,10 +182,7 @@ class App extends React.Component<{}, DemoState> {
               onLeaveActive={this.styleGreen}
             >
               {({ style, className }) => (
-                <div
-                  className={classNames('demo-block', className)}
-                  style={style}
-                />
+                <div className={clsx('demo-block', className)} style={style} />
               )}
             </CSSMotion>
           </div>
@@ -209,7 +206,7 @@ class App extends React.Component<{}, DemoState> {
               >
                 {({ style, className }) => (
                   <div
-                    className={classNames('demo-block', className)}
+                    className={clsx('demo-block', className)}
                     style={style}
                   />
                 )}
diff --git a/docs/examples/deadline.tsx b/docs/examples/deadline.tsx
index 00680b5..78cf7a3 100644
--- a/docs/examples/deadline.tsx
+++ b/docs/examples/deadline.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from 'rc-motion';
 import React from 'react';
 import './basic.less';
@@ -52,7 +52,7 @@ class App extends React.Component<{}, DemoState> {
               {({ style, className }, ref) => (
                 <div
                   ref={ref}
-                  className={classNames('demo-block', className)}
+                  className={clsx('demo-block', className)}
                   style={style}
                 />
               )}
diff --git a/docs/examples/list.tsx b/docs/examples/list.tsx
index 78564af..9c2c983 100644
--- a/docs/examples/list.tsx
+++ b/docs/examples/list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { CSSMotionList } from 'rc-motion';
 import React from 'react';
 import './list.less';
@@ -104,11 +104,8 @@ class App extends React.Component<{}, DemoState> {
           {({ key, background, className, style }) => {
             return (
               <div
-                className={classNames('list-demo-block', className)}
-                style={{
-                  ...style,
-                  background,
-                }}
+                className={clsx('list-demo-block', className)}
+                style={{ ...style, background }}
               >
                 <span>{key}</span>
               </div>
diff --git a/docs/examples/provider.tsx b/docs/examples/provider.tsx
index fbe3c30..30c86a5 100644
--- a/docs/examples/provider.tsx
+++ b/docs/examples/provider.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion, { Provider } from 'rc-motion';
 import React from 'react';
 import './basic.less';
@@ -38,7 +38,7 @@ export default () => {
           <>
             <div
               ref={ref}
-              className={classNames('demo-block', className)}
+              className={clsx('demo-block', className)}
               style={style}
             />
             <ul>
diff --git a/docs/examples/ssr.tsx b/docs/examples/ssr.tsx
index a5243bc..f763a7b 100644
--- a/docs/examples/ssr.tsx
+++ b/docs/examples/ssr.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from 'rc-motion';
 import { genCSSMotion } from 'rc-motion/es/CSSMotion';
 import React from 'react';
@@ -27,7 +27,7 @@ const MotionAppear = ({ supportMotion }: MotionAppearProps) => {
       {({ style, className }, ref) => (
         <div
           ref={ref}
-          className={classNames('demo-block', className)}
+          className={clsx('demo-block', className)}
           style={style}
         />
       )}
diff --git a/package.json b/package.json
index 3b8a01b..3820b9a 100644
--- a/package.json
+++ b/package.json
@@ -48,15 +48,15 @@
   },
   "dependencies": {
     "@rc-component/util": "^1.2.0",
-    "classnames": "^2.2.1"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
     "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^15.0.7",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^26.0.8",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^2.0.8",
@@ -77,6 +77,9 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
+  "resolutions": {
+    "@types/minimatch": "5.1.2"
+  },
   "cnpm": {
     "mode": "npm"
   },
diff --git a/src/CSSMotion.tsx b/src/CSSMotion.tsx
index 07745fd..fc16278 100644
--- a/src/CSSMotion.tsx
+++ b/src/CSSMotion.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
 import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 import { getNodeRef, supportRef } from '@rc-component/util/lib/ref';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { useRef } from 'react';
 import { Context } from './context';
@@ -228,7 +228,7 @@ export function genCSSMotion(config: CSSMotionConfig) {
         motionChildren = children(
           {
             ...mergedProps,
-            className: classNames(getTransitionName(motionName, status), {
+            className: clsx(getTransitionName(motionName, status), {
               [motionCls]: motionCls && statusSuffix,
               [motionName as string]: typeof motionName === 'string',
             }),
diff --git a/tests/CSSMotion.spec.tsx b/tests/CSSMotion.spec.tsx
index 570a2ba..d455ad9 100644
--- a/tests/CSSMotion.spec.tsx
+++ b/tests/CSSMotion.spec.tsx
@@ -3,7 +3,7 @@
   react/prefer-stateless-function, react/no-multi-comp
 */
 import { act, fireEvent, render } from '@testing-library/react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import type { CSSMotionProps } from '../src';
@@ -94,7 +94,7 @@ describe('CSSMotion', () => {
                 return (
                   <div
                     style={style}
-                    className={classNames('motion-box', className)}
+                    className={clsx('motion-box', className)}
                   />
                 );
               }}
@@ -173,10 +173,7 @@ describe('CSSMotion', () => {
           >
             {({ style, className }) => {
               return (
-                <div
-                  style={style}
-                  className={classNames('motion-box', className)}
-                />
+                <div style={style} className={clsx('motion-box', className)} />
               );
             }}
           </CSSMotion>
@@ -219,10 +216,7 @@ describe('CSSMotion', () => {
       const genMotion = (props?: CSSMotionProps) => (
         <CSSMotion motionName="transition" visible {...props}>
           {({ style, className }) => (
-            <div
-              style={style}
-              className={classNames('motion-box', className)}
-            />
+            <div style={style} className={clsx('motion-box', className)} />
           )}
         </CSSMotion>
       );
@@ -248,10 +242,7 @@ describe('CSSMotion', () => {
       const genMotion = (props?: CSSMotionProps) => (
         <CSSMotion motionName="transition" {...props}>
           {({ style, className }) => (
-            <div
-              style={style}
-              className={classNames('motion-box', className)}
-            />
+            <div style={style} className={clsx('motion-box', className)} />
           )}
         </CSSMotion>
       );
@@ -307,7 +298,7 @@ describe('CSSMotion', () => {
                 <Component
                   ref={ref}
                   style={style}
-                  className={classNames('motion-box', className)}
+                  className={clsx('motion-box', className)}
                 />
               )}
             </CSSMotion>,
@@ -362,10 +353,7 @@ describe('CSSMotion', () => {
               motionLeave={true}
             >
               {({ style, className }) => (
-                <div
-                  style={style}
-                  className={classNames('motion-box', className)}
-                />
+                <div style={style} className={clsx('motion-box', className)} />
               )}
             </CSSMotion>
           </React.StrictMode>
@@ -440,10 +428,7 @@ describe('CSSMotion', () => {
           {...props}
         >
           {({ style, className }) => (
-            <div
-              style={style}
-              className={classNames('motion-box', className)}
-            />
+            <div style={style} className={clsx('motion-box', className)} />
           )}
         </CSSMotion>
       );
@@ -481,7 +466,7 @@ describe('CSSMotion', () => {
     const genMotion = (props?: CSSMotionProps) => (
       <CSSMotion visible {...props}>
         {({ style, className }) => (
-          <div style={style} className={classNames('motion-box', className)} />
+          <div style={style} className={clsx('motion-box', className)} />
         )}
       </CSSMotion>
     );
@@ -513,10 +498,7 @@ describe('CSSMotion', () => {
           visible={false}
         >
           {({ style, className }) => (
-            <div
-              style={style}
-              className={classNames('motion-box', className)}
-            />
+            <div style={style} className={clsx('motion-box', className)} />
           )}
         </CSSMotion>,
       );
@@ -547,7 +529,7 @@ describe('CSSMotion', () => {
         onAppearPrepare={() => new Promise(() => {})}
       >
         {({ style, className }) => (
-          <div style={style} className={classNames('motion-box', className)} />
+          <div style={style} className={clsx('motion-box', className)} />
         )}
       </CSSMotion>,
     );
@@ -584,10 +566,7 @@ describe('CSSMotion', () => {
           onAppearStart={onAppearStart}
         >
           {({ style, className }) => (
-            <div
-              style={style}
-              className={classNames('motion-box', className)}
-            />
+            <div style={style} className={clsx('motion-box', className)} />
           )}
         </CSSMotion>
       </Provider>
@@ -617,7 +596,7 @@ describe('CSSMotion', () => {
     const { container } = render(
       <NoCSSTransition motionName="transition">
         {({ style, className }) => (
-          <div style={style} className={classNames('motion-box', className)} />
+          <div style={style} className={clsx('motion-box', className)} />
         )}
       </NoCSSTransition>,
     );
@@ -636,7 +615,7 @@ describe('CSSMotion', () => {
           <div
             ref={ref}
             style={style}
-            className={classNames('motion-box', className)}
+            className={clsx('motion-box', className)}
           />
         )}
       </RefCSSMotion>,
@@ -704,10 +683,7 @@ describe('CSSMotion', () => {
         motionName="bamboo"
       >
         {({ style, className }) => (
-          <Component
-            style={style}
-            className={classNames('motion-box', className)}
-          />
+          <Component style={style} className={clsx('motion-box', className)} />
         )}
       </CSSMotion>
     );
@@ -747,7 +723,7 @@ describe('CSSMotion', () => {
     const { container } = render(
       <CSSMotion visible motionName="bamboo" onAppearPrepare={onAppearPrepare}>
         {({ style, className }) => (
-          <div style={style} className={classNames('motion-box', className)} />
+          <div style={style} className={clsx('motion-box', className)} />
         )}
       </CSSMotion>,
     );
@@ -780,7 +756,7 @@ describe('CSSMotion', () => {
     const genMotion = (props?: CSSMotionProps) => (
       <CSSMotion forceRender motionName="bamboo" visible={false} {...props}>
         {({ style, className }) => (
-          <div style={style} className={classNames('motion-box', className)} />
+          <div style={style} className={clsx('motion-box', className)} />
         )}
       </CSSMotion>
     );
@@ -806,7 +782,7 @@ describe('CSSMotion', () => {
         {...props}
       >
         {({ style, className }) => (
-          <div style={style} className={classNames('motion-box', className)} />
+          <div style={style} className={clsx('motion-box', className)} />
         )}
       </CSSMotion>
     );
@@ -938,10 +914,7 @@ describe('CSSMotion', () => {
           onVisibleChanged={onVisibleChanged}
         >
           {({ style, className }) => (
-            <div
-              style={style}
-              className={classNames('motion-box', className)}
-            />
+            <div style={style} className={clsx('motion-box', className)} />
           )}
         </CSSMotion>,
       );
@@ -964,10 +937,7 @@ describe('CSSMotion', () => {
           onVisibleChanged={onVisibleChanged}
         >
           {({ style, className }) => (
-            <div
-              style={style}
-              className={classNames('motion-box', className)}
-            />
+            <div style={style} className={clsx('motion-box', className)} />
           )}
         </CSSMotion>,
       );
@@ -990,10 +960,7 @@ describe('CSSMotion', () => {
           onVisibleChanged={onVisibleChanged}
         >
           {({ style, className }) => (
-            <div
-              style={style}
-              className={classNames('motion-box', className)}
-            />
+            <div style={style} className={clsx('motion-box', className)} />
           )}
         </CSSMotion>
       );
diff --git a/tests/CSSMotionList.spec.tsx b/tests/CSSMotionList.spec.tsx
index 5df9782..eff199c 100644
--- a/tests/CSSMotionList.spec.tsx
+++ b/tests/CSSMotionList.spec.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-render-return-value, react/prefer-stateless-function,
 react/no-multi-comp, @typescript-eslint/no-implied-eval */
 import { fireEvent, render } from '@testing-library/react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { genCSSMotion } from '../src/CSSMotion';
@@ -37,7 +37,7 @@ describe('CSSMotionList', () => {
             <div
               key={key}
               style={style}
-              className={classNames('motion-box', className)}
+              className={clsx('motion-box', className)}
             >
               {key}
             </div>
@@ -119,7 +119,7 @@ describe('CSSMotionList', () => {
           <div
             key={key}
             style={style}
-            className={classNames('motion-box', className)}
+            className={clsx('motion-box', className)}
           >
             {key}
           </div>
@@ -157,7 +157,7 @@ describe('CSSMotionList', () => {
           <div
             key={key}
             style={style}
-            className={classNames('motion-box', className)}
+            className={clsx('motion-box', className)}
           >
             {index}
           </div>
diff --git a/tests/StrictMode.spec.tsx b/tests/StrictMode.spec.tsx
index 820c0c9..9b82653 100644
--- a/tests/StrictMode.spec.tsx
+++ b/tests/StrictMode.spec.tsx
@@ -3,7 +3,7 @@
   react/prefer-stateless-function, react/no-multi-comp
 */
 import { fireEvent, render } from '@testing-library/react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { genCSSMotion, type CSSMotionRef } from '../src/CSSMotion';
@@ -30,10 +30,7 @@ describe('StrictMode', () => {
         <CSSMotion motionName="transition" ref={ref} motionAppear visible>
           {({ style, className }) => {
             return (
-              <div
-                style={style}
-                className={classNames('motion-box', className)}
-              />
+              <div style={style} className={clsx('motion-box', className)} />
             );
           }}
         </CSSMotion>