clip-path-interpolation-shape-arc-direction-agnostic-radius.html (882B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test animating single-value arc radius of the shape() function</title> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> 6 <link rel="match" href="clip-path-interpolation-shape-arc-direction-agnostic-radius-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-69;totalPixels=0-360"> 8 </head> 9 <style> 10 @keyframes animate-shape { 11 from { 12 clip-path: shape(from 40px 100px, arc to 200px 100px of 50% small cw, arc to 0 100px of 30% small cw); 13 } 14 to { 15 clip-path: shape(from 40px 100px, arc to 200px 100px of 30% small cw, arc to 0 100px of calc(10px + 45%) small cw); 16 } 17 } 18 #shape { 19 width: 400px; 20 height: 300px; 21 background: green; 22 animation: animate-shape 100s; 23 animation-play-state: paused; 24 animation-timing-function: steps(2, start); 25 } 26 </style> 27 28 <div id="shape"></div> 29 </html>