用javascript重新启动动画的最佳方式(不使用webkit)

Question

我正在编写一个交互式元素，当你点击它时，它会转向你。我只是有一个onclick事件，它添加了一个带有动画的类。不幸的是，在第一次播放后，动画不会重置。我发现一个问题问了同样的问题，但它对我来说太先进了，而且还使用了我不想使用的webkit。有没有一种简单的方法可以重置动画？

.susanb{
background-image:url('susanb.png');
background-size:contain;
width:18%; 
height:45%;
background-repeat:no-repeat;
margin-top:12%;
margin-left: 60%;
position:absolute;
}
.susanbstare{
animation-name: stare;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes stare{
0%{background-image: url('susanbstarin.png')}
99%{background-image: url('susanbstarin.png')}
100%{background-image: url('susanb.png')}
}

<div class="susanb" id="susan"><div style="width:100%;height:100%;position:absolute;" onclick="stare();"></div>
<script>
function stare(){
document.getElementById("susan").removeAttribute("class");
document.getElementById("susan").setAttribute("class", "susanb susanbstare");
}
</script>
</body>

Answer 1

.susanbstare {
animation: stare 2s infinite;
}

JS中的BTW，这是更好的

document.getElementById("susan").classList.toggle("susanbstare");

而不是这两行

document.getElementById("susan").removeAttribute("class");
document.getElementById("susan").setAttribute("class", "susanb susanbstare");