Pointless CSS

@keyframes obnoxiousEffect {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(10deg) scale(1.2); }
    50% { transform: rotate(-10deg) scale(0.9); }
    75% { transform: rotate(5deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}
.obnoxious {
    text-align: center;
	display: inline-block;
    transition: all 0.3s ease-in-out; /* Smooth effect */
}

.obnoxious:hover {
    animation: obnoxiousEffect 1s infinite alternate ease-in-out, 
               shake 0.2s infinite linear;
}

.obnoxious.animated {
    animation: obnoxiousEffect 1s infinite alternate ease-in-out, 
               shake 0.2s infinite linear;
}

@keyframes obnoxiousEffect {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(10deg) scale(1.2); }
    50% { transform: rotate(-10deg) scale(0.9); }
    75% { transform: rotate(5deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}
.obnoxious {
    text-align: center;
	display: inline-block;
    transition: all 0.3s ease-in-out; /* Smooth effect */
}

.obnoxious:hover {
    animation: obnoxiousEffect 1s infinite alternate ease-in-out, 
               shake 0.2s infinite linear;
}

.obnoxious.animated {
    animation: obnoxiousEffect 1s infinite alternate ease-in-out, 
               shake 0.2s infinite linear;
}

document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("startAnimation").addEventListener("click", function () {
        document.querySelector(".obnoxious").classList.toggle("animated");
    });
});