1 <style> 2 div { 3 height: 100px; 4 width: 100px; 5 background: blue; 6 } 7 </style> 8 <p> 9 The two squares should <strong>smoothly</strong> rock backwards and forwards. 10 <div id="target1"></div> 11 <div id="target2"></div> 12 <script> 13 var player1 = target1.animate([ 14 {transform: 'none'}, 15 {transform: 'rotate(90deg)'} 16 ], 1000); 17 18 var player2 = target2.animate([ 19 {transform: 'none', background: 'blue'}, 20 {transform: 'rotate(90deg)', background: 'blue'} 21 ], 1000); 22 23 setInterval(function() { 24 player1.reverse(); 25 player2.reverse(); 26 }, 100); 27 </script> 28
