Sample CSS code to style the animations of React Transition Group's CSSTransition component in a demo app

react-transition-group-sidebar-css.scss

.visible-enter {
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  transform: translate(-100%);
  background: #b65be1;
  margin-top: -25px;
  height: 50vh;
  width: 60%;
  position: absolute;
}

.visible-enter-active {
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  transform: translate(0);
  transition: transform 0.3s linear;
  margin-top: -25px;
  height: 50vh;
  width: 60%;
  position: absolute;
}

.visible-exit {
  z-index: 100;
  transform: translate(0);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: #b65be1;
  position: fixed;
  margin-top: -25px;
  height: 50vh;
  width: 60%;
}

.visible-exit-active {
  z-index: 100;
  width: 60%;
  transform: translate(-100%);
  transition: transform 0.3s linear;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: #b65be1;
  position: fixed;
  margin-top: -25px;
  height: 50vh;
}