重複Javascript動畫

-1

我發現了一個JSFiddle，它有一些很棒的代碼來動畫一個球 - 它將它旋轉360度。我想要做的是讓球不斷旋轉360度 - 它需要不斷轉動。我試圖做到這一點，但沒有成功。我將不勝感激在調整此JavaScript的任何幫助。重複Javascript動畫

$(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)'}); 
});

這是我的jsfiddle發現http://jsfiddle.net/996PJ/5/

來源

2016-07-22 gillers322

發現這個http://stackoverflow.com/questions/12019159/infinite-rotation-animation-using-css-and-javascript退房的jsfiddle：http://jsfiddle.net/zc4wt61L/2/ – yuriy636

這是完美的 - 謝謝 – gillers322

CSS animation可以做到這一點。 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>

來源

2016-07-22 15:27:50 Pugazh

重複Javascript動畫

回答

相關問題