feat(animation): add accordion animations for better UX

arghyaxcodes · arghyaxcodes · commit 4d50c1fa2102 · 2025-08-31T20:31:27.000+05:30
diff --git a/src/app/global.css b/src/app/global.css
@@ -46,6 +46,8 @@
   --color-sidebar-ring: var(--sidebar-ring);
   --animate-ripple: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s)
     infinite;
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
   @keyframes ripple {
     0%,
     100% {
@@ -55,6 +57,22 @@
       transform: translate(-50%, -50%) scale(0.9);
     }
   }
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
 }
 
 :root {
