stop-animation-on-discarded-pseudo-element.html (794B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <style> 4 @keyframes anim { 5 0% { background-color: red; } 6 100% { background-color: red; } 7 } 8 #target.x::before, 9 #target.y::before { 10 content: ""; 11 position: absolute; 12 width: 100px; 13 height: 100px; 14 } 15 #target.x::before { 16 animation: anim 100s infinite; 17 } 18 </style> 19 <div id="target"></div> 20 <script> 21 var target = document.getElementById('target'); 22 requestAnimationFrame(() => { 23 // Create ::before, start animation 24 target.className = 'x'; 25 requestAnimationFrame(() => { 26 // Remove ::before, stop animation 27 target.className = ''; 28 29 requestAnimationFrame(() => { 30 // Create ::before, should not be animating 31 target.className = 'y'; 32 document.documentElement.classList.remove('reftest-wait'); 33 }); 34 }); 35 }); 36 </script>