diff --git a/tools/helper/src/client/styles/transition/fade-in-down.scss b/tools/helper/src/client/styles/transition/fade-in-down.scss
index ef477c624d..8479b2e138 100644
--- a/tools/helper/src/client/styles/transition/fade-in-down.scss
+++ b/tools/helper/src/client/styles/transition/fade-in-down.scss
@@ -17,10 +17,15 @@
     transform: translateY(0);
   }
 
-  &-leave-active,
+  &-leave-active {
+    transition:
+      opacity var(--transition-leave-duration) var(--transition-ease-in-out),
+      transform var(--transition-leave-duration) var(--transition-ease-in-out) !important;
+  }
+
   &-enter-active {
     transition:
-      opacity var(--transition-duration) var(--transition-ease-in-out),
-      transform var(--transition-duration) var(--transition-ease-in-out);
+      opacity var(--transition-enter-duration) var(--transition-ease-in-out),
+      transform var(--transition-enter-duration) var(--transition-ease-in-out) !important;
   }
 }
diff --git a/tools/helper/src/client/styles/transition/fade-in-height-expand.scss b/tools/helper/src/client/styles/transition/fade-in-height-expand.scss
index b4327fe940..023361c370 100644
--- a/tools/helper/src/client/styles/transition/fade-in-height-expand.scss
+++ b/tools/helper/src/client/styles/transition/fade-in-height-expand.scss
@@ -13,28 +13,32 @@
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 
-    opacity: 0;
+    opacity: 0 !important;
   }
 
   &-leave-active {
     overflow: hidden;
     transition:
-      max-height var(--transition-duration) var(--transition-ease-in-out),
-      opacity var(--transition-duration) var(--transition-ease-out),
-      margin-top var(--transition-duration) var(--transition-ease-in-out),
-      margin-bottom var(--transition-duration) var(--transition-ease-in-out),
-      padding-top var(--transition-duration) var(--transition-ease-in-out),
-      padding-bottom var(--transition-duration) var(--transition-ease-in-out);
+      max-height var(--transition-slow-duration) var(--transition-ease-in-out),
+      opacity var(--transition-leave-duration) var(--transition-ease-out),
+      margin-top var(--transition-slow-duration) var(--transition-ease-in-out),
+      margin-bottom var(--transition-slow-duration)
+        var(--transition-ease-in-out),
+      padding-top var(--transition-slow-duration) var(--transition-ease-in-out),
+      padding-bottom var(--transition-slow-duration)
+        var(--transition-ease-in-out) !important;
   }
 
   &-enter-active {
     overflow: hidden;
     transition:
-      max-height var(--transition-duration) var(--transition-ease-in-out),
-      opacity var(--transition-duration) var(--transition-ease-in),
-      margin-top var(--transition-duration) var(--transition-ease-in-out),
-      margin-bottom var(--transition-duration) var(--transition-ease-in-out),
-      padding-top var(--transition-duration) var(--transition-ease-in-out),
-      padding-bottom var(--transition-duration) var(--transition-ease-in-out);
+      max-height var(--transition-slow-duration) var(--transition-ease-in-out),
+      opacity var(--transition-enter-duration) var(--transition-ease-in),
+      margin-top var(--transition-slow-duration) var(--transition-ease-in-out),
+      margin-bottom var(--transition-slow-duration)
+        var(--transition-ease-in-out),
+      padding-top var(--transition-slow-duration) var(--transition-ease-in-out),
+      padding-bottom var(--transition-slow-duration)
+        var(--transition-ease-in-out) !important;
   }
 }
diff --git a/tools/helper/src/client/styles/transition/fade-in-left.scss b/tools/helper/src/client/styles/transition/fade-in-left.scss
index b962170c48..213c32d66e 100644
--- a/tools/helper/src/client/styles/transition/fade-in-left.scss
+++ b/tools/helper/src/client/styles/transition/fade-in-left.scss
@@ -17,10 +17,15 @@
     transform: translateX(0);
   }
 
-  &-leave-active,
+  &-leave-active {
+    transition:
+      opacity var(--transition-leave-duration) var(--transition-ease-in-out),
+      transform var(--transition-leave-duration) var(--transition-ease-in-out) !important;
+  }
+
   &-enter-active {
     transition:
-      opacity var(--transition-duration) var(--transition-ease-in-out),
-      transform var(--transition-duration) var(--transition-ease-in-out);
+      opacity var(--transition-enter-duration) var(--transition-ease-in-out),
+      transform var(--transition-enter-duration) var(--transition-ease-in-out) !important;
   }
 }
