1 <style> 2 div { 3 height: 100px; 4 width: 100px; 5 background: blue; 6 } 7 </style> 8 <p> 9 The 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> 15 var player1 = target1.animate([ 16 {transform: 'none'}, 17 {transform: 'rotate(90deg)'} 18 ], {duration: 1000, iterations: 200000}); 19 20 var player2 = target2.animate([ 21 {transform: 'none', background: 'blue'}, 22 {transform: 'rotate(90deg)', background: 'blue'} 23 ], {duration: 1000, iterations: 200000}); 24 25 var player3 = target3.animate([ 26 {transform: 'none'}, 27 {transform: 'rotate(90deg)'} 28 ], {duration: 1000, iterations: Infinity}); 29 30 var player4 = target4.animate([ 31 {transform: 'none', background: 'blue'}, 32 {transform: 'rotate(90deg)', background: 'blue'} 33 ], {duration: 1000, iterations: Infinity}); 34 35 setInterval(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
