$transition-timing-function-show: ease;
$transition-timing-function-hide: ease;

/* 渐隐渐现 */
.press--animation__fade-in {
  animation: fade-in .3s $transition-timing-function-show both;
}

.press--animation__fade-out {
  animation: fade-out .3s $transition-timing-function-hide both;
}

/* 底部进出 */
.press--animation__bottom-leave {
  animation: down-leave .3s $transition-timing-function-hide both;
}

.press--animation__bottom-enter {
  animation: up-enter .3s $transition-timing-function-show both;
}

/* 头部进出 */
.press--animation__top-leave {
  animation: top-leave .3s $transition-timing-function-hide both, fade-out .3s $transition-timing-function-hide both;
}

.press--animation__top-enter {
  animation: top-enter .3s $transition-timing-function-show both, fade-in .3s $transition-timing-function-show both;
}

/* 居中弹窗动效 */
.press--animation__bounce-enter {
  animation: bounce-enter .3s $transition-timing-function-show both;
}

.press--animation__bounce-leave {
  animation: bounce-leave .3s $transition-timing-function-hide both;
}

/* 右部进出 */
.press--animation__right-leave {
  animation: right-leave .3s $transition-timing-function-hide both;
}

.press--animation__right-enter {
  animation: right-enter .3s $transition-timing-function-show both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


@keyframes down-leave {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes up-enter {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}




@keyframes top-leave {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes top-enter {
  from {
    transform: translate3d(0, -100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}


@keyframes bounce-enter {
  from {
    opacity: 0;
    transform: scale(.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-leave {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.8);
  }
}





@keyframes right-leave {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes right-enter {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}