﻿@keyframes wobble-hor-top {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(-10px) rotate(6deg);
    }

    30% {
        transform: translateX(5px) rotate(-6deg);
    }

    45% {
        transform: translateX(-5px) rotate(3.6deg);
    }

    60% {
        transform: translateX(3px) rotate(-2.4deg);
    }

    75% {
        transform: translateX(-2px) rotate(1.2deg);
    }
}

.bell-animation {
    animation: wobble-hor-top 1.5s infinite both;
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.15, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

.message-animation {
    animation: jello-horizontal 2.5s infinite both;
}
