Is there a feasible way to trigger CSS keyframe animation using JS?

Question

Naturally, we can create a CSS animation using keyframes, and control it from there.

However, ideally, I would like to trigger this animation from a button click - s

Answer 1

If you want to make the animation happen and always end before allowing the event listener to trigger it again, I would suggest to control the behaviour like this:

// Add this to your event listener
if (!element.classList.contains("myClass")) {
    element.className = "myClass";
    setTimeout(function() {
        element.classList.remove("myClass");
    }, 1000); //At least the time the animation lasts
}