单击多次运行关键帧动画

时间:2012-07-01 04:43:07

标签: javascript jquery css css3 webkit-animation

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

1 个答案:

答案 0 :(得分: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?