1<html> 2<style> 3div { 4 position: relative; 5 height: 100px; 6 width: 100px; 7 background: blue; 8 -webkit-transform: translateZ(0); 9 -webkit-animation-direction: alternate; 10 -webkit-animation-duration: 2s; 11 -webkit-animation-timing-function: linear; 12 -webkit-animation-iteration-count: 6; 13} 14 15.test0 { 16 -webkit-animation-delay: -30s; 17} 18 19.test1 { 20 -webkit-animation-delay: -3s; 21} 22 23.test2 { 24 -webkit-animation-delay: 0s; 25} 26 27.test3 { 28 -webkit-animation-delay: 3s; 29} 30 31.anim-left { 32 -webkit-animation-name: anim-left; 33 z-index: 100; 34} 35 36.anim-transform { 37 -webkit-animation-name: anim-transform; 38 z-index: 200; 39} 40 41@-webkit-keyframes anim-left { 42 0% { 43 left: 0px; 44 } 45 100% { 46 left: 300px; 47 } 48} 49 50@-webkit-keyframes anim-transform { 51 0% { 52 -webkit-transform: translateX(0px); 53 } 54 100% { 55 -webkit-transform: translateX(300px); 56 } 57} 58</style> 59<body> 60<p> 61Each section below has two boxes, the top runs on the main thread, the bottom 62on the compositor. The animations should be identical but start at different 63times. 64</p><p> 65This test is successful if the boxes are mostly in sync (there might be a small 66offset between them). 67</p> 68<hr> 69 70Start delay -30s (starts 30 seconds into animation by which the animation has finished, hence no animation) 71<br> 72<div class='test0 anim-left'></div> 73<div class='test0 anim-transform'></div> 74 75Start delay -3s (starts 3 seconds into the animation, should finish first.) 76<br> 77<div class='test1 anim-left'></div> 78<div class='test1 anim-transform'></div> 79 80Start delay 0s (no start delay, should finish second.) 81<br> 82<div class='test2 anim-left'></div> 83<div class='test2 anim-transform'></div> 84 85Start delay 3s (starts 3 seconds after page load, should finish last.) 86<br> 87<div class='test3 anim-left'></div> 88<div class='test3 anim-transform'></div> 89</body> 90</html> 91