stacking-context-opacity-win-in-delay-on-main-thread.html (617B)
1 <!DOCTYPE html> 2 <title> 3 Opacity animation winning over another opacity animation in delay phase 4 on the main-thread creates 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 Opacity1 { 15 from, to { opacity: 1; } 16 } 17 @keyframes Opacity0 { 18 from, to { opacity: 0; } 19 } 20 // For preventing running on the compositor. 21 @keyframes Width { 22 from, to { width: 100px; } 23 } 24 #test { 25 width: 100px; height: 100px; 26 background: blue; 27 animation: Opacity0 100s 100s, Opacity1 100s, Width 100s; 28 } 29 </style> 30 <span></span> 31 <div id="test"></div>