diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 6d799d454..84c17c193 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -14,39 +14,9 @@
     position: absolute;
     transform: translateX(-50%);
     z-index: var(--z-popup);
-    opacity: 0;
-    transform: scale(0.2) translateX(-50%);
-    transform-origin: top left;
-    transition: var(--dialog-duration) allow-discrete;
-    transition-property: display, opacity, overlay, transform;
-
-    &::backdrop {
-      background-color: var(--color-always-black);
-      opacity: 0;
-      transform: scale(1);
-      transition: var(--dialog-duration) allow-discrete;
-      transition-property: display, opacity, overlay;
-    }
 
     &[open] {
       display: flex;
-      opacity: 1;
-      transform: scale(1) translateX(-50%);
-
-      &::backdrop {
-        opacity: 0.5;
-      }
-    }
-
-    @starting-style {
-      &[open] {
-        opacity: 0;
-        transform: scale(0.2) translateX(-50%);
-      }
-
-      &[open]::backdrop {
-        opacity: 0;
-      }
     }
 
     &.orient-left {
@@ -191,4 +161,43 @@
       --btn-border-color: var(--color-ink);
     }
   }
+
+  /* Animated
+  /* -------------------------------------------------------------------------- */
+
+  .popup--animated {
+    opacity: 0;
+    transform: scale(0.2) translateX(-50%);
+    transform-origin: top left;
+    transition: var(--dialog-duration) allow-discrete;
+    transition-property: display, opacity, overlay, transform;
+
+    &::backdrop {
+      background-color: var(--color-always-black);
+      opacity: 0;
+      transform: scale(1);
+      transition: var(--dialog-duration) allow-discrete;
+      transition-property: display, opacity, overlay;
+    }
+
+    &[open] {
+      opacity: 1;
+      transform: scale(1) translateX(-50%);
+
+      &::backdrop {
+        opacity: 0.5;
+      }
+    }
+
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: scale(0.2) translateX(-50%);
+      }
+
+      &[open]::backdrop {
+        opacity: 0;
+      }
+    }
+  }
 }
diff --git a/app/views/my/menus/_nav.html.erb b/app/views/my/menus/_nav.html.erb
index 98357e1b5..26bd51ba4 100644
--- a/app/views/my/menus/_nav.html.erb
+++ b/app/views/my/menus/_nav.html.erb
@@ -1,7 +1,7 @@
 <nav class="nav" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" data-turbo-permanent>
   <%= render "my/menus/button" %>
 
-  <%= tag.dialog class: "nav__menu filter popup panel margin-block-start-half", data: {
+  <%= tag.dialog class: "nav__menu filter popup popup--animated panel margin-block-start-half", data: {
         action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset filter:changed->nav-section-expander#showWhileFiltering toggle->filter#filter",
         controller: "filter navigable-list nav-section-expander",
         dialog_target: "dialog",