@keyframes slideInLeftToRight {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

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

.left-to-right {
    animation-name: slideInLeftToRight;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes slideInRightToLeft {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

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

.right-to-left {
    animation-name: slideInRightToLeft;
    animation-duration: 1s;
    animation-iteration-count: 1;
}


@keyframes slideInBottomToTop {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.bottom-to-top {
    animation-name: slideInBottomToTop;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes slideInTopToBottom {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.top-to-bottom {
    animation-name: slideInTopToBottom;
    animation-duration: 1s;
    animation-iteration-count: 1;
}