1 files changed, 12 insertions, 16 deletions
diff --git a/src/lib/LandingHero.svelte b/src/lib/LandingHero.svelte
index b42b91ac..401c976f 100644
--- a/src/lib/LandingHero.svelte
+++ b/src/lib/LandingHero.svelte
@@ -1,16 +1,9 @@
 <script lang="ts">
   import { env } from '$env/dynamic/public';
   import localforage from 'localforage';
-  import { onMount } from 'svelte';
-
-  let visible = $state(false);
-
-  onMount(() => {
-    visible = true;
-  });
 </script>
 
-<section class="hero" class:visible>
+<section class="hero">
   <div class="hero-content">
     <p class="tagline">The AniList Companion</p>
 
@@ -55,16 +48,19 @@
     text-align: center;
     padding: 2rem;
     position: relative;
-    opacity: 0;
-    transform: translateY(20px);
-    transition:
-      opacity 0.6s ease,
-      transform 0.6s ease;
+    animation: heroFadeIn 0.6s ease forwards;
   }
 
-  .hero.visible {
-    opacity: 1;
-    transform: translateY(0);
+  @keyframes heroFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   /*.hero-content {