.slide-in-top-enter {
    opacity: 0;
    transform: translateY(-100%);
}

.slide-in-top-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 800ms, transform 800ms;
}

.slide-in-top-exit {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-top-exit-active {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 800ms, transform 800ms;
}

.slide-in-left-enter {
    opacity: 0;
    transform: translateX(-100%);
}

.slide-in-left-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 2000ms, transform 2000ms;
}

.slide-in-left-exit {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-left-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 2000ms, transform 2000ms;
}