<style>
div {
  height: 100px;
  width: 100px;
  background: blue;
}
</style>
<p>
The four squares should make identical rotations at different rates without jumping.
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<div id="target4"></div>
<script>
var player1 = target1.animate([
  {transform: 'none'},
  {transform: 'rotate(90deg)'}
], {duration: 1000, iterations: 200000});

var player2 = target2.animate([
  {transform: 'none', background: 'blue'},
  {transform: 'rotate(90deg)', background: 'blue'}
], {duration: 1000, iterations: 200000});

var player3 = target3.animate([
  {transform: 'none'},
  {transform: 'rotate(90deg)'}
], {duration: 1000, iterations: Infinity});

var player4 = target4.animate([
  {transform: 'none', background: 'blue'},
  {transform: 'rotate(90deg)', background: 'blue'}
], {duration: 1000, iterations: Infinity});

setInterval(function() {
  var playbackRate = (Math.random() - 0.5) * 5;
  player1.playbackRate = playbackRate;
  player2.playbackRate = playbackRate;
  player3.playbackRate = playbackRate;
  player4.playbackRate = playbackRate;
}, 100);
</script>