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}