我想让一个动画容器再次小到初始大小与点击。它可以完美地展开，但我不能再关闭它

@keyframes shrink-expand {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.container {
  animation: shrink-expand 1s ease-in-out;
}

var container = document.querySelector('.container');

container.addEventListener('click', function() {
  container.classList.toggle('animate');
});

<div class="container">
  <p>动画容器</p>
</div>