stacking-context-opacity-win-in-delay.html (491B)
1 <!DOCTYPE html> 2 <title> 3 Opacity animation winning over another opacity animation in delay phase 4 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 #test { 21 width: 100px; height: 100px; 22 background: blue; 23 animation: Opacity0 100s 100s, Opacity1 100s; 24 } 25 </style> 26 <span></span> 27 <div id="test"></div>