offset-path-path-interpolation-001.html (952B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>offset-path path() interpolation</title> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> 6 <link rel="match" href="offset-path-path-interpolation-ref.html"> 7 <meta name="assert" content="offset-path path supports animation."> 8 <style> 9 @keyframes anim { 10 from { offset-path: path("m 100 100 l 100 100"); } 11 to { offset-path: path("m 100 200 l 100 -100"); } 12 } 13 #target { 14 position: absolute; 15 left: 300px; 16 top: 0px; 17 width: 300px; 18 height: 200px; 19 background-color: lime; 20 transform-origin: 0px 0px; 21 animation: anim 10s -5s paused linear; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="target"></div> 27 </body> 28 <script> 29 requestAnimationFrame(() => { 30 document.documentElement.classList.remove('reftest-wait'); 31 }); 32 </script> 33 </html>