Burger menu on desktop fades in but not out?

Hi all, I'm having trouble with a forced burger menu on desktop. When clicking on "MENU", it opens with a fad in animation, but when closing it, it snaps out instead o fading out. On mobile it works perfectly fine. Does anybody how to solve this issue? My website is: https://www.michaelvincekim.com

This is the code I used to force the burger menu:

/* Force desktop burger menu */
/* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button (and cart) */
.header-actions {
    display: none;
}
/* Show burger */
.header-burger {
  display: flex;
  font-family: 'Lato' !important;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
visibility: visible;
  opacity: 1;
    transition:ease-in .3s;
    transition:ease-out .3s;
}

Hi,

I see it already worked on desktop.

You can change site background to another color, and click Menu, you can see it easier

Hi @tuanphan, I see what you mean. I think the problem is the fade-out is too fast, so it looks like it's snapping. Is there any way to slow it down to the same speed as the fade-in?

I tried changing the transition:ease-out value, but it only changes the fade-in for some reason. Changing the value of transition:ease-in didn't seem to have any effect.

Ok, I sort of got it to work by replacing the transition in .header--menu-open with this code:

.header-menu {
    transition: ease-in-out .3s !important;
}

But now I'm having another problem: the menu items are shifting down suddenly when closing the menu. Is there any way to fix their position so they don't move?

I'm guessing this has something to do with this code I added to disable the text animation when opening and closing the menu. I think what's happening is that the animation is disabled, but the initial and final positions of the nav items are still the same, except not animated.

/* Disable burger overlay menu animation */
.header-menu-nav-list {
  transition: none !important;
}
.header-menu-cta {
  transition: none !important;
}

Nevermind, managed to find the problem! I realised that the size of .header-menu-nav-list was changing when the menu was open and closed. I added  transform: unset to the code and it worked. Thanks anyway @tuanphan!