| <style> |
| div { |
| height: 100px; |
| width: 100px; |
| background: blue; |
| } |
| </style> |
| <p> |
| The two squares should <strong>smoothly</strong> rock backwards and forwards. |
| <div id="target1"></div> |
| <div id="target2"></div> |
| <script> |
| var player1 = target1.animate([ |
| {transform: 'none'}, |
| {transform: 'rotate(90deg)'} |
| ], 1000); |
| |
| var player2 = target2.animate([ |
| {transform: 'none', background: 'blue'}, |
| {transform: 'rotate(90deg)', background: 'blue'} |
| ], 1000); |
| |
| setInterval(function() { |
| player1.reverse(); |
| player2.reverse(); |
| }, 100); |
| </script> |