mask-position-after-finish-1a.html (795B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>mask-position animation after finish</title> 4 <style> 5 @keyframes changeMaskPosition { 6 from { mask-position: 0% 0%; } 7 to { mask-position: center center; } 8 } 9 #test { 10 height: 100px; 11 width: 100px; 12 background-color: blue; 13 mask-repeat: no-repeat; 14 mask-position: 0% 0%; 15 mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>'); 16 animation: changeMaskPosition 0.01s forwards; 17 } 18 </style> 19 <div id="test"></div> 20 <script> 21 document.getElementById("test").addEventListener("animationend", () => { 22 requestAnimationFrame(() => { 23 document.documentElement.classList.remove("reftest-wait"); 24 }) 25 }); 26 </script>