diff --git a/tools/helper/src/client/styles/transition/fade-in-right.scss b/tools/helper/src/client/styles/transition/fade-in-right.scss
index edde3fa473..05af0401cc 100644
--- a/tools/helper/src/client/styles/transition/fade-in-right.scss
+++ b/tools/helper/src/client/styles/transition/fade-in-right.scss
@@ -17,10 +17,15 @@
     transform: translateX(0);
   }
 
-  &-leave-active,
+  &-leave-active {
+    transition:
+      opacity var(--transition-leave-duration) var(--transition-ease-in-out),
+      transform var(--transition-leave-duration) var(--transition-ease-in-out) !important;
+  }
+
   &-enter-active {
     transition:
-      opacity var(--transition-duration) var(--transition-ease-in-out),
-      transform var(--transition-duration) var(--transition-ease-in-out);
+      opacity var(--transition-enter-duration) var(--transition-ease-in-out),
+      transform var(--transition-enter-duration) var(--transition-ease-in-out) !important;
   }
 }
diff --git a/tools/helper/src/client/styles/transition/fade-in-scale-up.scss b/tools/helper/src/client/styles/transition/fade-in-scale-up.scss
index 8deff2fdce..a38ccab490 100644
--- a/tools/helper/src/client/styles/transition/fade-in-scale-up.scss
+++ b/tools/helper/src/client/styles/transition/fade-in-scale-up.scss
@@ -2,7 +2,7 @@
 
 :root {
   --transition-fade-in-scale-up-scale: 0.9;
-  --transition-fade-in-scale-up-duration: 0.2s;
+  --transition-fade-in-scale-up-duration: var(--transition-duration);
   --transition-fade-in-scale-up-origin: inherit;
 }
 
@@ -12,7 +12,7 @@
       opacity var(--transition-fade-in-scale-up-duration)
         var(--transition-ease-in),
       transform var(--transition-fade-in-scale-up-duration)
-        var(--transition-ease-in);
+        var(--transition-ease-in) !important;
     transform-origin: var(--transition-fade-in-scale-up-origin);
   }
 
@@ -21,7 +21,7 @@
       opacity var(--transition-fade-in-scale-up-duration)
         var(--transition-ease-out),
       transform var(--transition-fade-in-scale-up-duration)
-        var(--transition-ease-out);
+        var(--transition-ease-out) !important;
     transform-origin: var(--transition-fade-in-scale-up-origin);
   }
 
diff --git a/tools/helper/src/client/styles/transition/fade-in-up.scss b/tools/helper/src/client/styles/transition/fade-in-up.scss
index 85e829d828..a28d76a7f4 100644
--- a/tools/helper/src/client/styles/transition/fade-in-up.scss
+++ b/tools/helper/src/client/styles/transition/fade-in-up.scss
@@ -17,10 +17,15 @@
     transform: translateY(0);
   }
 
-  &-leave-active,
+  &-leave-active {
+    transition:
+      opacity var(--transition-leave-duration) var(--transition-ease-in-out),
+      transform var(--transition-leave-duration) var(--transition-ease-in-out) !important;
+  }
+
   &-enter-active {
     transition:
-      opacity var(--transition-duration) var(--transition-ease-in-out),
-      transform var(--transition-duration) var(--transition-ease-in-out);
+      opacity var(--transition-enter-duration) var(--transition-ease-in-out),
+      transform var(--transition-enter-duration) var(--transition-ease-in-out) !important;
   }
 }
diff --git a/tools/helper/src/client/styles/transition/fade-in-width-expand.scss b/tools/helper/src/client/styles/transition/fade-in-width-expand.scss
index 70c2fdca5e..1f0e1552fa 100644
--- a/tools/helper/src/client/styles/transition/fade-in-width-expand.scss
+++ b/tools/helper/src/client/styles/transition/fade-in-width-expand.scss
@@ -16,22 +16,23 @@
   &-leave-active {
     overflow: hidden;
     transition:
-      max-width var(--transition-duration) var(--transition-ease-in-out)
-        var(--transition-delay),
-      opacity var(--transition-duration) var(--transition-ease-in-out),
-      margin-right var(--transition-duration) var(--transition-ease-in-out)
+      max-width var(--transition-leave-duration) var(--transition-ease-in-out)
         var(--transition-delay),
+      opacity var(--transition-leave-duration) var(--transition-ease-in-out),
+      margin-right var(--transition-leave-duration)
+        var(--transition-ease-in-out) var(--transition-delay),
       margin-left var(--transition-duration) var(--transition-ease-in-out)
-        var(--transition-delay);
+        var(--transition-delay) !important;
   }
 
   &-enter-active {
     overflow: hidden;
     transition:
-      max-width var(--transition-duration) var(--transition-ease-in-out),
-      opacity var(--transition-duration) var(--transition-ease-in-out)
+      max-width var(--transition-enter-duration) var(--transition-ease-in-out),
+      opacity var(--transition-leave-duration) var(--transition-ease-in-out)
         var(--transition-delay),
-      margin-right var(--transition-duration) var(--transition-ease-in-out),
-      margin-left var(--transition-duration) var(--transition-ease-in-out);
+      margin-right var(--transition-enter-duration)
+        var(--transition-ease-in-out),
+      margin-left var(--transition-enter-duration) var(--transition-ease-in-out) !important;
   }
 }
