@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
    animation-name: fadeOut;
}

::view-transition-new(root) {
    animation-name: fadeIn;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

::view-transition-old(image-transition),
::view-transition-new(image-transition) {
    animation-duration: 0.5s;
}

::view-transition-old(image-transition) {
    animation-name: slideOutLeft;
}

::view-transition-new(image-transition) {
    animation-name: slideInRight;
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100px);
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}