stacking-context-transform-changing-keyframe-in-delay.html (722B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Changing keyframes to transform frames creates a stacking context even if the 5 animation is delay phase 6 </title> 7 <style> 8 span { 9 height: 100px; 10 width: 100px; 11 position: fixed; 12 background: green; 13 top: 50px; 14 } 15 #test { 16 width: 100px; height: 100px; 17 background: blue; 18 } 19 </style> 20 <span></span> 21 <div id="test"></div> 22 <script> 23 var anim = document.getElementById("test") 24 .animate({ width: ['100px', '100px'] }, 25 { delay: 100000, duration: 100000 }); 26 anim.ready.then(function() { 27 anim.effect.setKeyframes( 28 { transform: ['translate(0px)', 'translate(0px)'] }); 29 document.documentElement.classList.remove("reftest-wait"); 30 }); 31 </script>