diff --git a/packages/@vuepress/theme-default/src/client/styles/badge.scss b/packages/@vuepress/theme-default/src/client/styles/badge.scss
index 01fa9c4a47..69c790d61a 100644
--- a/packages/@vuepress/theme-default/src/client/styles/badge.scss
+++ b/packages/@vuepress/theme-default/src/client/styles/badge.scss
@@ -7,9 +7,7 @@
   padding: 0 6px;
   color: var(--c-bg);
   vertical-align: top;
-  transition:
-    background-color ease 0.3s,
-    color ease 0.3s;
+  transition: color var(--t-color), background-color var(--t-color);
 
   &.tip {
     background-color: var(--c-badge-tip);
diff --git a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss
index 65c9d02312..7f6e4bcf5e 100644
--- a/packages/@vuepress/theme-default/src/client/styles/custom-container.scss
+++ b/packages/@vuepress/theme-default/src/client/styles/custom-container.scss
@@ -1,8 +1,6 @@
 .custom-container {
-  transition:
-    background-color ease 0.3s,
-    border-color ease 0.3s,
-    color ease 0.3s;
+  transition: color var(--t-color), border-color var(--t-color),
+    background-color var(--t-color);
 
   .custom-container-title {
     font-weight: 600;
diff --git a/packages/@vuepress/theme-default/src/client/styles/home.scss b/packages/@vuepress/theme-default/src/client/styles/home.scss
index 6dbb142a47..b2411a1ee1 100644
--- a/packages/@vuepress/theme-default/src/client/styles/home.scss
+++ b/packages/@vuepress/theme-default/src/client/styles/home.scss
@@ -40,7 +40,7 @@
       border-width: 2px;
       border-style: solid;
       border-radius: 4px;
-      transition: background-color 0.1s ease;
+      transition: background-color var(--t-color);
       box-sizing: border-box;
 
       &:not(:first-child) {
@@ -70,7 +70,7 @@
 
   .features {
     border-top: 1px solid var(--c-border);
-    transition: border-top ease 0.3s;
+    transition: border-color var(--t-color);
     padding: 1.2rem 0;
     margin-top: 2.5rem;
     display: flex;
@@ -103,7 +103,7 @@
     border-top: 1px solid var(--c-border);
     text-align: center;
     color: var(--c-text-lighter);
-    transition: border-top-color 0.3s ease;
+    transition: border-color var(--t-color);
   }
 }
 
diff --git a/packages/@vuepress/theme-default/src/client/styles/layout.scss b/packages/@vuepress/theme-default/src/client/styles/layout.scss
index 91047916cd..0b91abafc1 100644
--- a/packages/@vuepress/theme-default/src/client/styles/layout.scss
+++ b/packages/@vuepress/theme-default/src/client/styles/layout.scss
@@ -16,7 +16,7 @@
   box-sizing: border-box;
   border-bottom: 1px solid var(--c-border);
   background-color: var(--c-bg-navbar);
-  transition: background-color ease 0.3s, border-bottom-color ease 0.3s;
+  transition: background-color var(--t-color), border-color var(--t-color);
 }
 
 .sidebar {
@@ -34,8 +34,8 @@
   scrollbar-width: thin;
   scrollbar-color: var(--c-brand) var(--c-border);
   background-color: var(--c-bg-sidebar);
-  transition: transform ease 0.3s, background-color ease 0.3s,
-    border-right-color ease 0.3s;
+  transition: transform var(--t-transform), background-color var(--t-color),
+    border-color var(--t-color);
   &::-webkit-scrollbar {
     width: 7px;
   }
diff --git a/packages/@vuepress/theme-default/src/client/styles/normalize.scss b/packages/@vuepress/theme-default/src/client/styles/normalize.scss
index 3961ed8c2e..56181ce8cc 100644
--- a/packages/@vuepress/theme-default/src/client/styles/normalize.scss
+++ b/packages/@vuepress/theme-default/src/client/styles/normalize.scss
@@ -3,7 +3,7 @@ body {
   padding: 0;
   margin: 0;
   background-color: var(--c-bg);
-  transition: background-color ease 0.3s;
+  transition: background-color var(--t-color);
 }
 
 html.dark {
@@ -48,7 +48,7 @@ code {
   background-color: var(--c-bg-light);
   border-radius: 3px;
   overflow-wrap: break-word;
-  transition: background-color ease 0.3s, color ease 0.3s;
+  transition: background-color var(--t-color), color var(--t-color);
 }
 
 blockquote {
@@ -94,7 +94,7 @@ h2 {
   font-size: 1.65rem;
   padding-bottom: 0.3rem;
   border-bottom: 1px solid var(--c-border);
-  transition: border-bottom-color 0.3s ease;
+  transition: border-color var(--t-color);
 }
 
 h3 {
diff --git a/packages/@vuepress/theme-default/src/client/styles/page.scss b/packages/@vuepress/theme-default/src/client/styles/page.scss
index 1b202623f1..50bd588a07 100644
--- a/packages/@vuepress/theme-default/src/client/styles/page.scss
+++ b/packages/@vuepress/theme-default/src/client/styles/page.scss
@@ -59,7 +59,7 @@
     min-height: 2rem;
     margin-top: 0;
     border-top: 1px solid var(--c-border);
-    transition: border-top ease 0.3s;
+    transition: border-color var(--t-color);
     padding-top: 1rem;
     overflow: auto;
   }
diff --git a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss
index 7aa1e99b71..6140569f05 100644
--- a/packages/@vuepress/theme-default/src/client/styles/sidebar.scss
+++ b/packages/@vuepress/theme-default/src/client/styles/sidebar.scss
@@ -14,7 +14,7 @@
   .navbar-links {
     display: none;
     border-bottom: 1px solid var(--c-border);
-    transition: border-bottom-color ease 0.3s;
+    transition: border-color var(--t-color);
     padding: 0.5rem 0 0.75rem 0;
 
     a {
diff --git a/packages/@vuepress/theme-default/src/client/styles/vars.scss b/packages/@vuepress/theme-default/src/client/styles/vars.scss
index 2339797cb9..856f1722ce 100644
--- a/packages/@vuepress/theme-default/src/client/styles/vars.scss
+++ b/packages/@vuepress/theme-default/src/client/styles/vars.scss
@@ -46,6 +46,10 @@
   --c-badge-warning: var(--c-warning);
   --c-badge-danger: var(--c-danger);
 
+  // transition vars
+  --t-color: 0.3s ease;
+  --t-transform: 0.3s ease;
+
   // code blocks vars
   --code-bg-color: #282c34;
   --code-hl-bg-color: rgba(0, 0, 0, 0.66);