为什么这个CSS动画向前渲染，但不是相反？(Why is this CSS Animation rendering forward but not in reverse?)

 我正在使用为动画提供CSS类的ReactModal（下面的示例）： 
 
.ReactModal__Content {
  opacity: 0;
}

.ReactModal__Content--after-open {
  opacity: 1;
  transition: opacity 150ms;
}

.ReactModal__Content--before-close {
  opacity: 0;
}
 
 我试图让模态进出。 动画是工作，但不是动画反向，我想发生在接近...我做错了动画属性下面？ 
 
  .ReactModal__Content {
    animation-duration: 1s;
    animation-name: fadeInUpBigXXX;

  }

  .ReactModal__Content--after-open {
    animation-direction: normal;


  }
  .ReactModal__Content--before-close {
    animation-direction: reverse;
  }

  @keyframes fadeInUpBigXXX {
    from {
      opacity: 0;
      transform: translate3d(0, 2000px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
 
 模态很好地动画。 但onClose，模式不执行反向fadeInUpBigXXX动画。 为什么？ 
 
 谢谢 

I'm using ReactModal which provides CSS classes for animations (example below):
 
.ReactModal__Content {
  opacity: 0;
}

.ReactModal__Content--after-open {
  opacity: 1;
  transition: opacity 150ms;
}

.ReactModal__Content--before-close {
  opacity: 0;
}
 
I'm trying to animate the modal in and out. The animate in is working but not the animation in reverse which I want to have happen on close... What am I doing wrong with the animation properties below?
 
  .ReactModal__Content {
    animation-duration: 1s;
    animation-name: fadeInUpBigXXX;

  }

  .ReactModal__Content--after-open {
    animation-direction: normal;


  }
  .ReactModal__Content--before-close {
    animation-direction: reverse;
  }

  @keyframes fadeInUpBigXXX {
    from {
      opacity: 0;
      transform: translate3d(0, 2000px, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
 
The modal is animating in nicely. But onClose, the modal is not performing the reverse fadeInUpBigXXX animation. Why?

原文：https://stackoverflow.com/questions/49803683