reframe-and-animation-starts-at-the-same-time.html (634B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <style> 4 @keyframes anim { 5 from { background-color: rgb(255, 255, 255); } 6 to { background-color: rgb(255, 255, 255); } 7 } 8 #target::before { 9 content: 'initial'; 10 background-color: rgb(0, 0, 0); 11 height: 100px; 12 width: 100px; 13 position: absolute; 14 } 15 #target.hover::before{ 16 content: ''; 17 animation: anim 100s steps(1, start); 18 } 19 </style> 20 <div id="target"></div> 21 <script> 22 window.addEventListener("load", () => { 23 target.className = 'hover'; 24 target.addEventListener('animationstart', () => { 25 document.documentElement.classList.remove('reftest-wait'); 26 }); 27 }); 28 </script> 29 </html>