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

run keyframes-animation on click more than once

本文关键字：关键帧 动画 运行 单击      更新时间：2023-09-26

我有一个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;
}}

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

以下是有关如何在动画完成后重置动画的可能解决方案：CSS3 动画完成后是否有回调？

相关文章：