How to resolve slideout animation not being applied

so I have a simple side bar that I want to slide in and out using css animation, now the slide animation in is working the problem that I am facing is making the animation for the slideout to work.

Can I please get help on that..

Html(Sidebar)

<div class="SideBarMenu" id="SideBarMenu">
    <div class="sidebar-menu-header">
        <h2 class="nav-bleft-companyname">
            Sofast<span class="nav-bleft-periodmark">Cart.</span>
        </h2>
    </div>
    <hr />
    <h4 class="sidebar-menuLink">MenuItem1</h4>
    <h4 class="sidebar-menuLink">MenuItem2</h4>
    <h4 class="sidebar-menuLink">MenuItem3</h4>
    <h4 class="sidebar-menuLink">MenuItem4</h4>
    <h4 class="sidebar-menuLink">MenuItem5</h4>
</div>

JS Function triggered to toggle menu

const OpenMenu = () => {
    const menu = document.getElementById("SideBarMenu");
    if (menu.style.display === "block") {
        menu.classList.add("sidebar-closed");
        menu.style.animation = "slideOut 0.4s backwards";
        menu.style.display = "none";
    } else {
        menu.style.display = "block";
        menu.style.animation = "slideIn 0.4s forwards";
        menu.classList.remove("sidebar-closed");
    }
};

Side Bar css

.SideBarMenu {
  top: 0% !important;
  z-index: 999;
  position: fixed;
  background-color: #333333;
  height: 100vh;
  color: white;
  width: 20%;
  transform: translateX(-350px);
  padding: 2rem;
}

.sidebar-menuLink {
  margin-top: 1rem;
}

@keyframes slideIn {
  100% {
    transform: translateX(0px);
  }
}

@keyframes slideOut {
  100% {
    transform: translateX(-350px);
  }
}

Read more here: https://stackoverflow.com/questions/65711297/how-to-resolve-slideout-animation-not-being-applied