anim

src/lib/components/Battle/BattleField.svelte

@@ -28,7 +28,7 @@
       
       setTimeout(() => {
         playerVisible = true;
-      }, 1500);
+      }, 1000);
     } else {
       // Skip intro
       playerVisible = true;
@@ -49,7 +49,7 @@
   <div class="battle-content">
     <!-- Enemy Row -->
     <div class="enemy-row">
-      <div class="enemy-stack">
+      <div class="enemy-stack" class:intro-animations={showIntro}>
         <PicletInfo 
           piclet={enemyPiclet}
           hpPercentage={enemyHpPercentage}
@@ -58,7 +58,7 @@
         />
         
         {#if enemyVisible}
-          <div class="enemy-piclet-wrapper" transition:fade={{ duration: 300 }}>
+          <div class="enemy-piclet-wrapper" class:animate-in={showIntro}>
             <img 
               class="piclet-image enemy-image"
               src={enemyPiclet.imageData || enemyPiclet.imageUrl} 
@@ -84,9 +84,9 @@
     
     <!-- Player Row -->
     <div class="player-row">
-      <div class="player-stack">
+      <div class="player-stack" class:intro-animations={showIntro}>
         {#if playerVisible}
-          <div class="player-piclet-wrapper" transition:fade={{ duration: 300 }}>
+          <div class="player-piclet-wrapper" class:animate-in={showIntro}>
             <img 
               class="piclet-image player-image"
               src={playerPiclet.imageData || playerPiclet.imageUrl} 
@@ -142,6 +142,19 @@
   .trainer-intro img {
     width: 200px;
     height: auto;
+    animation: trainerPulse 0.5s ease-in-out;
+  }
+  
+  @keyframes trainerPulse {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+    }
   }
   
   .battle-content {
@@ -255,6 +268,82 @@
     flex: 1;
   }
   
+  /* Animations */
+  .enemy-piclet-wrapper {
+    animation-fill-mode: both;
+  }
+  
+  .enemy-piclet-wrapper.animate-in {
+    animation: enemySlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  
+  .player-piclet-wrapper {
+    animation-fill-mode: both;
+  }
+  
+  .player-piclet-wrapper.animate-in {
+    animation: playerSlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  
+  @keyframes enemySlideIn {
+    0% {
+      transform: translateX(150px) translateY(-50px) scale(1.5);
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(0) translateY(0) scale(1);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes playerSlideIn {
+    0% {
+      transform: translateX(-150px) translateY(50px) scale(0.5);
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(0) translateY(0) scale(1);
+      opacity: 1;
+    }
+  }
+  
+  /* Info box animations */
+  .enemy-stack.intro-animations :global(.piclet-info-wrapper) {
+    animation: fadeSlideDown 0.5s ease-out 0.3s both;
+  }
+  
+  .player-stack.intro-animations :global(.piclet-info-wrapper) {
+    animation: fadeSlideUp 0.5s ease-out 0.3s both;
+  }
+  
+  @keyframes fadeSlideDown {
+    0% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes fadeSlideUp {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
   @media (max-width: 768px) {
     .enemy-image {
       width: 100px;