Goto React Opacity Animation CSS

OpacityAnimation.css

/* placeholder for named import */
.opacityTransition {};

.opacityTransition-appear {
  opacity: 0;
}

.opacityTransition-appear.opacityTransition-appear-active {
  opacity: 1;
  /* autoprefix transition as needed */
  transition: opacity .3s ease-in;
}

.opacityTransition-enter {
  opacity: 0;
}

.opacityTransition-enter.opacityTransition-enter-active {
  opacity: 1;
  transition: opacity .3s ease-in;
}

.opacityTransition-leave {
  opacity: 1;
}

.opacityTransition-leave.opacityTransition-leave-active {
  opacity: 0;
  transition: opacity .3s ease-in;
}