.animate-slide-down {
    animation: slideDown 1s ease-in-out both;
}

@keyframes slideDown {
    from {
        transform: translateY(-30%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-top {
    animation: slideTop 1s ease-in-out both;
}

[data-animate="animate-slide-top"] {
    transform: translateY(-30%);
    opacity: 0;
}

@keyframes slideTop {
    from {
        transform: translateY(30%);
        opacity: 0;
    }

    to {
        transform: translate(0);
        opacity: 1;
    }
}

.animate-slide-right {
    animation: slideRight 1s ease-in-out both;
}

[data-animate="animate-slide-right"] {
    opacity: 0;
}

@keyframes slideRight {
    from {
        transform: translateX(-50%);
        opacity: 0;
    }

    to {
        transform: translate(0);
        opacity: 1;
    }
}

.animate-slide-left {
    animation: slideLeft 1s ease-in-out both;
}

[data-animate="animate-slide-left"] {
    opacity: 0;
}


@keyframes slideLeft {
    from {
        transform: translateX(50%);
        opacity: 0;
    }

    to {
        transform: translate(0);
        opacity: 1;
    }
}