﻿@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.bounce-effect:hover {
    animation: bounce 0.5s ease-in-out infinite;
}
/* Bounce In */
@keyframes bounceIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
        opacity: 1;
    }

    80% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.bounce-in-effect {
    animation: bounceIn 0.75s ease-in-out;
}



/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in-effect {
    animation: fadeIn 1s ease-in;
}
/* Slide In */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.slide-in-effect {
    animation: slideIn 1s ease-in-out;
}

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rotate-effect:hover {
    animation: rotate 1s linear infinite;
}
/* Pulse */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.pulse-effect:hover {
    animation: pulse 0.5s ease-in-out infinite;
}
/* Pulse */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.shake-effect:hover {
    animation: shake 0.5s ease-in-out infinite;
}

/* Zoom In */
@keyframes zoomIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.zoom-in-effect {
    animation: zoomIn 0.5s ease-in-out;
}
/* Wobble */
@keyframes wobble {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-25px) rotate(-5deg);
    }

    30% {
        transform: translateX(20px) rotate(3deg);
    }

    45% {
        transform: translateX(-15px) rotate(-3deg);
    }

    60% {
        transform: translateX(10px) rotate(2deg);
    }

    75% {
        transform: translateX(-5px) rotate(-1deg);
    }

    100% {
        transform: translateX(0);
    }
}

.wobble-effect:hover {
    animation: wobble 1s ease-in-out;
}


/* zoom box */
@keyframes zoomInOut {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.zoom-box {
    animation: zoomInOut 3s ease-in-out infinite;
}


/* bounce box */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.bounce-box {
    animation: bounce 1s infinite ease-in-out;
}

/* Blure Box */

@keyframes blurInOut {
    0%, 100% {
        opacity: 1;
        filter: blur(0px);
    }

    50% {
        opacity: 0.2;
        filter: blur(5px);
    }
}
.blur-box {
    animation: blurInOut 1.5s ease-in-out infinite;
}

