.transition-effect {
    width: 100%;
    height: 100%;
    position:fixed;
    bottom: 0;
    left: 0;
    background-color: white;
    background-position: bottom;
    z-index: 999;
    animation: close-transition 800ms 150ms forwards;
}
.transition-effect.open {
    top: 0;
    animation: close-transition 800ms 150ms forwards, open-transition 800ms 150ms forwards;
}



.move-top {
    opacity: 0;
    transform: translateY(500px);
}
.move-right {
    opacity: 0;
    transform: translateX(-500px);
}
.move-bottom {
    opacity: 0;
    transform: translateY(-500px);
}
.move-left {
    opacity: 0;
    transform: translateX(500px);
}
.reset-move {
    opacity: 1;
    animation: reset-move 500ms forwards;
}