Run ❯
zig
.
com
×
Change Orientation
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> <!-- /cssref/tryit.php?filename=trycss_func_ray2 by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 06 Feb 2025 19:59:59 GMT --> </html>
