반복 자바 스크립트

Question

공을 움직이기위한 훌륭한 코드가있는 JSFiddle을 발견했습니다. 360도 회전시켜 볼 수 있습니다. 제가하고 싶은 것은 360도 회전하는 공을 끊임없이 회전시키는 것입니다. 나는 이것을 성취하려고 노력했지만 성공을 거두지 못했습니다. 이 자바 스크립트 조정에 도움이 감사 할 것입니다.

$(document).ready(function(){ 
    var s=$('.ball').position(); 
    var g=s.left; 
    var r=$('.ball').css('margin-left'); 
    $('.ball').css({'margin-left':'0px'}); 
    $('.ball').css({'margin-left':''+r+''}); 
    if(r=="0px") 
    { 
    $('.ball').css({'position':'absolute'}); 
    $('.ball').animate({'left':''+g+'px'}); 
    } 
    $('.ball').css({'transform': 'rotate(360deg)','-webkit-transform': 'rotate(360deg)','-moz-transform': 'rotate(360deg)'}); 
}); 

이 내가 그렇게 할 수 http://jsfiddle.net/996PJ/5/

Answer 1

CSS animation을 발견 JSFiddle입니다. Updated fiddle. 찾을 수

#box { 
 
    width: 900px; 
 
    height: 150px; 
 
    position: relative; 
 
    background: red; 
 
    overflow: hidden; 
 
} 
 
.ball { 
 
    width: 150px; 
 
    height: 150px; 
 
    animation: rotate 3s ease-in-out infinite; 
 
    margin: 0px auto; 
 
} 
 
.ball img { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
} 
 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    } 
 
}

<br/> 
 
<br/> 
 
<div id="box"> 
 
    <div class="ball"> 
 
    <img src="http://blog.wiziq.com/wp-content/uploads/2013/11/5-150x150.png" /> 
 
    </div> 
 
</div>