third_party/WebKit/ManualTests/animation/compositor-reverse.html

   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>