HTML
CSS
JavaScript
<div class='container'><div class='moving-box'></div></div>
.container { width: 300px; height: 300px; position: relative; border: 2px solid #333; overflow: hidden; } .moving-box { width: 50px; height: 50px; background-color: red; position: absolute; offset-path: path('M 0 0 L 300 0 L 300 300 L 0 300 Z'); animation: move 4s linear infinite; offset-distance: 0%; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
// No JavaScript required for this demo