diff --git a/src/components/side-nav/side-nav.module.css b/src/components/side-nav/side-nav.module.css
index 922e56d0..e909f39a 100644
--- a/src/components/side-nav/side-nav.module.css
+++ b/src/components/side-nav/side-nav.module.css
@@ -34,24 +34,15 @@
 
   & #indicator {
     display: inline-block;
+    transition: transform 1s ease;
   }
 }
 
-.compactMenu:has(#compact-menu:popover-open) {
-  & #indicator {
-    animation: rotateindicatoropen 1s ease;
-    animation-fill-mode: forwards;
-  }
+.compactMenu:not(:has(#compact-menu:popover-open)) #indicator {
+  transform: rotate(0deg);
 }
-
-@keyframes rotateindicatoropen {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(180deg);
-  }
+.compactMenu:has(#compact-menu:popover-open) #indicator {
+  transform: rotate(180deg);
 }
 
 .compactMenuPopover {
diff --git a/src/components/table-of-contents/table-of-contents.module.css b/src/components/table-of-contents/table-of-contents.module.css
index 0f42d6fc..05209b2c 100644
--- a/src/components/table-of-contents/table-of-contents.module.css
+++ b/src/components/table-of-contents/table-of-contents.module.css
@@ -40,24 +40,15 @@
 
   & #indicator {
     display: inline-block;
+    transition: transform 1s ease;
   }
 }
 
-.compactMenu:has(#onthispage:popover-open) {
-  & #indicator {
-    animation: rotateindicatoropen 1s ease;
-    animation-fill-mode: forwards;
-  }
+.compactMenu:not(:has(#onthispage:popover-open)) #indicator {
+  transform: rotate(0deg);
 }
-
-@keyframes rotateindicatoropen {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(180deg);
-  }
+.compactMenu:has(#onthispage:popover-open) #indicator {
+  transform: rotate(180deg);
 }
 
 .compactMenuItem {