@keyframes shake {

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

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

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

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }

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

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

    50% {
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}


@keyframes wiggle {

    0%,
    7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-15deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    25% {
        transform: rotateZ(-10deg);
    }

    30% {
        transform: rotateZ(6deg);
    }

    35% {
        transform: rotateZ(-4deg);
    }

    40%,
    100% {
        transform: rotateZ(0);
    }
}

@keyframes float {
    0% {
        box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.1);
        transform: translatey(0px);
    }

    50% {
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.2);
        transform: translatey(-5px);
    }

    100% {
        box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.1);
        transform: translatey(0px);
    }
}

.animation-shake,
.shake {
    animation: shake 0.5s ease-in-out;
}

.animation-bounce {
    animation: bounce 0.5s ease-in-out;

}

.animation-heartbeat {
    animation: heartbeat 1.5s infinite;

}

.animation-pulse {
    animation: pulse 1.5s infinite;

}


.animation-wiggle {
    animation: wiggle 1.5s ease-in-out;

}

.animation-float {
    animation: float 1.5s infinite;

}