mask-size-after-finish-1a.html (783B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>mask-size animation after finish</title> 4 <style> 5 @keyframes changeMaskSize { 6 from { mask-size: 50px 50px; } 7 to { mask-size: 25px 25px; } 8 } 9 #test { 10 height: 100px; 11 width: 100px; 12 background-color: blue; 13 mask-repeat: no-repeat; 14 mask-position: center center; 15 mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect x="0" y="0" width="50" height="50" fill="blue"/></svg>'); 16 animation: changeMaskSize 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>