clip-path-interpolation-shape-arc-direction-agnostic-radius-ref.html (706B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path property and shape function with single-value arc radius</title> 5 </head> 6 <style> 7 @keyframes animate-shape { 8 from { 9 clip-path: shape(from 40px 100px, arc to 200px 100px of 50% 50% small cw, arc to 0 100px of 30% 30% small cw); 10 } 11 to { 12 clip-path: shape(from 40px 100px, arc to 200px 100px of 30% 30% small cw, arc to 0 100px of calc(10px + 45%) calc(10px + 45%) small cw); 13 } 14 } 15 #shape { 16 width: calc(500px / sqrt(2)); 17 height: calc(500px / sqrt(2)); 18 background: green; 19 animation: animate-shape 100s; 20 animation-play-state: paused; 21 animation-timing-function: steps(2, start); 22 } 23 </style> 24 25 <div id="shape"></div> 26 </html>