@view-transition {
    navigation: auto;
}

/* Customize the default animation behavior */

::view-transition-group(root) {
    animation-duration: 0.5s;
}

/* Create a custom animation */

@keyframes move-out {
    from {
        opacity: 100;
        transform: translateX(0%);
    }

    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

@keyframes move-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 100;
        transform: translateX(0%);
    }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(root) {
    animation: 0.4s ease-in both move-out;

}

::view-transition-new(root) {
    animation: 0.4s ease-in both move-in;
}