Repeat a CSS animation every time I click the button (with Javascript)

Question

As I do to repeat an animation every time I click on some element with javascript, I tried to do, but it only works once (on the first click), after clicking, the animation is already in the HTML code (in case I see by inspecting element), so it’s no use me clicking again, because it doesn’t work.

I’m doing it this way:

variavel.onclick = function efeito() {
    this.style.animation = 'nomeAnimacao 1s linear';
   }

Answer 1

You can first put the animation with nothing:

this.style.animation = '';

And then apply the animation again. The detail is that you have to give a short interval of time for the change to be interpreted. You can do this by re-applying the value within one setTimeout:

setTimeout(() => this.style.animation = 'nomeAnimacao 1s linear', 5);

Take the example:

const botaoAnimar = document.getElementById("animar");
const caixa = document.querySelector(".caixa");

botaoAnimar.addEventListener("click", ()=> {
  caixa.style.animation = "";
  setTimeout(() => caixa.style.animation = "deslizar 1s linear", 5);
});

.caixa {
  background-color:lightGreen;
  width:100px;
  height:100px;
}

@keyframes deslizar{
  0%   { margin-left: 0px; }
  50%  { margin-left: 200px; }
  100% { margin-left: 0px; }
}

<div class="caixa"></div>
<button id="animar">Animar</button>

Answer 2

You can set the property of the animation for "none" and use setTimeout which will empty the property of animation for empty "" and then it will inherit the CSS property again.

Example:

variavel = document.getElementById("butt");

variavel.onclick = function efeito() {
   var e = document.getElementById("div");
   e.style.animation = "none";
   setTimeout(function() {
      e.style.animation = "";
   }, 100);
}

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: nomeAnimacao 4s linear;
}

@keyframes nomeAnimacao {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

<div id="div"></div>
<br>
<button id="butt" type="button">Reiniciar</button>

Edit

When you arrow "none" in an animation, it is automatically canceled, returning to its initial state. When emptying the style, it takes on the CSS style and restarts. See in the image that the style accepts none:

In the case of other styles, such as width, the behavior is similar, except that the width unaccepted none. Take an example:

variavel = document.getElementById("dvd");

variavel.onclick = function efeito() {
   var e = document.getElementById("div");
   e.style.width = "100px";
   setTimeout(function() {
      e.style.width = "";
   }, 2000);
}

div{
   width: 300px;
   height: 50px;
   background: red;
}

<div id="div">Clique no botão e aguarde 2s</div>
<input type="button" value="ok" id="dvd">