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


<div class="SideBarMenu" id="SideBarMenu">
    <div class="sidebar-menu-header">
        <h2 class="nav-bleft-companyname">
            Sofast<span class="nav-bleft-periodmark">Cart.</span>
    <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>

JS Function triggered to toggle menu

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

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:

Content Attribution

This content was originally published by Ntshembo Hlongwane at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: