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