運行關鍵幀動畫點擊不止一次

Question

我有一個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 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?