in-visibility-hidden-animation-marker-pseudo-element.html (805B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <title>In visibility hidden color animation on pseudo element</title> 4 <style> 5 6 @keyframes color { 7 0% { color: black } 8 1% { color: blue } 9 100% { color: blue } 10 } 11 12 div::marker { 13 visibility: visible; 14 content: "Color Animation"; 15 animation: color 0.1s 1 forwards; 16 } 17 18 div { 19 color: black; 20 visibility: hidden; 21 display: list-item; 22 list-style-position: inside; 23 } 24 25 </style> 26 <div id="target">color animation on visible pseudo element attached to invisible element</div> 27 <script> 28 29 document.getElementById("target").addEventListener("animationend", AnimationEndListener); 30 31 function AnimationEndListener(event) { 32 setTimeout(RemoveReftestWait, 0); 33 } 34 35 function RemoveReftestWait() { 36 document.documentElement.classList.remove("reftest-wait"); 37 } 38 39 </script>