我想在css3中每点击一次动画图像

Question

我想在每次点击change_photo按钮时移动div，但此代码只运行一次，我不需要无限循环，每次点击时我都希望div移动。

是css：

<style> 
     @-webkit-keyframes myfirst 
{ 
0% {left:0px} 
100% {left:100%} 
} 
#images { 
    width: 1000px; 
    height: 300px; 
    overflow: hidden; 
    position: relative; 
    margin: 20px auto; 
} 
#im{ position:relative;} 
    </style> 

这是HTML代码：

<div id="images" style=""> 
    <img id="im" src="images/banner.jpg" 
      style="width: 833px; height: 179px;" /> 
      </div> 
      <input type="button" value="change_photo" onclick="animate();" /> 
    </div> 

<script> 
function animate() { 
     var im = document.getElementById("im"); 
     im.style.webkitAnimation = "myfirst 3s"; 
    } 
</script> 

Answer 1

使用CSS3 transitions-

#image{ 
-webkit-transition:all 2s; 
} 
#image:hover{ 
left:100px; 
} 

删除Javascript和关键帧规则，这将工作
编辑：
jsfiddle使用jquery.animate()

Answer 2

@-webkit-keyframes myfirst 
{ 
    0% {left:0} 
    50% {left:100%} 
    100% {left:0} 
}