@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

body {
    font-family: "Kanit", sans-serif;
}

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

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

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

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

/* define animations for the old and new content */
::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;
}

/* tie the view transition to a given CSS class */
.sample-transition {
    view-transition-name: slide-it;
}