Hamburger menu transition problem

HTML

<main id="main">
   <header id="header">

     <div class="logo">
       <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
     </div>

     <input type="checkbox" class="menu-btn" id="menu-btn">
     <label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>

     <nav id="nav-bar">
       <ul class="menu">
         <li><a href="#features" class="nav-link">Feautures</a></li>
         <li><a href="#how-it-works" class="nav-link">How it Works</a></li>
         <li><a href="#pricing" class="nav-link">Pricing</a></li>
       </ul>
     </nav>

   </header>
 </main>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-width: fit-content;
}

body {
  font-family: "Montserrat", sans-serif;
  background-color: #eeeeee;
}

body.stop-transition .menu {
  transition: none;
}

header {
  width: 100%;
  background-color: #eeeeee;
  padding: 0 20px;
  height: 65px;
  position: fixed;
  top: 0;
}

.logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

#header-img {
  width: 100%;
  height: 100%;
  max-width: 300px;
}

/* Navigation */

nav {
  width: 100%;
  text-align: center;
}

/* Hamburger menu button */

.menu-btn {
  display: none;
}

.menu-icon {
  display: inline-block;
  position: relative;
  top: -42px;
  left: -25px;
  cursor: pointer;
  padding: 24px 14px;
  z-index: 1;
}

.navicon {
  background-color: #222222;
  display: block;
  height: 3px;
  width: 26px;
  position: relative;
  transition: 0.3192s ease-in-out;
}

.navicon:before,
.navicon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #222222;
  transition: 0.3192s ease-in-out;
}

.navicon:before {
  top: 9px;
}

.navicon:after {
  bottom: 9px;
}

/* Hamburger Menu Animation Start */

.menu-btn:checked~.menu-icon .navicon:before {
  transform: rotate(-45deg);
  top: 0;
}

.menu-btn:checked~.menu-icon .navicon:after {
  transform: rotate(45deg);
  bottom: 0;
}

.menu-btn:checked~.menu-icon .navicon {
  background: transparent;
  transition: 0.3192s ease-in-out;
}

/* Hide blue background on hamburger menu tap on some mobile devices */

.menu-icon,
.menu-btn,
.navicon {
  -webkit-tap-highlight-color: transparent;
}

/* Nav items */

.menu {
  background-color: #eeeeee;
  width: 100%;
  height: auto;
  list-style-type: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 65px;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3192s ease-in-out, opacity...

JavaScript

(function () {
  const classes = document.body.classList;
  let timer = null;
  window.addEventListener('resize', function () {
    if (timer){
      clearTimeout(timer);
      timer = null;
    }else {
      classes.add('stop-transition');
    }
    timer = setTimeout(() => {
      classes.remove('stop-transition');
      timer = null;
    }, 100);
  });
})();