diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 2b35be88fe..a7e517418e 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -377,6 +377,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       ${!this.narrow
         ? html`
             <ha-icon-button
+              class="menu-button"
               .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
               .path=${this.hass.dockedSidebar === "docked"
                 ? mdiMenuOpen
@@ -743,6 +744,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           -webkit-transform: scaleX(var(--scale-direction));
           transform: scaleX(var(--scale-direction));
         }
+        .menu-button {
+          animation: fadeInSlideDown var(--ha-animation-duration) ease-out both;
+          animation-delay: var(--ha-animation-delay-base);
+        }
         ha-md-list-item {
           animation: fadeInSlideDown var(--ha-animation-duration) ease-out both;
         }