OLD | NEW |
(Empty) | |
| 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 jump
ing. |
| 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> |
OLD | NEW |