.page-transition {
  width: 100vw;
  height: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  animation-fill-mode: both;
}
.page-trans-fade{animation-name: page-trans-fade;}
.page-trans-up{animation-name: page-trans-fade-up;}
.page-trans-down{animation-name: page-trans-fade-down;}
.page-trans-left{animation-name: page-trans-fade-left;}
.page-trans-right{animation-name: page-trans-fade-right;}
.page-trans-shrink-x{animation-name: page-trans-shrink-x;}
.page-trans-shrink-y{animation-name: page-trans-shrink-y;}
.page-trans-circle{animation-name: page-trans-circle;}

@keyframes page-trans-fade {
  0% {opacity: 1;visibility: visible;}
  100% {opacity: 0;visibility: hidden;}
}
@keyframes page-trans-fade-up {
  0% {visibility: visible;-webkit-transform: none;transform: none;}
  30% {opacity: 1;}
  100% {opacity: 0;visibility: hidden;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
}
@keyframes page-trans-fade-down {
  0% {visibility: visible;-webkit-transform: none;transform: none;}
  30% {}
  100% {opacity: 0;visibility: hidden;-webkit-transform: translate3d(0, +100%, 0);transform: translate3d(0, +100%, 0);}
}
@keyframes page-trans-fade-left {
  0% {visibility: visible;-webkit-transform: none;transform: none;}
  30% {opacity: 1;}
  100% {opacity: 0;visibility: hidden;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
}
@keyframes page-trans-fade-right {
  0% {visibility: visible;-webkit-transform: none;transform: none;}
  30% {opacity: 1;}
  100% {opacity: 0;visibility: hidden;-webkit-transform: translate3d(+100%, 0, 0);transform: translate3d(+100%, 0, 0);}
}
@keyframes page-trans-shrink-x {
  0% {opacity: 1;visibility: visible;-webkit-transform: none;transform: none;}
  100% {visibility: hidden;-webkit-transform: scaleX(0);transform: scaleX(0);}
}
@keyframes page-trans-shrink-y {
  0% {opacity: 1;visibility: visible;-webkit-transform: none;transform: none;}
  100% {visibility: hidden;-webkit-transform: scaleY(0);transform: scaleY(0);}
}
@keyframes page-trans-circle {
  0% {opacity: 1;visibility: visible;-webkit-transform: scale(2);transform: scale(2);clip-path: circle(100% at center);-webkit-clip-path: circle(100% at center);}
  100% {visibility: hidden;-webkit-transform: scale(0);transform: scale(0);clip-path: circle(100% at center);-webkit-clip-path: circle(100px at center);}
}


/* Split X */
.page-trans-split-x{animation-name: page-trans-fade-split-x;}

@keyframes page-trans-fade-split-x {
  0% {opacity:1;visibility: visible;-webkit-transform: none;transform: none;}
  50% {opacity:1;-webkit-transform: translate3d(+100%, 0, 0);transform: translate3d(+100%, 0, 0);}
  100% {opacity:0;visibility: hidden;-webkit-transform: translate3d(+100%, 0, 0);transform: translate3d(+100%, 0, 0);}
}
@keyframes page-trans-split-x-top {
  0% {-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
  50% {-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
  100% {-webkit-transform: translate3d(-100%, -100%, 0);transform: translate3d(-100%, -100%, 0);}
}
@keyframes page-trans-split-x-bottom {
  0% {-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
  50% {-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
  100% {-webkit-transform: translate3d(-100%, +100%, 0);transform: translate3d(-100%, +100%, 0);}
}
.page-trans-split-x::before, .page-trans-split-x::after{
  content:'';
  position:absolute;
  background-color: inherit;
  width:100%;
  height:49.999%;
  animation-duration: inherit;
  animation-delay: inherit;
}
.page-trans-split-x::before{
    animation-name: page-trans-split-x-top;
    top:0;
}
.page-trans-split-x::after{
    animation-name: page-trans-split-x-bottom;
    top:50.1%;
}

/* Split Y */
.page-trans-split-y{animation-name: page-trans-fade-split-y;}

@keyframes page-trans-fade-split-y {
  0% {opacity:1;visibility: visible;-webkit-transform: none;transform: none;}
  50% {opacity:1;-webkit-transform: translate3d(0, +100%, 0);transform: translate3d(0, +100%, 0);}
  100% {opacity:0;visibility: hidden;-webkit-transform: translate3d(0, +100%, 0);transform: translate3d(0, +100%, 0);}
}
@keyframes page-trans-split-y-left {
  0% {-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
  50% {-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
  100% {-webkit-transform: translate3d(-100%, -100%, 0);transform: translate3d(-100%, -100%, 0);}
}
@keyframes page-trans-split-y-right {
  0% {-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
  50% {-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
  100% {-webkit-transform: translate3d(+100%, -100%, 0);transform: translate3d(+100%, -100%, 0);}
}
.page-trans-split-y::before, .page-trans-split-y::after{
  content:'';
  position:absolute;
  background-color: inherit;
  width:49.999%;
  height:100%;
  animation-duration: inherit;
  animation-delay: inherit;
}
.page-trans-split-y::before{
    animation-name: page-trans-split-y-left;
    left:0;
}
.page-trans-split-y::after{
    animation-name: page-trans-split-y-right;
    left:50.1%;
}