diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index 68f588e5e2..8073c6bf5f 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -42,12 +42,12 @@
   }
 
   &-horizontal &-submenu {
-    transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out;
+    transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out;
   }
   &-submenu,
   &-submenu-inline {
-    transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out,
-      padding 0.15s ease-in-out;
+    transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
+      padding 0.15s @ease-in-out;
   }
 
   &-submenu-selected {
@@ -61,7 +61,7 @@
 
   &-submenu &-sub {
     cursor: initial;
-    transition: background 0.3s ease-in-out, padding 0.3s ease-in-out;
+    transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
   }
 
   &-item a {
@@ -173,7 +173,8 @@
 
   &-horizontal &-item,
   &-horizontal &-submenu-title {
-    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background 0.3s ease-in-out;
+    transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
+      background 0.3s @ease-in-out;
   }
 
   &-item,
@@ -184,16 +185,16 @@
     padding: @menu-item-padding;
     white-space: nowrap;
     cursor: pointer;
-    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background 0.3s ease-in-out,
-      padding 0.15s ease-in-out;
+    transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
+      background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
     .@{iconfont-css-prefix} {
       min-width: 14px;
       margin-right: @menu-icon-margin-right;
       font-size: @menu-icon-size;
-      transition: font-size 0.15s ease-out, margin 0.3s ease-in-out, color 0.3s ease-in-out;
+      transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out, color 0.3s @ease-in-out;
       + span {
         opacity: 1;
-        transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, color 0.3s ease-in-out;
+        transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out, color 0.3s @ease-in-out;
       }
     }
 
@@ -246,7 +247,7 @@
       background-color: @menu-bg;
       border-radius: @border-radius-base;
       &-submenu-title::after {
-        transition: transform 0.3s ease-in-out;
+        transition: transform 0.3s @ease-in-out;
       }
     }
 
@@ -262,7 +263,7 @@
       width: 10px;
       color: @menu-item-color;
       transform: translateY(-50%);
-      transition: transform 0.3s ease-in-out;
+      transition: transform 0.3s @ease-in-out;
     }
 
     &-arrow {
@@ -273,8 +274,8 @@
         height: 1.5px;
         background-color: currentColor;
         border-radius: 2px;
-        transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, top 0.3s ease-in-out,
-          color 0.3s ease-in-out;
+        transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out, top 0.3s @ease-in-out,
+          color 0.3s @ease-in-out;
         content: '';
       }
       &::before {
@@ -396,7 +397,7 @@
         border-right: @menu-item-active-border-width solid @menu-highlight-color;
         transform: scaleY(0.0001);
         opacity: 0;
-        transition: transform 0.15s ease-out, opacity 0.15s ease-out;
+        transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
         content: '';
       }
     }
@@ -441,7 +442,7 @@
       &::after {
         transform: scaleY(1);
         opacity: 1;
-        transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
+        transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
       }
     }