stacking-context-transform-win-in-delay.html (540B)
1 <!DOCTYPE html> 2 <title> 3 Transform animation winning over another transform 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 TransformNone { 15 from, to { transform: none; } 16 } 17 @keyframes Transform100px { 18 from, to { transform: translateX(100px); } 19 } 20 #test { 21 width: 100px; height: 100px; 22 background: blue; 23 animation: Transform100px 100s 100s, TransformNone 100s; 24 } 25 </style> 26 <span></span> 27 <div id="test"></div>