New "shazam" CSS effect utility lolol

I might rename this in the future

src/components/account-info.css

@@ -199,17 +199,6 @@
   margin: 0;
 }
 
-.account-container .common-followers {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows 0.5s ease-in-out;
-}
-.account-container .common-followers[hidden] {
-  grid-template-rows: 0fr;
-}
-.account-container .common-followers > .common-followers-inner {
-  overflow: hidden;
-}
 .account-container .common-followers p {
   font-size: 90%;
   color: var(--text-insignificant-color);

src/components/account-info.jsx

@@ -487,8 +487,11 @@ function RelatedActions({ info, instance, authenticated }) {
 
   return (
     <>
-      <div class="common-followers" hidden={!familiarFollowers?.length}>
-        <div class="common-followers-inner">
+      <div
+        class="common-followers shazam-container no-animation"
+        hidden={!familiarFollowers?.length}
+      >
+        <div class="shazam-container-inner">
           <p>
             Also followed by{' '}
             <span class="ib">

src/index.css

@@ -391,3 +391,26 @@ code {
     object-position: 50% 50%;
   }
 }
+
+@keyframes shazam {
+  0% {
+    grid-template-rows: 0fr;
+  }
+  100% {
+    grid-template-rows: 1fr;
+  }
+}
+.shazam-container {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.5s ease-in-out;
+}
+.shazam-container:not(.no-animation) {
+  animation: shazam 0.5s ease-in-out both !important;
+}
+.shazam-container[hidden] {
+  grid-template-rows: 0fr;
+}
+.shazam-container-inner {
+  overflow: hidden;
+}

src/pages/notifications.jsx

@@ -235,6 +235,8 @@ function Notifications() {
           )}
         </header>
         {announcements.length > 0 && (
+          <div class="shazam-container">
+            <div class="shazam-container-inner">
               <details class="announcements">
                 <summary>
                   <span>
@@ -273,6 +275,8 @@ function Notifications() {
                   ))}
                 </ul>
               </details>
+            </div>
+          </div>
         )}
         {followRequests.length > 0 && (
           <div class="follow-requests">