Элемент прыгает за угол при анимации с помощью пути смещения CSS. ⇐ CSS

[Anonymous]

Я хочу анимировать прямоугольник так, чтобы он следовал по пути SVG. Мне это удалось, однако похоже, что прямоугольник прыгает по углам пути. В документации Mozilla анимация выглядит так, как я хочу: https://developer.mozilla.org/en-US/doc ... ong_a_path
Вот мой код:

Код: Выделить всё

#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%;
}
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/798 ... ffset-path