关闭时模态上的css关键帧动画

Question

这是我的模式叠加层和容器的CSS

  .overlay {
    position: fixed;
    background-color: rgba(20, 20, 21, 0.5);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: 350ms;
    animation-timing-function: ease-in-out;

  }

  .container {
    background: var(--color-white);
    max-height: 94vh;
    max-width: 62.5rem;
    z-index: 2;
    transform: none;
    border-radius: 4px;
    overflow: hidden;
    animation-name: slideUp;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: 350ms;
    animation-timing-function: var(--animation-sharp);
  }

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

基本上，叠加层会逐渐消失，与此同时容器也会向上滑动。此刻，当打开模态时，动画可以按预期工作，但关闭时根本没有动画。如何确保关闭时会有反向动画？因此，在关闭容器时，容器将向下滑动，并且叠加层会逐渐消失。