Fade — In Login

Enter the .

.login-card { animation: fadeSlideUp 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards; opacity: 0; /* Start hidden */ } .fade-field { opacity: 0; transform: translateY(10px); animation: fadeInUp 0.4s forwards; } fade in login

<div class="login-container"> <div class="login-card"> <h1>Welcome Back</h1> <input type="text" placeholder="Email" class="fade-field"> <input type="password" placeholder="Password" class="fade-field"> <button class="fade-field">Sign In</button> </div> </div> Enter the

@keyframes fadeSlideUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } animation: fadeInUp 0.4s forwards