| <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> |