style: 💄 tweak fade (#35)

src/app.css

@@ -105,3 +105,12 @@ body {
   display: flex;
   flex-direction: column;
 }
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/lib/components/Hex/Hex.svelte

@@ -39,21 +39,20 @@
       {#key loaded}
         {#if imgError}
           <img
-            in:fade={{ duration: 700, delay: 200 }}
-            src="grey_square.png"
-            on:error={() => (imgError = true)}
+            src="/grey_square.png"
             alt={`category ${category.Name}`}
             data-testid="cdn-img"
+            class="hex-img"
           />
         {:else}
           <img
-            in:fade={{ duration: 700, delay: 200 }}
             src={`${PUBLIC_BUCKET_URL}/${category.Description}${
               isAvifSupported ? "-avif" : ""
             }`}
             on:error={() => (imgError = true)}
             alt={`category ${category.Name}`}
             data-testid="cdn-img"
+            class="hex-img"
           />
         {/if}
         <img
@@ -124,6 +123,10 @@
     font-family: "Welcomehome5 Regular";
   }
 
+  .hex-img {
+    animation: fadeIn 1.25s;
+  }
+
   h3 {
     position: absolute;
     width: 95%;

src/lib/components/SwipeImage/SwipeImage.svelte

@@ -73,6 +73,7 @@
   img {
     max-width: 95%;
     max-height: 95%;
+    animation: fadeIn 0.6s;
   }
 
   .single-img-container {

src/routes/+page.svelte

@@ -107,6 +107,7 @@
     margin-right: 0;
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
+    animation: fadeIn 0.8s;
   }
 
   .mobile-container {
@@ -137,6 +138,7 @@
     z-index: -1;
     width: 100%;
     height: auto;
+    animation: fadeIn 0.8s;
   }
 
   .mobile-classes-img,