[css] 이중 애니메이션 주기 (실패)

html

<ul class="list-group ">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
  </ul> 
  <p class="hello">안녕</p>
 <script>
  $(".hello").html("바보"); 
  document.getElementsByClassName("navbar-toggler")[0].addEventListener('click',function(){
    document.getElementsByClassName('list-group')[0].classList.toggle('show');
  })</script>

css

.list-group {
  display: none;
  overflow: hidden;
  animation-duration: 1.5s;
  animation-name: slidein;
}
@keyframes slidein {
  from {
    height: 0;
  }
  to {
    height: 205.5px;
  }
}
@keyframes slideout {
  from {
    height: 205.5px;
  }

  to {
    height: 0;
  }
}
.show {
  display: block;
  overflow: hidden;
  animation-duration: 1.5s;
  animation-name: slideout;
}

navbar를 내릴 시에 slidein 애니메이션을 주고
navbar를 올릴 시에 slideout 애니메이션을 주고싶었는데
둘 중 하나만 적용이 된다..