I am trying to animate my input labels to move up after click the way it works is after clicking on input a class which contains the animation i want is assigned to the label, but it is not working.
Here’s the HTML
<div class="login-container">
<p class="heading">sign in to your account</p>
<form>
<div class="username-group group">
<label class="username-input-label " for="username-input">User name</label>
<input class="username-input" type="text">
</div>
<div class="password-group group">
<label class="password-input-label" for="password-input">password</label>
<input class="password-input" type="text">
<!-- <button class="show-password">show password</button> -->
</div>
<div class="confirm-password-group group">
<label class="confirm-password-input-label" for="confirm-password-input">confirm password</label>
<input class="confirm-password-input"></input>
</div>
<div class="email-group group">
<label class="email-input-label" for="email-input">email adress</label>
<input class="email-input"></input>
</div>
</form>
<button class="sign-up">sign up</button>
</div>
<script src="script.js"></script>
CSS
*{
margin: 0;
padding: 0;
font-family: urbanist;
}
body{
height: 100vh;
background-color: #496d8d;
display: flex;
justify-content: center;
align-items: center;
}
form{
width: 130%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
input{
border: none;
border-bottom: 1px solid #082c4c;
width: 100%;
background-color: #224f3900;
padding: 0.2rem 0 0.2rem 0;
z-index: 99999;
position: relative;
color: #ddd;
font-size: 1.5rem;
font-weight: 100;
}
input:focus{
outline: none;
}
.group{
width: 60%;
}
label{
display: inline-block;
transform: translate(0,2.1rem);
user-select: none;
color: #ddd;
}
.username-focus-label-animation{
animation: usenramefocusLabelAnimation 700ms forwards;
}
@keyframes usenramefocusLabelAnimation {
from {transform: translate(0,2.1rem);}
to {transform: translate(0,0.1rem);}
}
.username-blur-label-animation{
animation: usenrameBlurLabelAnimation 700ms forwards;
}
@keyframes usenrameBlurLabelAnimation {
from {transform: translate(0,0.1rem);}
to {transform: translate(0,2.1rem);}
}
button:not(.show-password){
background-color: #082c4c;
scale: 1.8;
padding: 0.3rem;
border: none;
border-radius: 10%;
cursor: pointer;
color: #ddd;
box-shadow: 0 5px 5px 2px #082c4c70,0 2px 10px -1px #0f497b inset;
transition: 500ms;
}
button:not(.show-password):hover{
box-shadow: 0 0px 0px 0px #082c4c70,0 2px 10px -1px #0f497b inset;
background-color: #07345b;
}
.heading{
font-size: 4rem;
color: #ddd;
font-weight: 200;
text-align: center;
text-shadow: 0 5px 10px #082c4c90 , 0 15px 10px #082c4c90 ,0 25px 10px #082c4c90;
}
.login-container{
width: 30%;
height: 90vh;
padding: 0.5rem;
backdrop-filter: blur(20px);
background-color: #1d5582;
border-radius: 10%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 3rem;
box-shadow: 0 10px 50px 1px #082c4c inset
}
and JS
let $ = document
let usernameInputLabel = $.querySelector(".username-input-label")
let usernameInput = $.querySelector(".username-input")
let isFocused = false
function focusAnimation() {
if (isFocused) {
usernameInputLabel.classList.remove(".username-focus-label-animation")
usernameInputLabel.classList.add(".username-blur-label-animation")
isFocused = false
}
else{
usernameInputLabel.classList.add(".username-focus-label-animation")
usernameInputLabel.classList.remove(".username-blur-label-animation")
isFocused = true
}
}
usernameInput.addEventListener("click",focusAnimation)
The animation is written correctly and the function seems to work fine. I can’t see what is the problem