diff --git a/tools/helper/src/client/styles/transition/slide-in-down.scss b/tools/helper/src/client/styles/transition/slide-in-down.scss
index e4e583b300..df33d1d6ed 100644
--- a/tools/helper/src/client/styles/transition/slide-in-down.scss
+++ b/tools/helper/src/client/styles/transition/slide-in-down.scss
@@ -7,12 +7,12 @@
 .slide-in-down {
   &-leave-active {
     transition: transform var(--transition-leave-duration)
-      var(--transition-ease-in);
+      var(--transition-ease-in) !important;
   }
 
   &-enter-active {
     transition: transform var(--transition-enter-duration)
-      var(--transition-ease-out);
+      var(--transition-ease-out) !important;
   }
 
   &-enter-to,
diff --git a/tools/helper/src/client/styles/transition/slide-in-left.scss b/tools/helper/src/client/styles/transition/slide-in-left.scss
index 6bcf3e8b25..d118b25eb3 100644
--- a/tools/helper/src/client/styles/transition/slide-in-left.scss
+++ b/tools/helper/src/client/styles/transition/slide-in-left.scss
@@ -7,12 +7,12 @@
 .slide-in-left {
   &-leave-active {
     transition: transform var(--transition-leave-duration)
-      var(--transition-ease-in);
+      var(--transition-ease-in) !important;
   }
 
   &-enter-active {
     transition: transform var(--transition-enter-duration)
-      var(--transition-ease-out);
+      var(--transition-ease-out) !important;
   }
 
   &-enter-to,
diff --git a/tools/helper/src/client/styles/transition/slide-in-right.scss b/tools/helper/src/client/styles/transition/slide-in-right.scss
index c0cfc6b474..6adf660a1e 100644
--- a/tools/helper/src/client/styles/transition/slide-in-right.scss
+++ b/tools/helper/src/client/styles/transition/slide-in-right.scss
@@ -7,12 +7,12 @@
 .slide-in-right {
   &-leave-active {
     transition: transform var(--transition-leave-duration)
-      var(--transition-ease-in);
+      var(--transition-ease-in) !important;
   }
 
   &-enter-active {
     transition: transform var(--transition-enter-duration)
-      var(--transition-ease-out);
+      var(--transition-ease-out) !important;
   }
 
   &-enter-to,
diff --git a/tools/helper/src/client/styles/transition/slide-in-up.scss b/tools/helper/src/client/styles/transition/slide-in-up.scss
index b9e90d9124..0da20ee975 100644
--- a/tools/helper/src/client/styles/transition/slide-in-up.scss
+++ b/tools/helper/src/client/styles/transition/slide-in-up.scss
@@ -7,12 +7,12 @@
 .slide-in-up {
   &-leave-active {
     transition: transform var(--transition-leave-duration)
-      var(--transition-ease-in);
+      var(--transition-ease-in) !important;
   }
 
   &-enter-active {
     transition: transform var(--transition-enter-duration)
-      var(--transition-ease-out);
+      var(--transition-ease-out) !important;
   }
 
   &-enter-to,
diff --git a/tools/helper/src/client/styles/transition/vars.scss b/tools/helper/src/client/styles/transition/vars.scss
index 7c9c9bb696..ce6a7a3d87 100644
--- a/tools/helper/src/client/styles/transition/vars.scss
+++ b/tools/helper/src/client/styles/transition/vars.scss
@@ -2,8 +2,9 @@
   --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --transition-ease-out: cubic-bezier(0, 0, 0.2, 1);
   --transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --transition-duration: 0.3s;
+  --transition-duration: 0.2s;
+  --transition-slow-duration: 0.3s;
   --transition-enter-duration: var(--transition-duration);
-  --transition-leave-duration: 0.2s;
+  --transition-leave-duration: var(--transition-duration);
   --transition-delay: 0.1s;
 }