animation.css

.enter {
  opacity: .01;
}

.enter > div > div {
  transform: translateY(1000px) scale(1, 3);
  opacity: .01;
}

.enterActive {
  opacity: 1;
  transition: all 300ms linear;
  transition-delay: 200ms;
}

.enterActive > div > div {
  transform: translateY(0);
  opacity: 1;
  transition: all 500ms ease-out;
}

.leave {
  opacity: 1;
}

.leave > div > div {
  transform: translateY(0);
  opacity: 1;
}

.leaveActive {
  transition: all 300ms ease-in;
  opacity: .01;
}

.leaveActive > div > div {
  transform: translateY(1000px) scale(1, 3);
  transition: all 300ms ease-in;
  opacity: .01;
}

component.js

 import animation from './modal.css';
 
 React.render(
  <ReactCSSTransitionGroup transitionName={animation} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
  </ReactCSSTransitionGroup>
  , document.getElementById('mount')
 );