$common(start, end)
  &-appear
  &-enter
    opacity: 0
    transform: start
    &&-active
      opacity: 1
      transform: end
      transition: transitOpacity(), transitTransform()
  &-exit
    opacity: 1
    transform: end
    transition: transitOpacity(), transitTransform()
    &&-active
      opacity: 0
      transform: start

.react-transition-apply
  &.fade-in
    $common(translate3d(0, 0, 0), translate3d(0, 0, 0))
  &.fade-in-up
    $common(translate3d(0, 20px, 0), translate3d(0, 0, 0))
  &.fade-in-up-slight
    $common(translate3d(0, 5px, 0), translate3d(0, 0, 0))
  &.fade-in-up-self
    $common(translate3d(0, 100%, 0), translate3d(0, 0, 0))
  &.fade-in-down
    $common(translate3d(0, -20px, 0), translate3d(0, 0, 0))
  &.fade-in-down-slight
    $common(translate3d(0, -5px, 0), translate3d(0, 0, 0))
  &.fade-in-down-self
    $common(translate3d(0, -100%, 0), translate3d(0, 0, 0))
  &.fade-in-left
    $common(translate3d(20px, 0, 0), translate3d(0, 0, 0))
  &.fade-in-left-slight
    $common(translate3d(5px, 0, 0), translate3d(0, 0, 0))
  &.fade-in-left-self
    $common(translate3d(100%, 0,  0), translate3d(0, 0, 0))
  &.fade-in-right
    $common(translate3d(-20px, 0, 0), translate3d(0, 0, 0))
  &.fade-in-right-slight
    $common(translate3d(-5px, 0, 0), translate3d(0, 0, 0))
  &.fade-in-right-self
    $common(translate3d(-100%, 0,  0), translate3d(0, 0, 0))
  &.zoom-in-inward
    $common(scale3d(1.05, 1.05,  1), scale3d(1, 1, 1))
  &.zoom-in-outward
    $common(scale3d(0, 0,  1), scale3d(1, 1, 1))