@view-transition {
    navigation: auto;
    types: slide, forwards;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 350ms;
  animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Old page (slides left slightly + fades) */
::view-transition-old(root) {
  animation-name: ios-old-out;
}

/* New page (slides in from right) */
::view-transition-new(root) {
  animation-name: ios-new-in;
}

@keyframes ios-new-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0%);
    }
  }

@keyframes ios-old-out {
from {
    transform: translateX(0%) scale(1);
    opacity: 1;
}
to {
    transform: translateX(-30%) scale(0.98);
    opacity: 0.85;
}
}