ARTICLE AD BOX
I can see few issues clearly. Use offset-path (not the shorthand offset). The shorthand is quirky and easy to misapply. By default the element’s orientation snaps to the new tangent at each segment junction, which looks like a jump. Disable rotation or control it. If the motion anchor isn’t the visual center of the rectangle, any rotation change at corners will look like a positional jump. Set the anchor to the center.
Try this instead:
<div id="canvas" style="width: 200px; height: 200px; overflow: auto; border: 1px dashed #aaa;"> <svg viewBox="0 0 100 100" style="width:100%; height:100%;"> <line x1="0" y1="95" x2="100" y2="95" stroke="#cc9999" stroke-width="1"/> <line x1="10" y1="95" x2="10" y2="75" stroke="#cc9999" stroke-width="1"/> <line x1="90" y1="95" x2="90" y2="75" stroke="#cc9999" stroke-width="1"/> <rect id="bus1-animate" width="6" height="6" stroke="none" fill="#cc9999"/> </svg> </div> #bus1-animate { /* Use the explicit property, not the shorthand */ offset-path: path("M 13 72 L 13 92 L 87 92 L 87 78"); offset-distance: 0%; offset-rotate: 0deg; offset-anchor: center; /* For SVG elements, make sure transforms and origins behave as expected */ transform-box: fill-box; /* ensures box metrics come from the element’s own box */ animation: transferDataAnimation 2500ms linear forwards; } @keyframes transferDataAnimation { to { offset-distance: 100%; } }Particularly if you are still looking for the rectangle to orient along the path, then:
offset-rotate: auto; offset-anchor: center;/* keep this to reduce jumpiness */and to further smooth the turns, replace sharp corners with small curves (use Q or C commands in the SVG path), which gives continuous tangent direction:
offset-path: path("M 13 72 L 13 92 Q 13 92 14 92 L 87 92 Q 87 92 87 91 L 87 78");Hope it gives you some clarity and direction
