clip-path-animation-custom-property.html (1266B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> 4 <link rel="match" href="clip-path-animation-custom-property-ref.html"> 5 <style> 6 * { 7 --small: inset(10px 10px); 8 --large: inset(30px 30px); 9 } 10 11 @property --large { 12 syntax: "<basic-shape>"; 13 inherits: true; 14 initial-value: inset(10px 10px); 15 } 16 17 @property --small { 18 syntax: "<basic-shape>"; 19 inherits: true; 20 initial-value: inset(30px 30px); 21 } 22 23 @keyframes clippath { 24 0% { 25 clip-path: var(--small); 26 } 27 28 100% { 29 clip-path: var(--large); 30 } 31 } 32 33 .background { 34 width: 200px; 35 height: 200px; 36 background-color: blue; 37 animation: clippath 20s steps(2, jump-both) -10s; 38 } 39 40 .background.circularize { 41 --small: circle(10% at 50% 50%); 42 --large: circle(40% at 50% 50%); 43 } 44 </style> 45 <script src="/common/reftest-wait.js"></script> 46 <script src="/web-animations/testcommon.js"></script> 47 48 <body> 49 <div id="anim" class="background"></div> 50 51 <script> 52 document.getAnimations()[0].ready.then(() => { 53 document.getElementById("anim").classList.add("circularize"); 54 waitForAnimationFrames(3).then(takeScreenshot); 55 }); 56 </script> 57 </body> 58 59 </html>