1<style> 2div { 3 height: 100px; 4 width: 100px; 5 background: blue; 6 margin: 10px; 7} 8</style> 9<p> 10Tests forcing changes to currentTime for a compositor animation. 11<p> 12The 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> 17var p1 = target1.animate([ 18 {transform: 'translate(0%)'}, 19 {transform: 'translate(800px)'} 20], 1000); 21 22var p2 = target2.animate([ 23 {transform: 'translate(0px)'}, 24 {transform: 'translate(800px)'} 25], 1000); 26 27var p3 = target3.animate([ 28 {transform: 'translate(800px)'}, 29 {transform: 'translate(0px)'} 30], 1000); 31p3.reverse(); 32 33setInterval(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