Delay Ease Out

Nav UL shows unwanted delay when easing out.

HTML

<nav>
  <input type="checkbox" id="menu-main-checkbox" hidden>
  <label class="toggler" for="menu-main-checkbox">Menu</label>
  <div class="hide toggleable">
    <ul>
      <li>Home</li>
      <li>Sample Page</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
</nav>

CSS

.hide {
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
}

input[type=checkbox]:checked~.toggleable {
  visibility: visible;
  animation: height1 .75s forwards;
}
input[type=checkbox]:not(:checked)~.toggleable {
  visibility: visible;
  animation: height2 .50s forwards;
}

.toggleable {
  transition: visibility 1.5s ease-in-out;
}

.toggler {
  cursor: pointer
}

nav {
  background: #e74c3c;
}
@keyframes height1 {
  0%   { max-height: 0; }
  100% { max-height: 500px; }
}
@keyframes height2 {
  0%   { max-height: 500px; }
  100% { max-height: 0; }
}