From c2515472b238206728ffa498c6dcbae5781f6a0c Mon Sep 17 00:00:00 2001
From: KS Jannette <kjannette@KSs-MacBook-Air.local>
Date: Mon, 2 Mar 2026 00:34:34 -0500
Subject: [PATCH] more css hottie

---
 frontend/src/pages/Login.css | 17 +++++++++++++++++
 frontend/src/pages/Login.jsx |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Login.css b/frontend/src/pages/Login.css
index d580a2d..95daffc 100644
--- a/frontend/src/pages/Login.css
+++ b/frontend/src/pages/Login.css
@@ -86,3 +86,20 @@
   color: #0066cc;
   text-decoration: none;
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.login-form-hidden {
+  opacity: 0;
+}
+
+.login-form-visible {
+  animation: fadeIn 2s ease-in-out forwards;
+}
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index f85ff40..07ae993 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -44,7 +44,7 @@ export default function Login() {
           <span className="login-brand">Koin Ping</span> - Login
         </h1>
 
-        <div style={{ visibility: isVisible ? 'visible' : 'hidden' }}>
+        <div className={isVisible ? 'login-form-visible' : 'login-form-hidden'}>
           {error && (
             <div className="login-error">
               {error}