Animation of anime.js is geving css Error in parsing value for 'width'/'height'. Declaration dropped

JavaScript
1

Hello everyone!!
i’m trying to make a menu button as half a circle from the corner ,when the animation is reversed by using another animation i’m getting around 30 error messages from css , i checked and some people are saying there’s a syntax error in css but i rewrite the whole thing and nothing changed .
my html :

<ul>
<a href="#"><li>home</li></a>
<a href="#"><li>about us</li></a>
<a href="#"><li>projects</li></a>
<a href="#"><li>products</li></a>
<a href="#"><li>e-catalog</li></a>
<a href="#"><li>contact us</li></a>
</ul>

css :

.nav-list-round{
width: 400px;
height: 400px;
background-color: antiquewhite;
border-radius: 50%;
flex-direction: column;
list-style: none;
position: absolute;
top: -200px;
right: -200px;
}
.nav-item-round{
position: absolute;
top: 200px;
right: 200px;

}
.link-round{
color: rgb(2, 56, 56);
text-decoration: none;
font-size: 20px;

}

and js :

import anime from "animejs";

let menuState = false;

menu.addEventListener('click',()=>{
menuState = !menuState;

    if(menuState){
        anime({
            targets: '.nav-list-round',
            width: '400px',
            height: '400px',
            duration: 3000
        })
    }
    else if(!menuState){
        anime({
            targets: '.nav-list-round',
            width: '0px',
            height: '0px',
            duration: 3000
        })
    }

})

i tried rewriting the whole thing , including changing the values in the animation from string to numbers and also tried changing the css values and the animation values of width and height to 0 or more than that iv’e even tried a css validator but nothing worked out .
ps: the animation is working but it get bugy when i run it few times.