Add animatin

src/app/globals.css

@@ -16,19 +16,29 @@
   }
 }
 
-/* body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-} */
-
 .text-gradient {
   background: #2E90DB;
   background: linear-gradient(to right, #2E90DB 0%, #CF13C2 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+.animation {
+  animation-timeline: view(block -300px 100%);
+  animation-name: hide;
+  animation-fill-mode: both;
+  animation-duration: 1ms; /* Firefox requires this to apply the animation */
+  animation-timing-function: linear;
+}
+
+@keyframes hide {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-100px);
+  }
+}

src/components/recipe-list-item/recipe-list-item.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 export function RecipeListItem({ href, title, coverImage }: Props) {
   return (
-    <Link className='group flex flex-col w-full border h-full' href={href}>
+    <Link className='group flex flex-col w-full border h-full animation' href={href}>
       <div className="overflow-hidden">
         <Image src={coverImage} width={400} height={300} className='scale-100 group-hover:scale-105 group-focus:scale-105 group-active:scale-125 group-active:duration-75 transition-transform ease-in aspect-cover object-cover w-full' alt={`Photo of ${title}`} />
       </div>