.fade-transition,
.popup-pull-up-transition,
.popup-pull-down-transition,
.popup-pull-middle-transition {
  transition: all .3s ease;
}

.fade-enter, .fade-leave, .popfade-enter, .popfade-leave{
  opacity:0;
}

.popfade-transition{
  transition: all .3s ease;
}

.popup-pull-up-enter,
.popup-pull-up-leave,
.popup-pull-down-enter,
.popup-pull-down-leave,
.popup-pull-middle-enter,
.popup-pull-middle-leave {
  opacity:0;
}

.popup-pull-up-enter, .popup-pull-up-leave{
  transform: translateY(-100%);
}

.popup-pull-down-enter, .popup-pull-down-leave{
  transform: translateY(100%);
}

.popup-pull-middle-enter{
  transform: translateX(-100%);
}

.popup-pull-middle-leave{
  transform: translateX(100%);
}

@keyframes popscale-enter {
  0%{
    opacity:0;
    transform:scale(0);
  }

  80%{
    opacity:1;
    transform:scale(1.08);
  }
  100%{
    transform:scale(1);
  }
}

@keyframes popscale-leave {
  0%{
    opacity:1;
    transform:scale(1);
  }

  40%{
    opacity:.8;
    transform:scale(1.2);
  }
  100%{
    opacity:0;
    transform:scale(0);
  }
}