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

   @keyframes fade-out {
     to { opacity: 0; }
   }

   @keyframes slide-from-right {
     from { transform: translateX(200px); }
   }

   @keyframes slide-to-left {
     to { transform: translateX(-200px); }
   }

   .slide-it {
     view-transition-name: slide-it;
   }

   ::view-transition-old(slide-it) {
     animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
   }
   ::view-transition-new(slide-it) {
     animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
   }

   @keyframes slide-from-down {
    from { transform: translateY(200px); }
  }

  @keyframes slide-to-up {
    to { transform: translateY(-200px); }
  }

  .slide-vertical {
    view-transition-name: slide-vertical;
  }

  ::view-transition-old(slide-vertical) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-up;
  }
  ::view-transition-new(slide-vertical) {
    animation: 200ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-down;
  }
 
  .slide-login {
    animation: 0.4s ease-out 0.1s 1 both fade-in,
    0.4s ease-out 0.1s 1 both slide-from-down    
  }

.notransition * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0px);
  transition: 1s cubic-bezier(.5,0,0,1)
}