Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> #myDIV { width: 100px; height: 100px; background-color: coral; color: green; animation: mymove 5s infinite; clip-path: circle(50%); } @keyframes mymove { 50% {clip-path: circle(20%);} } </style> </head> <body> <h1>Animation of clip-path</h1> <div id="myDIV"> <h1>myDIV</h1> </div> <p><b>Note:</b> Edge does not support clip-path on HTML elements (only on SVG elements).</p> </body> <!-- Mirrored from www.w3schools.com/cssref/tryit.php?filename=trycss_anim_clip-path by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 Dec 2022 17:36:06 GMT --> </html>
