marker-reframe-and-animation-starts-at-the-same-time.html (699B)
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::marker { 9 content: 'initial'; 10 background-color: rgb(0, 0, 0); 11 height: 100px; 12 width: 100px; 13 position: absolute; 14 } 15 #target.hover::marker{ 16 content: ''; 17 animation: anim 100s steps(1, start); 18 } 19 #target { 20 display: list-item; 21 list-style-position: inside; 22 } 23 </style> 24 <div id="target"></div> 25 <script> 26 window.addEventListener("load", () => { 27 target.className = 'hover'; 28 target.addEventListener('animationstart', () => { 29 document.documentElement.classList.remove('reftest-wait'); 30 }); 31 }); 32 </script> 33 </html>