| <style> |
| div { |
| height: 100px; |
| width: 100px; |
| background: blue; |
| margin: 10px; |
| } |
| </style> |
| <p> |
| Tests forcing changes to currentTime for a compositor animation. |
| <p> |
| The three squares should make identical movements from left to right, jumping every 200ms. |
| <div id="target1"></div> |
| <div id="target2"></div> |
| <div id="target3"></div> |
| <script> |
| var p1 = target1.animate([ |
| {transform: 'translate(0%)'}, |
| {transform: 'translate(800px)'} |
| ], 1000); |
| |
| var p2 = target2.animate([ |
| {transform: 'translate(0px)'}, |
| {transform: 'translate(800px)'} |
| ], 1000); |
| |
| var p3 = target3.animate([ |
| {transform: 'translate(800px)'}, |
| {transform: 'translate(0px)'} |
| ], 1000); |
| p3.reverse(); |
| |
| setInterval(function() { |
| p1.currentTime += 100; |
| p2.currentTime += 100; |
| p3.currentTime -= 100; |
| if (p1.playState == 'finished') |
| p1.play(); |
| if (p2.playState == 'finished') |
| p2.play(); |
| if (p3.playState == 'finished') |
| p3.play(); |
| }, 200); |
| </script> |