多次点击运行关键帧动画

【问题标题】：run keyframes-animation on click more than once多次点击运行关键帧动画
【发布时间】：2023-05-14 14:21:02
【问题描述】：

我有一个包含图像内容的 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;
}}

【问题讨论】：

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

标签： javascript jquery css webkit-animation

【解决方案1】：

您可以按照此处的建议使用第二个关键帧块重置动画： Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?

这里还有一个关于如何在动画完成后重置动画的可能解决方案： Is there a callback on completion of a CSS3 animation?

【讨论】：