Add animation effects

Adds subtle animation effects to improve user experience.

src/components/AddTransactionButton.tsx

@@ -138,15 +138,15 @@ const AddTransactionButton = () => {
     <>
       <div className="fixed bottom-24 right-6 z-20">
         <button 
-          className={`transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white animate-pulse-subtle ${
+          className={`transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white ${
-            showText ? 'flex items-center gap-2 px-4 py-3 rounded-full' : 'p-4 rounded-full'
+            showText ? 'flex items-center gap-2 px-4 py-3 rounded-full animate-bounce-gentle' : 'p-4 rounded-full animate-pulse-subtle'
           }`}
           onClick={() => setShowExpenseDialog(true)}
           aria-label="지출 추가"
           disabled={isSubmitting}
         >
-          <PlusIcon size={showText ? 20 : 24} />
+          <PlusIcon size={showText ? 20 : 24} className={showText ? "" : "animate-spin-slow"} />
-          {showText && <span className="mr-1">지출 입력</span>}
+          {showText && <span className="mr-1 animate-fade-in">지출 입력</span>}
         </button>
       </div>
       

src/index.css

@@ -1,4 +1,3 @@
-
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 @tailwind base;
@@ -203,6 +202,59 @@
       @apply w-full mx-auto;
     }
   }
+  
+  /* 추가 애니메이션 정의 */
+  @keyframes pulse-subtle {
+    0%, 100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+  }
+  
+  @keyframes bounce-gentle {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-5px);
+    }
+  }
+  
+  @keyframes spin-slow {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .animate-pulse-subtle {
+    animation: pulse-subtle 2s infinite ease-in-out;
+  }
+  
+  .animate-bounce-gentle {
+    animation: bounce-gentle 1.5s infinite ease-in-out;
+  }
+  
+  .animate-spin-slow {
+    animation: spin-slow 6s linear infinite;
+  }
+  
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .animate-fade-in {
+    animation: fade-in 0.5s ease-in-out;
+  }
 }
 
 /* iOS 전용 스타일 */
@@ -221,4 +273,3 @@
 .font-inter {
   font-family: 'Inter', sans-serif;
 }
-