/* 渐隐渐现 */
.tip-match-fade-in {
  animation: fade-in .3s ease-out both;
}

.tip-match-fade-out {
  animation: fade-out .3s ease-in both;
}

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

  to {
    opacity: 1;
  }
}

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

  to {
    opacity: 0;
  }
}

/* 底部进出 */
.tip-match-bottom-leave {
  animation: down-leave .3s ease-in both;
}

.tip-match-bottom-enter {
  animation: up-enter .3s ease-out both;
}

/* 右侧进出 */
.tip-match-right-leave {
  animation: right-down-leave .3s ease-in both;
}

.tip-match-right-enter {
  animation: right-up-enter .3s ease-out both;
}

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

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

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

  to {
    transform: translate3d(100%, 0, 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);
  }
}

/* 头部进出 */
.tip-match-top-leave {
  animation: top-leave .3s ease-in both, fade-out .3s ease-in both;
}

.tip-match-top-enter {
  animation: top-enter .3s ease-out both, fade-in .3s ease-out both;
}

@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);
  }
}

/* 居中弹窗动效 */
.tip-match-bounce-enter {
  animation: bounce-enter .3s ease-out both;
}

.tip-match-bounce-leave {
  animation: bounce-leave .3s ease-in both;
}

@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);
  }
}