@keyframes ToLeft {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%);
        opacity: 0;
    }
}

@keyframes FromRight {
    0% {
        transform: translateX(50%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
    animation-name: ToLeft;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-duration: 250ms;
    animation-fill-mode: forwards;
}

::view-transition-new(root) {
    animation-name: FromRight;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-duration: 250ms;
    animation-fill-mode: forwards;
}