offset-rotate-interpolation-001.html (953B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>offset-rotate interpolation</title> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property"> 6 <link rel="match" href="offset-path-path-interpolation-ref.html"> 7 <meta name="assert" content="offset-rotate supports animation."> 8 <style> 9 @keyframes anim { 10 from { offset-rotate: auto; } 11 to { offset-rotate: reverse; } 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 100 150 v -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>