Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <style> body{ background-color: #ccc; } .mover { width: 80px; height: 80px; background: linear-gradient(#eee 50%,#1c87c9 50%); position: absolute; left: 20%; top: 100px; offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z"); offset-rotate: reverse; animation: move 4s linear infinite; } @keyframes move { 100% { offset-distance: 100%; } } </style> <body> <h2>Пример свойства offset-distance</h2> <div class="mover"></div> </body> </html>