stacking-context-transform-losing-css-animation-in-delay.html (711B)
1 <!DOCTYPE html> 2 <title> 3 CSS transform animation winning over web animation in delay phase creates 4 a stacking context 5 </title> 6 <style> 7 span { 8 height: 100px; 9 width: 100px; 10 position: fixed; 11 background: green; 12 top: 50px; 13 } 14 @keyframes TransformNone { 15 from, to { transform: none; } 16 } 17 #test { 18 width: 100px; height: 100px; 19 background: blue; 20 animation: TransformNone 100s; 21 } 22 </style> 23 <span></span> 24 <div id="test"></div> 25 <script> 26 document.getElementById("test") 27 .animate({ transform: ['translateX(100px)', 'translate(100px)'] }, 28 { duration: 100000, delay: 100000 }); 29 30 requestAnimationFrame(function() { 31 document.documentElement.classList.remove("reftest-wait"); 32 }); 33 </script>