diff --git a/packages/theme-chalk/src/breadcrumb.scss b/packages/theme-chalk/src/breadcrumb.scss
index 9c80299211..615df7ac84 100644
--- a/packages/theme-chalk/src/breadcrumb.scss
+++ b/packages/theme-chalk/src/breadcrumb.scss
@@ -28,7 +28,7 @@
       & a {
         font-weight: bold;
         text-decoration: none;
-        transition: var(--el-color-transition-base);
+        transition: var(--el-transition-color);
         color: var(--el-text-color-primary);
 
         &:hover {
diff --git a/packages/theme-chalk/src/check-tag.scss b/packages/theme-chalk/src/check-tag.scss
index 9972452e48..69dec399c8 100644
--- a/packages/theme-chalk/src/check-tag.scss
+++ b/packages/theme-chalk/src/check-tag.scss
@@ -12,7 +12,7 @@
   font-size: var(--el-font-size-base);
   line-height: var(--el-font-size-base);
   padding: 7px 15px;
-  transition: var(--el-all-transition);
+  transition: var(--el-transition-all);
   font-weight: bold;
   &:hover {
     background-color: rgb(220, 223, 230);
diff --git a/packages/theme-chalk/src/checkbox-button.scss b/packages/theme-chalk/src/checkbox-button.scss
index 35a7fa91f8..922a0492d6 100644
--- a/packages/theme-chalk/src/checkbox-button.scss
+++ b/packages/theme-chalk/src/checkbox-button.scss
@@ -37,7 +37,7 @@
     outline: none;
     margin: 0;
     position: relative;
-    transition: var(--el-all-transition);
+    transition: var(--el-transition-all);
     @include utils-user-select(none);
 
     @include button-size(
diff --git a/packages/theme-chalk/src/common/transition.scss b/packages/theme-chalk/src/common/transition.scss
index c54227d74b..69be9a86e7 100644
--- a/packages/theme-chalk/src/common/transition.scss
+++ b/packages/theme-chalk/src/common/transition.scss
@@ -3,7 +3,7 @@
 
 .fade-in-linear-enter-active,
 .fade-in-linear-leave-active {
-  transition: var(--el-fade-linear-transition);
+  transition: var(--el-transition-fade-linear);
 }
 
 .fade-in-linear-enter-from,
@@ -13,7 +13,7 @@
 
 .#{$namespace}-fade-in-linear-enter-active,
 .#{$namespace}-fade-in-linear-leave-active {
-  transition: var(--el-fade-linear-transition);
+  transition: var(--el-transition-fade-linear);
 }
 .#{$namespace}-fade-in-linear-enter-from,
 .#{$namespace}-fade-in-linear-leave-to {
@@ -43,7 +43,7 @@
 .#{$namespace}-zoom-in-top-leave-active {
   opacity: 1;
   transform: scaleY(1);
-  transition: var(--el-md-fade-transition);
+  transition: var(--el-transition-md-fade);
   transform-origin: center top;
 
   &[data-popper-placement^='top'] {
@@ -60,7 +60,7 @@
 .#{$namespace}-zoom-in-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
-  transition: var(--el-md-fade-transition);
+  transition: var(--el-transition-md-fade);
   transform-origin: center bottom;
 }
 .#{$namespace}-zoom-in-bottom-enter-from,
@@ -73,7 +73,7 @@
 .#{$namespace}-zoom-in-left-leave-active {
   opacity: 1;
   transform: scale(1, 1);
-  transition: var(--el-md-fade-transition);
+  transition: var(--el-transition-md-fade);
   transform-origin: top left;
 }
 .#{$namespace}-zoom-in-left-enter-from,
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index f248f04afb..4a4bd6c033 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1128,6 +1128,47 @@ $--result: map.merge(
   $--result
 );
 
+// transition
+$--transition: () !default;
+$--transition: map.merge(
+  (
+    'all': all var(--el-transition-duration)
+      var(--el-transition-function-ease-in-out-bezier),
+    'fade': opacity var(--el-transition-duration)
+      var(--el-transition-function-fast-bezier),
+    'md-fade': (
+      transform var(--el-transition-duration)
+        var(--el-transition-function-fast-bezier),
+      opacity var(--el-transition-duration)
+        var(--el-transition-function-fast-bezier),
+    ),
+    'fade-linear': opacity var(--el-transition-duration-fast) linear,
+    'border': border-color var(--el-transition-duration-fast)
+      var(--el-transition-function-ease-in-out-bezier),
+    'color': color var(--el-transition-duration-fast)
+      var(--el-transition-function-ease-in-out-bezier),
+  ),
+  $--transition
+);
+
+$--transition-duration: () !default;
+$--transition-duration: map.merge(
+  (
+    'default': 0.3s,
+    'fast': 0.2s,
+  ),
+  $--transition-duration
+);
+
+$--transition-function: () !default;
+$--transition-function: map.merge(
+  (
+    'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1),
+    'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1),
+  ),
+  $--transition-function
+);
+
 // header
 $--header: () !default;
 $--header: map.merge(
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 61356f7857..d3ca6a3f1f 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -34,7 +34,7 @@
       --el-input-border-radius,
       map.get($--input, 'border-radius')
     );
-    transition: var(--el-border-transition-base);
+    transition: var(--el-transition-border);
 
     &::placeholder {
       color: var(
@@ -107,7 +107,7 @@
     color: var(--el-input-icon-color);
     font-size: map.get($--input-font-size, 'default');
     cursor: pointer;
-    transition: var(--el-color-transition-base);
+    transition: var(--el-transition-color);
 
     &:hover {
       color: var(--el-input-clear-hover-color);
@@ -149,7 +149,7 @@
     line-height: map.get($--input-height, 'default');
     outline: none;
     padding: 0 15px;
-    transition: var(--el-border-transition-base);
+    transition: var(--el-transition-border);
     width: 100%;
 
     &::placeholder {
diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss
index 3a5e89eaec..8beca4e756 100644
--- a/packages/theme-chalk/src/radio-button.scss
+++ b/packages/theme-chalk/src/radio-button.scss
@@ -41,7 +41,7 @@
     margin: 0;
     position: relative;
     cursor: pointer;
-    transition: var(--el-all-transition);
+    transition: var(--el-transition-all);
 
     @include button-size(
       map.get($--button-padding-vertical, 'default'),
diff --git a/packages/theme-chalk/src/select-v2.scss b/packages/theme-chalk/src/select-v2.scss
index dec2f78e34..b2d5ff829a 100644
--- a/packages/theme-chalk/src/select-v2.scss
+++ b/packages/theme-chalk/src/select-v2.scss
@@ -215,7 +215,7 @@ $--input-inline-start: 7px !default;
       transform: rotateZ(180deg);
       border-radius: var(--el-border-radius-circle);
       color: var(--el-select-input-color);
-      transition: var(--el-color-transition-base);
+      transition: var(--el-transition-color);
 
       &:hover {
         color: (--el-select-close-hover-color);
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index aeafb72e98..75bc20c44a 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -81,7 +81,7 @@
         transform: rotateZ(180deg);
         border-radius: var(--el-border-radius-circle);
         color: var(--el-select-input-color);
-        transition: var(--el-color-transition-base);
+        transition: var(--el-transition-color);
 
         &:hover {
           color: var(--el-select-close-hover-color);
diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss
index dba0fc30c8..55ae92e182 100644
--- a/packages/theme-chalk/src/slider.scss
+++ b/packages/theme-chalk/src/slider.scss
@@ -213,7 +213,7 @@
           border: var(--el-input-border, map.get($--input, 'border'));
           line-height: 20px;
           box-sizing: border-box;
-          transition: var(--el-border-transition-base);
+          transition: var(--el-transition-border);
         }
         .#{$namespace}-input-number__decrease {
           width: 18px;
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index a8a60f6963..e610b017a6 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -548,7 +548,7 @@
       font-size: 14px;
       cursor: pointer;
       vertical-align: middle;
-      transition: var(--el-md-fade-transition);
+      transition: var(--el-transition-md-fade);
       margin-top: 60px;
 
       i {
diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss
index 475450a674..c72e31062c 100644
--- a/packages/theme-chalk/src/var.scss
+++ b/packages/theme-chalk/src/var.scss
@@ -85,21 +85,9 @@
 -------------------------- */
   // refer to this website to get the bezier motion function detail
   //  https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
-  --el-transition-duration: 0.3s;
-  --el-transition-duration-fast: 0.2s;
-  --el-ease-in-out-bezier-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --el-fast-bezier-transition: cubic-bezier(0.23, 1, 0.32, 1);
+  --el-transition-duration: #{map.get($--transition-duration, 'default')};
+  --el-transition-duration-fast: #{map.get($--transition-duration, 'fast')};
 
-  --el-all-transition: all var(--el-transition-duration)
-    var(--el-ease-in-out-bezier-function);
-  --el-fade-transition: opacity var(--el-transition-duration)
-    var(--el-fast-bezier-transition);
-  --el-md-fade-transition: transform var(--el-transition-duration)
-      var(--el-fast-bezier-transition),
-    opacity var(--el-transition-duration) var(--el-fast-bezier-transition);
-  --el-fade-linear-transition: opacity var(--el-transition-duration-fast) linear;
-  --el-border-transition-base: border-color var(--el-transition-duration-fast)
-    var(--el-ease-in-out-bezier-function);
-  --el-color-transition-base: color var(--el-transition-duration-fast)
-    var(--el-ease-in-out-bezier-function);
+  @include set-component-css-var('transition-function', $--transition-function);
+  @include set-component-css-var('transition', $--transition);
 }