Improve Accordion Animations (#23)

* Improve Accordion Animations

* Fix Initial Content Opacity

apps/website/src/components/Accordion/Accordion.module.css

@@ -1,39 +1,43 @@
 .AccordionContent[data-state="open"] {
   animation: slideDown 300ms linear;
-  opacity: 1;
 }
 .AccordionContent[data-state="closed"] {
   animation: slideUp 300ms linear;
-  opacity: 0;
 }
 
 @media (min-width: 1024px) {
   .AccordionContent[data-state="open"] {
-    animation: openHorizontal 600ms linear;
-    opacity: 1;
+    animation:
+      openHorizontal 300ms linear,
+      fadeIn 600ms linear;
   }
   .AccordionContent[data-state="closed"] {
-    animation: closeHorizontal 300ms linear;
     opacity: 0;
+    animation: closeHorizontal 300ms linear;
   }
 }
 
-@keyframes openHorizontal {
+@keyframes fadeIn {
   0% {
-    width: 0;
     opacity: 0;
   }
   50% {
-    width: var(--radix-accordion-content-width);
-  }
-  75% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 
+@keyframes openHorizontal {
+  from {
+    width: 0;
+  }
+  to {
+    width: var(--radix-accordion-content-width);
+  }
+}
+
 @keyframes closeHorizontal {
   0% {
     width: var(--radix-accordion-content-width);
@@ -46,21 +50,17 @@
 @keyframes slideDown {
   from {
     height: 0;
-    opacity: 0;
   }
   to {
     height: var(--radix-accordion-content-height);
-    opacity: 1;
   }
 }
 
 @keyframes slideUp {
   from {
     height: var(--radix-accordion-content-height);
-    opacity: 1;
   }
   to {
     height: 0;
-    opacity: 0;
   }
 }

apps/website/src/components/Accordion/Accordion.tsx

@@ -28,7 +28,7 @@ const itemVariants = cva(
         ...backgroundColorsMap,
       },
     },
-  }
+  },
 );
 
 const triggerVariants = cva(
@@ -40,10 +40,10 @@ const triggerVariants = cva(
         large: "data-[state=open]:hidden",
       },
     },
-  }
+  },
 );
 
-const contentVariants = cva("overflow-hidden p-6 sm:p-10", {
+const contentVariants = cva("overflow-hidden", {
   variants: {
     size: {
       medium: "lg:pl-0",
@@ -101,10 +101,10 @@ export const Accordion = ({
               className={cx(
                 "w-full",
                 styles.AccordionContent,
-                contentVariants({ size })
+                contentVariants({ size }),
               )}
             >
-              <div className="flex h-full flex-col items-start overflow-auto">
+              <div className="flex h-full flex-col items-start overflow-auto p-6 sm:p-10">
                 {size === "large" && (
                   <>
                     <div className="flex w-full justify-center">