/* fade */
.fade-enter {
    opacity: 0;
}
.fade-exit{
    opacity: 1;
}
.fade-enter-active{
    opacity: 1;
}
.fade-exit-active{
    opacity: 0;
}
.fade-enter-active,
.fade-exit-active{
    transition: opacity 1000ms;
}
/* fade 2 */
.fade2-enter {
    opacity: 0;
}
.fade2-exit{
    opacity: 1;
}
.fade2-enter-active{
    opacity: 1;
}
.fade2-exit-active{
    opacity: 0;
}
.fade2-enter-active,
.fade2-exit-active{
    transition: opacity 1000ms;
}

/* slide-left */
.slide-left-enter {
    transform: translateX(100%);
}
.slide-left-enter-active {
    transform: translateX(0%);
}
.slide-left-exit {
    transform: translateX(0%);
}
.slide-left-exit-active {
    transform: translateX(-100%);
}
.slide-left-enter-active,
.slide-left-exit-active {
    transition: opacity 1000ms, transform 1000ms;
}

/* slide-bottom */
.slide-bottom-enter {
    transform: translateY(-100%);
}
.slide-bottom-enter-active {
    transform: translateY(0%);
}
.slide-bottom-exit {
    transform: translateY(0%);
}
.slide-bottom-exit-active {
    transform: translateY(100%);
}
.slide-bottom-enter-active,
.slide-bottom-exit-active {
    transition: opacity 1000ms, transform 1000ms;
}

/* slide-right */
.slide-right-enter {
    transform: translateX(-100%);
}
.slide-right-enter-active {
    transform: translateX(0%);
}
.slide-right-exit {
    transform: translateX(0%);
}
.slide-right-exit-active {
    transform: translateX(100%);
}
.slide-right-enter-active,
.slide-right-exit-active {
    transition: opacity 1000ms, transform 1000ms;
}

/* slide-top */
.slide-top-enter {
    transform: translateY(100%);
}
.slide-top-enter-active {
    transform: translateY(0%);
}
.slide-top-exit {
    transform: translateY(0%);
}
.slide-top-exit-active {
    transform: translateY(-100%);
}
.slide-top-enter-active,
.slide-top-exit-active {
    transition: opacity 1000ms, transform 1000ms;
}

/* fade-slide-left */
.fade-slide-left-enter {
    opacity: 0;
    transform: translateX(100%);
}
.fade-slide-left-enter-active {
    opacity: 1;
    transform: translateX(0%);
}
.fade-slide-left-exit {
    opacity: 1;
    transform: translateX(0%);
}
.fade-slide-left-exit-active {
    opacity: 0;
    transform: translateX(-100%);
}
.fade-slide-left-enter-active,
.fade-slide-left-exit-active {
    transition: opacity 1000ms, transform 1000ms;
}

/* fade-slide-bottom */
.fade-slide-bottom-enter {
    opacity: 0;
    transform: translateY(-100%);
}
.fade-slide-bottom-enter-active {
    opacity: 1;
    transform: translateY(0%);
}
.fade-slide-bottom-exit {
    opacity: 1;
    transform: translateY(0%);
}
.fade-slide-bottom-exit-active {
    opacity: 0;
    transform: translateY(100%);
}
.fade-slide-bottom-enter-active,
.fade-slide-bottom-exit-active {
    transition: opacity 1000ms, transform 1000ms;
}

/* fade-slide-right */
.fade-slide-right-enter {
    opacity: 0;
    transform: translateX(-100%);
}
.fade-slide-right-enter-active {
    opacity: 1;
    transform: translateX(0%);
}
.fade-slide-right-exit {
    opacity: 1;
    transform: translateX(0%);
}
.fade-slide-right-exit-active {
    opacity: 0;
    transform: translateX(100%);
}
.fade-slide-right-enter-active,
.fade-slide-right-exit-active {
    transition: opacity 1000ms, transform 1000ms;
}

/* fade-slide-top */
.fade-slide-top-enter {
    opacity: 0;
    transform: translateY(100%);
}
.fade-slide-top-enter-active {
    opacity: 1;
    transform: translateY(0%);
}
.fade-slide-top-exit {
    opacity: 1;
    transform: translateY(0%);
}
.fade-slide-top-exit-active {
    opacity: 0;
    transform: translateY(-100%);
}
.fade-slide-top-enter-active,
.fade-slide-top-exit-active {
    transition: opacity 1000ms, transform 1000ms;
}