blob: b0535b4e26b30b4892c9732ac3f6bfdcae9bf650 [file] [log] [blame]
<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>