Why does the animation not repeat when removing and adding a css class?

Question

css

Hello. Why doesn't the animation repeat on every click? And how do I make the animation repeat?


In life, I have a slightly different picture:
There is a form and there is field validation in js. When you click on the submit form, fields that fail validation should be animated. When you click again, the animation should repeat. And in the end, after clicking on submitting the form, the class is deleted, then the validation and the class are added again, but there is no animation ...

Answer 1

const button = document.querySelector("button");
const target = document.querySelector("h1");
button.addEventListener("click", () => {
  target.classList.remove("error");  
  setTimeout(() => {
    target.classList.add("error");
  }, 0);
});

.error {
  animation: shake 350ms backwards ease-in-out;
  color: red;  
}

Answer 2