@keyframes to-top-in {
        from {
            transform: translateY(-200%)
        }

        to {
            transform: translateY(0%)
        }
    }

    @keyframes to-top-out {
        from {
            transform: translateY(0%)
        }

        to {
            transform: translateY(-200%)
        }
    }

    @keyframes to-left-in {
        from {
            transform: translateX(-110%)
        }

        to {
            transform: translateX(0%)
        }
    }

    @keyframes to-left-out {
        from {
            transform: translateX(0%)
        }

        to {
            transform: translateX(-110%)
        }
    }