Das Element springt um die Ecke, wenn es mit einem CSS-Versatzpfad animiert wird ⇐ CSS

[Anonymous]

Ich möchte ein Rechteck so animieren, dass es einem SVG-Pfad folgt. Das ist mir gelungen, allerdings sieht es so aus, als würde das Rechteck um die Ecken des Weges springen. In den Mozilla-Dokumenten sieht die Animation genauso aus, wie ich sie haben möchte: https://developer.mozilla.org/en-US/doc ... ong_a_path
Hier ist mein Code:

Code: Select all

#bus1-animate {
width: 6px;
height: 6px;
background-color: #cc9999;
animation: transferDataAnimation 2500ms linear;
animation-fill-mode: forwards;
offset: path("M 13 72 L 13 92 L 87 92 L 87 78");
position: relative;
}

@keyframes transferDataAnimation {
from {
offset-distance: 0%;
}

to {
offset-distance: 100%;
}
}

Code: Select all