/* Slide in from the right */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide out to the left */
@keyframes slideOutToLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Slide in from the left */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide out to the right */
@keyframes slideOutToRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Apply these classes to your elements */
.slide-in-right {
    animation: slideInFromRight 1s ease forwards;
}

.slide-out-left {
    animation: slideOutToLeft 1s ease forwards;
}

.slide-in-left {
    animation: slideInFromLeft 1s ease forwards;
}

.slide-out-right {
    animation: slideOutToRight 1s ease forwards;
}