stacking-context-transform-wins-over-transition.html (931B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Transform animation winning over transition creates a stacking context 5 for correct style 6 </title> 7 <style> 8 span { 9 height: 100px; 10 width: 100px; 11 position: fixed; 12 background: green; 13 top: 50px; 14 } 15 @keyframes TransformNone { 16 from, to { transform: none; } 17 } 18 #test { 19 width: 100px; height: 100px; 20 background: blue; 21 transform: translateX(200px); 22 transition: transform 100s steps(1, start); 23 animation: TransformNone 100s; 24 } 25 </style> 26 <span></span> 27 <div id="test"></div> 28 <script> 29 window.addEventListener("load", () => { 30 var target = document.getElementById("test"); 31 getComputedStyle(target).transform; 32 33 // CSS animation wins over transition, so transition won't be visible during 34 // the CSS animation. 35 target.style.transform = "translateX(100px)"; 36 getComputedStyle(target).transform; 37 document.documentElement.classList.remove("reftest-wait"); 38 }); 39 </script>