I am currently working on creating an animation for a form using JS and CSS. Here is the code snippet I have:
var userInput = document.getElementById("login-user");
var userLabel = document.getElementById("user-label");
// User Label Functions
function activateUser() {
userLabel.style.transition = "0.2s";
userLabel.style.top = "-1.5vw";
}
function deactivateUser() {
if (userInput.value.length == 0) {
userLabel.style.top = "0vw";
}
}#login-user {
margin-bottom: 3vw;
width: 80%;
height: 3vw;
border-radius: 0.5vw;
border: solid #0057e0 0.1vw;
background: none;
color: #ddd;
text-indent: 0.5vw;
font-size: 1.5vw;
}
#user-label {
color: black;
font-size: 2vw;
position: relative;
left: 8vw;
background: #fff;
margin-right: -2vw;
font-family: 'Open Sans';
cursor: text;
transition: 0.2s;
}<label for="login-user" onclick="activateUser()" id="user-label">Username</label>
<input type="text" name="user" id="login-user" onfocusout="deactivateUser()" onclick="activateUser()" onfocus="activateUser()">Upon running the provided code, you will notice that the "username" label jumps up instantly without any transition. However, when the onfocusout event occurs, it smoothly transitions back down. My goal is to achieve a smooth transition when the input field is activated, but I'm unsure why it's not happening.