WebkitTransformが流暢でない

Question

jqueryを使用して要素を回転しようとしています。私の問題は、要素がうまく回転しないが、速度が最初から増加しており、回転が終了する前に減少しているということです。要素を流暢に回転させる方法はありますか？ありがとう。

rotatingElement.css({ 
    WebkitTransform: 'rotate(' + max_rotation + 'deg)', 
    WebkitTransitionDuration: rotating_time + 's' 
}); 

Answer 1

これを試してください。 -webkit-animation

div { 
 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f00; 
 
    -webkit-animation: spin 1s infinite linear; 
 
} 
 
@-webkit-keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 
p { 
 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
    -webkit-animation: spin 3s infinite; 
 
}

whith linear option 
 
<div></div> 
 
<br>whithout linear option 
 
<p></p>

で linearオプションを使用します