stacking-context-transform-win-in-delay-on-main-thread.html (666B)
1 <!DOCTYPE html> 2 <title> 3 Transform animation winning over another transform 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 TransformNone { 15 from, to { transform: none; } 16 } 17 @keyframes Transform100px { 18 from, to { transform: translateX(100px); } 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: Transform100px 100s 100s, TransformNone 100s, Width 100s; 28 } 29 </style> 30 <span></span> 31 <div id="test"></div>