offset-path-with-transforms-001.html (1052B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>CSS Motion Path: Combined transformation matrix interpolation</title> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> 6 <link rel="match" href="offset-path-with-transforms-ref.html"> 7 <meta name="assert" content="This tests animating combined transformation matrix."> 8 <style> 9 @keyframes anim { 10 to { 11 translate: 0px 100px; 12 offset-distance: 100%; 13 transform: translateX(-100px); 14 } 15 } 16 #target { 17 position: absolute; 18 width: 100px; 19 height: 50px; 20 background-color: lime; 21 offset-path: path("M25 0v100"); 22 animation: anim 10s -5s paused linear; 23 } 24 </style> 25 </head> 26 <body onload="load()"> 27 <div id="target"></div> 28 <div style='width: 50px; height: 100px; background-color: red;'></div> 29 </body> 30 <script> 31 requestAnimationFrame(() => { 32 document.documentElement.classList.remove('reftest-wait'); 33 }); 34 </script> 35 </html>