Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> #frameDiv { width: 200px; height: 200px; margin: 20px; position: relative; border: solid black 1px; background-color: rgb(205, 242, 205); } #frameDiv > div { width: 50px; height: 50px; background-color: hotpink; offset-path: ray(45deg); animation: moveDiv 3s 3; } @keyframes moveDiv { 100% { offset-distance: 100%; } } </style> </head> <body> <h1>Animation along an offset-path with ray()</h1> <div id="frameDiv"> <div></div> </div> <p>The pink div is animated to follow a path defined with the ray() function.</p> </body> </html>
