@keyframes enter-from-left {
    from {
        transform: translateX(-100%) scale(0);
    }
    to {
        transform: translateX(0) scale(1);
    }
}
@keyframes enter-from-right {
    from {
        transform: translateX(100%) scale(0);
    }
    to {
        transform: translateX(0) scale(1);
    }
}
@keyframes enter-from-top {
    from {
        transform: translateY(-100%) scale(0);
    }
    to {
        transform: translateY(0) scale(1);
    }
}
@keyframes exit-to-left {
    from {
        transform: translateX(100%) scale(1);
    }
    to {
        transform: translateX(0) scale(0);
    }
}
@keyframes exit-to-right {
    from {
        transform: translateX(-100%) scale(1);
    }
    to {
        transform: translateX(0) scale(0);
    }
}
@keyframes exit-to-right {
    from {
        transform: translateX(-100%) scale(1);
    }
    to {
        transform: translateX(0) scale(0);
    }
}
@keyframes exit-to-bottom {
    from {
        transform: translateY(-100%) scale(1);
    }
    to {
        transform: translateY(0) scale(0);
    }
}