使用javascript重新启动动画的最佳方法（不使用webkit）

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

.susanb{
背景图片：url（'susanb.png'）；
背景尺寸：包含；
宽度：18%；
身高：45%；
背景重复：无重复；
利润率最高：12%；
左缘：60%；
位置：绝对位置；
}
susanbstare先生{
动画名称：凝视；
动画持续时间：2秒；
动画填充模式：正向；
}
@关键帧凝视{
0%{背景图像：url（'susanbstarin.png'）}
99%{背景图像：url（'susanbstarin.png'）}
100%{背景图像：url（'susanb.png'）}
}

函数stare（）{
document.getElementById（“susan”）.removeAttribute（“类”）；
document.getElementById（“susan”）.setAttribute（“class”、“susanb-susanbstare”）；
}

顺便说一句，在JS中，这是更好的

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

而不是这两行

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

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