@keyframes mx-slide-up-enter{
    from {
        transform: translate3d(0,100%,0);
    }
}

@keyframes mx-slide-up-leave{
    to {
        transform: translate3d(0,100%,0);
    }
}

@keyframes mx-slide-down-enter {
    from {
        transform: translate3d(0,-100%,0);
    }
}

@keyframes mx-slide-down-leave {
    to {
        transform: translate3d(0,-100%,0);
    }
}

@keyframes mx-slide-left-enter{
    from {
        transform: translate3d(-100%,0,0);
    }
}

@keyframes mx-slide-left-leave{
    to {
        transform: translate3d(-100%,0,0);
    }
}

@keyframes mx-slide-right-enter {
    from {
        transform: translate3d(100%,0,0);
    }
}

@keyframes mx-slide-right-leave {
    to{
        transform: translate3d(100%,0,0);
    }
}

.mx-slide-up{
    &-enter-active{
        animation: mx-slide-up-enter $duration $time-function both;
    }

    &-leave-active{
        animation: mx-slide-up-leave $duration $time-function both;
    }
}

.mx-slide-down{
    &-enter-active{
        animation: mx-slide-down-enter $duration $time-function both;
    }

    &-leave-active{
        animation: mx-slide-down-leave $duration $time-function both;
    }
}


.mx-slide-left{
    &-enter-active{
        animation: mx-slide-left-enter $duration $time-function both;
    }

    &-leave-active{
        animation: mx-slide-left-leave $duration $time-function both;
    }
}

.mx-slide-right{
    &-enter-active{
        animation: mx-slide-right-enter $duration $time-function both;
    }

    &-leave-active{
        animation: mx-slide-right-leave $duration $time-function both;
    }
}