如何反转CSS / JavaScript动画？

Question

我按照youtube上的本教程创建了megamenu。但是我似乎找不到找到如何反转打开菜单时发生的动画的方法。这是动画和视频：https://youtu.be/4G9c5swUyOc?t=2484

我已经尝试过反转CSS，但是当我更改Javascript时，菜单根本不再关闭。

JAVASCRIPT

<script>

    var overlay = document.getElementById('overlay');

    document.getElementById('menu-open').addEventListener('click', function() {
        overlay.classList.add('show-menu');
    });

    document.getElementById('menu-close').addEventListener('click', function() {
        overlay.classList.remove('show-menu');
    });

</script>

CSS

.show-menu {

    display: block;
    animation: slide-menu 1s ease-in forwards;

    .menu-close {
        animation: show-x 1s 1s forwards;
    }

    li:nth-of-type(1) {
        animation: menu-item-anim .6s forwards 1s ease-in-out;
    }

    li:nth-of-type(2) {
        animation: menu-item-anim .6s forwards 1.2s ease-in-out;
    }

    li:nth-of-type(3) {
        animation: menu-item-anim .6s forwards 1.4s ease-in-out;
    }

    li:nth-of-type(4) {
        animation: menu-item-anim .6s forwards 1.6s ease-in-out;
    }
}

@keyframes slide-menu {
    from {   transform: scaleX(0);  }
    to {     transform: scaleX(1);  }
}

@keyframes show-x {
    from {   opacity: 0;   }
    to {     opacity: 1;   }
}

@keyframes menu-item-anim {
    from {
        transform: translateY(50%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}