Home | History | Annotate | Download | only in animation 
      1 <style>
      2 div {
      3   height: 100px;
      4   width: 100px;
      5   background: blue;
      6   margin: 10px;
      7 }
      8 </style>
      9 <p>
     10 Tests forcing changes to currentTime for a compositor animation.
     11 <p>
     12 The three squares should make identical movements from left to right, jumping every 200ms.
     13 <div id="target1"></div>
     14 <div id="target2"></div>
     15 <div id="target3"></div>
     16 <script>
     17 var p1 = target1.animate([
     18   {transform: 'translate(0%)'},
     19   {transform: 'translate(800px)'}
     20 ], 1000);
     21 
     22 var p2 = target2.animate([
     23   {transform: 'translate(0px)'},
     24   {transform: 'translate(800px)'}
     25 ], 1000);
     26 
     27 var p3 = target3.animate([
     28   {transform: 'translate(800px)'},
     29   {transform: 'translate(0px)'}
     30 ], 1000);
     31 p3.reverse();
     32 
     33 setInterval(function() {
     34   p1.currentTime += 100;
     35   p2.currentTime += 100;
     36   p3.currentTime -= 100;
     37   if (p1.playState == 'finished')
     38     p1.play();
     39   if (p2.playState == 'finished')
     40     p2.play();
     41   if (p3.playState == 'finished')
     42     p3.play();
     43 }, 200);
     44 </script>
     45