WebkitTransform not fluent

Question

I am trying to rotate an element using jquery. My problem is that the element doesn't rotate fluently, but the speed is being increased from the beginning and decreased in before the end of the rotation. Is there a way to rotate element fluently? Thanks.

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

Answer 1

Try this. Use linear option in -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>