Demo: CSS offset-path

<div class='container'><div class='moving-box'></div></div>

.container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; }
.moving-box { width: 50px; height: 50px; background-color: #3498db; animation: move 5s infinite; offset-path: path('M 0 0 Q 50 100, 100 0'); offset-distance: 0%; }
@keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }

// No JavaScript required for this demo