1<style> 2div { 3 height: 100px; 4 width: 100px; 5 background: blue; 6} 7</style> 8<p> 9The four squares should make identical rotations at different rates without jumping. 10<div id="target1"></div> 11<div id="target2"></div> 12<div id="target3"></div> 13<div id="target4"></div> 14<script> 15var player1 = target1.animate([ 16 {transform: 'none'}, 17 {transform: 'rotate(90deg)'} 18], {duration: 1000, iterations: 200000}); 19 20var player2 = target2.animate([ 21 {transform: 'none', background: 'blue'}, 22 {transform: 'rotate(90deg)', background: 'blue'} 23], {duration: 1000, iterations: 200000}); 24 25var player3 = target3.animate([ 26 {transform: 'none'}, 27 {transform: 'rotate(90deg)'} 28], {duration: 1000, iterations: Infinity}); 29 30var player4 = target4.animate([ 31 {transform: 'none', background: 'blue'}, 32 {transform: 'rotate(90deg)', background: 'blue'} 33], {duration: 1000, iterations: Infinity}); 34 35setInterval(function() { 36 var playbackRate = (Math.random() - 0.5) * 5; 37 player1.playbackRate = playbackRate; 38 player2.playbackRate = playbackRate; 39 player3.playbackRate = playbackRate; 40 player4.playbackRate = playbackRate; 41}, 100); 42</script> 43