Javascriptアニメーションを繰り返す

Question

ボールをアニメーションするための素晴らしいコードがあるJSFiddleを見つけました。360度回転させることができます。私がしたいことは、ボールが常に360度回転することです。それは連続的に回転する必要があります。私はこれを達成しようとしましたが、成功しませんでした。私はこの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)'}); 
}); 

これは私がそれを行うことができます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>