.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: none;transform: none;}
    50% {transform: translate3d(-100%, 0, 0);-webkit-transform: translate3d(-100%, 0, 0);}
    100% {transform: translate3d(-100%, -100%, 0);-webkit-transform: translate3d(-100%, -100%, 0);}
  }
  @keyframes page-trans-split-x-bottom {
    0% {-webkit-transform: none;transform: none;}
    50% {transform: translate3d(-100%, 0, 0);-webkit-transform: translate3d(-100%, 0, 0);}
    100% {transform: translate3d(-100%, +100%, 0);-webkit-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: none;transform: none;}
    50% {transform: translate3d(0, -100%, 0);-webkit-transform: translate3d(0, -100%, 0);}
    100% {transform: translate3d(-100%, -100%, 0);-webkit-transform: translate3d(-100%, -100%, 0);}
  }
  @keyframes page-trans-split-y-right {
    0% {-webkit-transform: none;transform: none;}
    50% {transform: translate3d(0, -100%, 0);-webkit-transform: translate3d(0, -100%, 0);}
    100% {transform: translate3d(+100%, -100%, 0);-webkit-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%;
  }