diff --git a/src/assets/layout/_responsive.scss b/src/assets/layout/_responsive.scss
index fc4bdb4..561d5f1 100644
--- a/src/assets/layout/_responsive.scss
+++ b/src/assets/layout/_responsive.scss
@@ -23,6 +23,9 @@
                 border-top-left-radius: 0;
                 border-bottom-left-radius: 0;
                 border-right: 1px solid var(--surface-border);
+                transition:
+                    transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
+                    left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
                 box-shadow:
                     0px 3px 5px rgba(0, 0, 0, 0.02),
                     0px 0px 2px rgba(0, 0, 0, 0.05),
@@ -78,6 +81,9 @@
             height: 100vh;
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
+            transition:
+                transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
+                left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
         }
 
         .layout-mask {
@@ -98,7 +104,6 @@
 
             .layout-mask {
                 display: block;
-                animation: fadein var(--layout-section-transition-duration);
             }
         }
     }
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 25d3f86..e5e216c 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -60,7 +60,7 @@ const isOutsideClicked = (event) => {
             </div>
             <app-footer></app-footer>
         </div>
-        <div class="layout-mask"></div>
+        <div class="layout-mask animate-fadein"></div>
     </div>
     <Toast />
 </template>