<!DOCTYPE html> <html class="reftest-wait"> <title>mask-position animation after finish</title> <style> @keyframes changeMaskPosition { from { mask-position: 0% 0%; } to { mask-position: center center; } } #test { height: 100px; width: 100px; mask-repeat: no-repeat; mask-position: 0% 0%; 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>'); animation: changeMaskPosition 0.01s forwards; } #inner { height: 100px; width: 100px; background-color: blue; box-sizing: border-box; /* Apply will-change property to force paint mask on mask layer */ border: 1px solid transparent; will-change: transform; } </style> <div id="test"><div id="inner"></div></div> <script> document.getElementById("test").addEventListener("animationend", () => { requestAnimationFrame(() => { document.documentElement.classList.remove("reftest-wait"); }) }); </script>