Erroneously working transition in HTML+CSS

Question

I am making something move in HTML and CSS. Here is the code:

@keyframes lively{
    from{
        top:200px;
    }
    to{
        top:-100px;
    }
}

#maincheck{
    background-color:white;
    width:350px;
    height:100px;
    padding: 5px 5px 5px 5px;
    border-radius:5px;
    position:relative;
    top:200px;
    left:400px;
    
}
.animationclass{
    animation: lively 4s 
}

These are all the class and ids. I am then using Javascript to maneuver everything. Here is that:

const maincheck = document.getElementById("maincheck")
maincheck.addEventListener("mousedown", function(event){
    event.preventDefault()  
    if(event.button == 2){
       maincheck.className = "animationclass"
       console.log("Is")
       }
})

Techincally everything works. Apart from one thing of course otherwise I wouldn't be herre! When i right click the div, It does go up, but as soon as it reaches the place where the css keyframe has said, it pops back down. In other words, at the end of the run the div was where it was in the first place- it goes upthen back down again.

What's going on? Note: I have no errors and the if statement is working.