Você pode setar a propriedade do animation
para "none"
e usar setTimeout
que irá esvaziar a propriedade do animation
para vazio ""
e em seguida ele irá herdar a propriedade do CSS novamente.
Exemplo:
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
Quando você seta "none"
em uma animação, ela é automaticamente cancelada, voltando ao seu estado inicial. Ao esvaziar o estilo, ele assume o estilo do CSS e reinicia. Veja na imagem que o estilo aceita none
:

No caso de outros estilos, como width
, o comportamento é parecido, exceto que o width
não aceita none
. Veja um exemplo:
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">