offset-distance-interpolation-001.html (956B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>offset-distance interpolation</title> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property"> 6 <link rel="match" href="offset-path-path-interpolation-ref.html"> 7 <meta name="assert" content="offset-distance supports animation."> 8 <style> 9 @keyframes anim { 10 from { offset-distance: 0%; } 11 to { offset-distance: 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 offset-path: path("m 50 150 h 100"); 22 animation: anim 10s -5s paused linear; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="target"></div> 28 </body> 29 <script> 30 requestAnimationFrame(() => { 31 document.documentElement.classList.remove('reftest-wait'); 32 }); 33 </script> 34 </html>