I have trouble animating my element with html and js

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