style: add fade animations to roc, back button, tags and waline comment, refactor katex import method

src/components/Widgets/FadeUpAnimation.astro

@@ -1,7 +1,7 @@
 <script>
 function resetFadeUpAnimation() {
   document.querySelectorAll('.animation-fade-up').forEach((container) => {
-    const childElements = Array.from(container.children).slice(0, 20)
+    const childElements = Array.from(container.children)
     childElements.forEach(element =>
       (element as HTMLElement).style.animationName = 'none',
     )

src/components/Widgets/GoBack.astro

@@ -4,7 +4,7 @@ import GoBackIcon from '@/assets/icons/go-back.svg';
 
 <button
   id="back-button"
-  class="hidden"
+  class="animation-fade-goback hidden"
   lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors duration-300 ease-out c-secondary active:scale-90 hover:c-primary/80"
   aria-label="Go back"
 >

src/components/Widgets/TOC.astro

@@ -37,7 +37,7 @@ const filteredHeadings = headings.filter(heading =>
 
         <TocIcon
           aria-hidden="true"
-          class="ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
+          class="animation-fade-in ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
           fill="currentColor"
         />
       </label>
@@ -50,7 +50,10 @@ const filteredHeadings = headings.filter(heading =>
         class="accordion-content"
         aria-label="Table of Contents"
       >
-        <ul class="toc-list">
+        <ul
+          class="animation-fade-up toc-list"
+          style="--animation-interval: 0.04s;"
+        >
           {filteredHeadings.map(heading => (
             <li
               class:list={{