cloud-ui.vusion/src/styles/animation.css

Vusion Cloud UI

/* @import 'vue2-animate/dist/vue2-animate.min.css'; */
@import 'animate.css';

:root {
    --animate-duration: 0.4s;
    /* --animate-delay: 1s;
    --animate-repeat: 1; */
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity var(--transition-duration-base);
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-fast-enter-active,
.fade-fast-leave-active {
    transition: opacity var(--transition-duration-fast);
}

.fade-fast-enter,
.fade-fast-leave-to {
    opacity: 0;
}

.animate__move {
    transition: transform var(--animate-duration);
}

.animate__list-leave-active {
    position: absolute;
}

/* Fading entrances  */
@keyframes fadeInDownSmall {
    from {
        opacity: 0;
        transform: translate3d(0, -50%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInDownSmall {
    animation-name: fadeInDownSmall;
}

@keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        transform: translate3d(-50%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInLeftSmall {
    animation-name: fadeInLeftSmall;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInRight {
    animation-name: fadeInRight;
}

@keyframes fadeInRightSmall {
    from {
        opacity: 0;
        transform: translate3d(50%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInRightSmall {
    animation-name: fadeInRightSmall;
}

@keyframes fadeInUpSmall {
    from {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInUpSmall {
    animation-name: fadeInUpSmall;
}

@keyframes fadeOutDownSmall {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }
}

.animate__fadeOutDownSmall {
    animation-name: fadeOutDownSmall;
}

@keyframes fadeOutLeftSmall {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-50%, 0, 0);
    }
}

.animate__fadeOutLeftSmall {
    animation-name: fadeOutLeftSmall;
}

@keyframes fadeOutRightSmall {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(50%, 0, 0);
    }
}

.animate__fadeOutRightSmall {
    animation-name: fadeOutRightSmall;
}

@keyframes fadeOutUpSmall {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -50%, 0);
    }
}

.animate__fadeOutUpSmall {
    animation-name: fadeOutUpSmall;
}

@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInTop {
    animation-name: fadeInTop;
}

@keyframes fadeOutTop {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.animate__fadeOutTop {
    animation-name: fadeOutTop;
}

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInBottom {
    animation-name: fadeInBottom;
}

@keyframes fadeOutBottom {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.animate__fadeOutBottom {
    animation-name: fadeOutBottom;
}