<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>
Try it on your next project. Fade in, don’t flash crash. About the author: This article is part of a series on "Micro-interactions that matter." fade in login
.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; } input type="text" placeholder="Email" class="fade-field">