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