mask-size-in-delay-1a.html (566B)
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 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="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>'); 16 animation: changeMaskSize 100s 100s infinite; 17 } 18 </style> 19 <div id="test"></div>