Javascript 多次单击时运行关键帧动画

我有一个div，它有图像内容。我想实现动画，当我点击图像，但它只做第一次点击和下一次点击图像是无效的。什么是问题，我如何解决它

$(function () {
         $('div.c').bind('mousedown', function () {
             var $elem = $(this);
             $elem.stop(true)
             .css({ "-webkit-animation-name": "xi",
             "-webkit-animation-duration": "3s",
             "-webkit-animation-timing-function": "ease", 
             "-webkit-animation-delay": "1s",            
              })
              })})

及

---

可以使用第二个关键帧块重置动画，如下所示：

这里还有一个可能的解决方案，介绍如何在动画完成后重置动画：

---

您可以使用第二个关键帧块重置动画，如下所示：

这里还有一个可能的解决方案，介绍如何在动画完成后重置动画：

---

我认为当关键帧达到100%时，不要在下次单击时重置，因为当我刷新页面时，我可以再次执行动画。我建议将其添加到op^我认为当关键帧达到100%时，不要在下次单击时重置，因为当我刷新页面时，我可以再次执行动画。我建议将其添加到op中^

     @-webkit-keyframes xi{ 0% {
  left: 100px;
}

40% {
  left: 150px;
}

60% {
  left: 75px;
}

100% {
  left: 100px;
}}