clip-path-animation-non-keyframe-timing-function.html (980B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta name=fuzzy content="0-5;0-5"> 4 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation"> 5 <link rel="match" href="clip-path-animation-non-keyframe-timing-function-ref.html"> 6 <style> 7 .container { 8 width: 100px; 9 height: 100px; 10 background-color: green; 11 } 12 13 </style> 14 <script src="/common/reftest-wait.js"></script> 15 16 <body> 17 <div class="container"></div> 18 19 <script> 20 document.querySelector('.container').animate([ 21 // 1st keyframe must have a non-linear easing function or the animation 22 // will extrapolate based on the animation-wide timing function 23 { clipPath: 'circle(20% at 20% 20%)', easing: 'ease' }, 24 { clipPath: 'circle(50% at 50% 50%)' } 25 ], { 26 easing: 'cubic-bezier(0, 2, 1, 2)', 27 duration: 1000000, 28 delay: -500000 29 }); 30 document.getAnimations()[0].ready.then(() => { 31 takeScreenshot(); 32 }); 33 </script> 34 </body> 35 36 </html>