.van-transition {
  animation: ease both;
}

@keyframes van-fade-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes van-fade-leave {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

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

@keyframes van-fade-up-leave {
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

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

@keyframes van-slide-up-leave {
  to {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes van-fade-down-enter {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes van-fade-down-leave {
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

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

@keyframes van-slide-down-leave {
  to {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes van-fade-left-enter {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes van-fade-left-leave {
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

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

@keyframes van-slide-left-leave {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

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

@keyframes van-fade-right-leave {
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

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

@keyframes van-slide-right-leave {
  to {
    transform: translate3d(100%, 0, 0);
  }
}