stacking-context-opacity-wins-over-transition.html (880B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Opacity animation winning over opacity 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 Opacity1 { 16 from, to { opacity: 1; } 17 } 18 #test { 19 width: 100px; height: 100px; 20 background: blue; 21 opacity: 1; 22 transition: opacity 100s steps(1, start); 23 animation: Opacity1 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).opacity; 32 33 // CSS animation wins over transitions, so transition won't be visible during 34 // the CSS animation. 35 target.style.opacity = 0; 36 getComputedStyle(target).opacity; 37 document.documentElement.classList.remove("reftest-wait"); 38 }); 39 </script>