@import './variables.scss';
$speed: 200ms;

/*fadeLeft*/

.fadeLeft-enter-active {
    animation: fadeLeftIn $speed ease-in-out;
}

.fadeLeft-leave-active {
    animation: fadeLeftOut $speed cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes fadeLeftIn {
    0% {
        opacity: 0;
        transform: translate3d(-10%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeLeftOut {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translate3d(-10%, 0, 0);
    }
}

/*fadeRight*/

.fadeRight-enter-active {
    animation: fadeRightIn $speed ease-in-out;
}

.fadeRight-leave-active {
    animation: fadeRightOut $speed cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes fadeRightIn {
    0% {
        opacity: 0;
        transform: translate3d(10%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeRightOut {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translate3d(10%, 0, 0);
    }
}

/*fadeUp*/
.fadeUp-enter-active {
    animation: fadeUpIn $speed ease-in-out;
}

.fadeUp-leave-active {
    animation: fadeUpOut $speed cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes fadeUpIn {
    0% {
        opacity: 0;
        transform: translate3d(0, -10%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeUpOut {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -10%, 0);
    }
}

/*fadeDown*/

.fadeDown-enter-active {
    animation: fadeDownIn $speed ease-in-out;
}

.fadeDown-leave-active {
    animation: fadeDownOut $speed cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes fadeDownIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 10%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeDownOut {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 10%, 0);
    }
}

/*fade*/
.fade-enter-active {
    animation: fadeIn $speed ease-in-out;
}

.fade-leave-active {
    animation: fadeOut $speed cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*zoom*/

.zoom-enter-active {
    animation: zoomIn $speed ease-in-out;
}

.zoom-leave-active {
    animation: zoomOut $speed cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform:  scale(1.1);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}



//.slide-right
.slide-right-enter-active {
    animation: slide-right-in .3s ease-in-out;
}

.slide-right-leave-active {
    animation: slide-right-out .2s ease-in-out;
}

@keyframes slide-right-in {
    0% {
        transform: translateX(30px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 10;
    }
}

@keyframes slide-right-out {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(30px);
        opacity: 0;
    }
}

//.slide-left
.slide-left-enter-active {
    animation: slide-left-in .3s ease-in-out;
}

.slide-left-leave-active {
    animation: slide-left-out .2s ease-in-out;
}

@keyframes slide-left-in {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-left-out {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-30px);
        opacity: 0;
    }
}