| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: blue; |
| } |
| </style> |
| |
| Player modified then pause()/play() on and off the compositor. The two boxes should have identical motions. |
| <br> |
| |
| <div id="target1"></div> |
| <div id="target2"></div> |
| |
| <script> |
| var player1 = target1.animate([ |
| {left: '0px'}, |
| {left: '800px'}, |
| ], { |
| duration: 1000, |
| direction: 'alternate', |
| iterations: Infinity, |
| }); |
| |
| var player2 = target2.animate([ |
| {transform: 'translate(0px)'}, |
| {transform: 'translate(800px)'}, |
| ], { |
| duration: 1000, |
| direction: 'alternate', |
| iterations: Infinity, |
| }); |
| |
| setInterval(function() { |
| player1.currentTime = 0; |
| player1.pause(); |
| player1.play(); |
| player2.currentTime = 0; |
| player2.pause(); |
| player2.play(); |
| }, 500); |
| </script> |