css - 关闭时模态上的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);
  }
}

基本上，覆盖层会淡入，同时容器会向上滑动。目前，当模式打开时，动画按预期工作，但关闭时根本没有动画。如何确保关闭时会有反向动画？所以关闭时，容器会向下滑动，覆盖层会淡出。

标签： csscss-animations