mask-size-in-delay-1b.html (762B)
1 <!DOCTYPE html> 2 <title>mask-size animation in delay phase</title> 3 <style> 4 @keyframes changeMaskSize { 5 from { mask-size: 50px 50px; } 6 to { mask-size: 50px 50px; } 7 } 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="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>'); 15 animation: changeMaskSize 100s 100s infinite; 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 28 </style> 29 <div id="test"><div id="inner"></div></div>