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

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 :

<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>

css :

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

color: rgb(2, 56, 56);
text-decoration: none;
font-size: 20px;


and js :

import anime from "animejs";

let menuState = false;

menuState = !menuState;

            targets: '.nav-list-round',
            width: '400px',
            height: '400px',
            duration: 3000
    else if(!menuState){
            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.