/* =======================
Fade In/Out Animation
======================= */
.ubx-anim-fade-in-out {
    animation: ubxFadeInOut 3s infinite;
}

@keyframes ubxFadeInOut {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* =======================
   Zoom In Animation
   ======================= */
.ubx-anim-zoom-in {
    animation: ubxZoomIn 3s infinite;
}

@keyframes ubxZoomIn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* =======================
   Slide In (Left) Animation
   ======================= */
.ubx-anim-slide-in-left {
    animation: ubxSlideInLeft 3s infinite;
}

@keyframes ubxSlideInLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* =======================
   Flip Animation
   ======================= */
.ubx-anim-flip {
    animation: ubxFlip 3s infinite;
}

@keyframes ubxFlip {
    0% {
        transform: rotateY(0);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

/* =======================
   Rotate Animation
   ======================= */
.ubx-anim-rotate {
    animation: ubxRotate 3s infinite;
}

@keyframes ubxRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =======================
   Blur In/Out Animation
   ======================= */
.ubx-anim-blur-in-out {
    animation: ubxBlurInOut 3s infinite;
}

@keyframes ubxBlurInOut {

    0%,
    100% {
        filter: blur(5px);
    }

    50% {
        filter: blur(0);
    }
}

/* =======================
   Bounce Scale Animation
   ======================= */
.ubx-anim-bounce-scale {
    animation: ubxBounceScale 3s infinite;
}

@keyframes ubxBounceScale {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* =======================
   Skew Animation
   ======================= */
.ubx-anim-skew-effect {
    animation: ubxSkewEffect 3s infinite;
}

@keyframes ubxSkewEffect {
    0% {
        transform: skew(0deg, 0deg);
    }

    50% {
        transform: skew(10deg, 10deg);
    }

    100% {
        transform: skew(0deg, 0deg);
    }
}

/* =======================
   3D Rotate Animation
   ======================= */
.ubx-anim-rotate-3d {
    animation: ubxRotate3D 3s infinite;
}

@keyframes ubxRotate3D {
    0% {
        transform: rotate3d(1, 1, 0, 0deg);
    }

    100% {
        transform: rotate3d(1, 1, 0, 360deg);
    }
}

/* =======================
   Parallax Hover Animation
   ======================= */
.ubx-anim-parallax-hover {
    transform: translateZ(0);
    transition: transform 1s ease-out;
}

.ubx-anim-parallax-hover:hover {
    transform: scale(1.1) translateY(-10px);
}