diff --git a/components-diy/diy-tab.vue b/components-diy/diy-tab.vue
index 60064b8..94ba6af 100644
--- a/components-diy/diy-tab.vue
+++ b/components-diy/diy-tab.vue
@@ -302,6 +302,12 @@ export default {
                 borderRadius: 4
             };
 
+            // 动画配置
+            const animationConfig = {
+                animationDuration: 0.3,
+                animationTimingFunction: 'ease-in-out'
+            };
+
             // 导航栏边框样式
             const navBorderConfig = {
                 showNavBorder: true,
@@ -339,6 +345,7 @@ export default {
                 ...contentConfig,
                 ...borderConfig,
                 ...navBorderConfig,
+                ...animationConfig,
                 ...customStylesConfig
             };
 
@@ -377,6 +384,12 @@ export default {
             style['--card-active-hover-bg-color'] = this.mergedValue.cardActiveHoverBgColor || '#228be6';
             style['--card-active-hover-text-color'] = this.mergedValue.cardActiveHoverTextColor || '#ffffff';
 
+            // 应用动画配置
+            if (this.mergedValue.animation) {
+                style['--animation-duration'] = (this.mergedValue.animationDuration || 0.3) + 's';
+                style['--animation-timing-function'] = this.mergedValue.animationTimingFunction || 'ease-in-out';
+            }
+
             return style;
         },
 
@@ -1041,7 +1054,7 @@ export default {
 
     // 悬停动画效果
     &.hover-animation {
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: all var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
 
         &:hover {
             color: var(--hover-color, #3b82f6);
@@ -1073,7 +1086,7 @@ export default {
 .tab-indicator {
     position: absolute;
     background-color: var(--indicator-color, #339af0);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
     will-change: left, right, top, bottom, width, height;
     bottom: 0;
     left: 16px;
@@ -1109,7 +1122,7 @@ export default {
     display: none;
     opacity: 0;
     transform: translateY(8px);
-    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: opacity var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out), transform var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
     height: 100%;
     box-sizing: border-box;
     width: 100%;
@@ -1120,7 +1133,7 @@ export default {
         display: block;
         opacity: 1;
         transform: translateY(0);
-        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: opacity var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out), transform var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
     }
 
     // 减少动画效果
@@ -1184,7 +1197,7 @@ export default {
     padding: 8px 16px;
 
     &.hover-animation {
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: all var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
 
         &:hover {
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
@@ -1225,7 +1238,7 @@ export default {
     color: var(--card-text-color, #6c757d);
 
     &.hover-animation {
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: all var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
 
         &:hover {
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);