单击多次运行关键帧动画

我有一个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", }) })}) 

和

  @-webkit-keyframes xi{ 0% { left: 100px; } 40% { left: 150px; } 60% { left: 75px; } 100% { left: 100px; }} 

Answer 1

您可以使用第二个关键帧块重置动画，如下所示： Css和jQuery：如何触发将CSS3动画元素重新定位回动画之前的位置？

这里还有一个关于如何在动画完成时重置动画的可能解决方案： 完成CSS3动画后是否有回调？