clip-path-path-interpolation-with-zoom.html (846B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Masking: Test clip-path nonzero path interpolation with zoom</title> 4 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path"> 5 <link rel="match" href="clip-path-path-interpolation-with-zoom-ref.html"> 6 <meta name="assert" content="The clip-path property takes the basic shape 7 'path()' for clipping. Test the interpolation of nonzero 8 path function."> 9 <style> 10 @keyframes anim { 11 from { 12 clip-path: path(nonzero, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z'); 13 } 14 to { 15 clip-path: path(nonzero, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z'); 16 } 17 } 18 #rect { 19 width: 100px; 20 zoom: 3; 21 height: 100px; 22 background-color: green; 23 animation: anim 10s -5s paused linear; 24 } 25 </style> 26 <div id="rect"></div> 27 </html>