@keyframes slide-down {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slide-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateY(0);
    }
}

.slide-down {
    animation-name: slide-down;
    animation-duration: 0.5s;
    transition-timing-function: ease-in;
}

.slide-up {
    animation-name: slide-up;
    animation-duration: 0.5s;
    transition-timing-function: ease-in;
}

.slide-left {
    animation-name: slide-left;
    animation-duration: 0.5s;
    transition-timing-function: ease-in;
}

.slide-right {
    animation-name: slide-right;
    animation-duration: 0.5s;
    transition-timing-function: ease-in;
}