mask-size-after-finish-1b.html (1020B)
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 mask-repeat: no-repeat; 13 mask-position: center center; 14 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>'); 15 animation: changeMaskSize 0.01s forwards; 16 } 17 18 #inner { 19 height: 100px; 20 width: 100px; 21 background-color: blue; 22 box-sizing: border-box; 23 /* Apply will-change property to force paint mask on mask layer */ 24 border: 1px solid transparent; 25 will-change: transform; 26 } 27 </style> 28 <div id="test"><div id="inner"></div></div> 29 <script> 30 document.getElementById("test").addEventListener("animationend", () => { 31 requestAnimationFrame(() => { 32 document.documentElement.classList.remove("reftest-wait"); 33 }) 34 }); 35 </script>