mask-position-in-delay-1b.html (783B)
1 <!DOCTYPE html> 2 <title>mask-position animation in delay phase</title> 3 <style> 4 @keyframes holdMaskPosition { 5 from,to { mask-position: left top; } 6 } 7 #test { 8 height: 100px; 9 width: 100px; 10 mask-repeat: no-repeat; 11 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>'); 12 animation: holdMaskPosition 100s 100s infinite; 13 mask-position: center center; 14 } 15 16 #inner { 17 height: 100px; 18 width: 100px; 19 background-color: blue; 20 box-sizing: border-box; 21 /* Apply will-change property to force paint mask on mask layer */ 22 border: 1px solid transparent; 23 will-change: transform; 24 } 25 </style> 26 <div id="test"><div id="inner"></div></div>