Почему offset-path смещает координаты элемента и как это исправить?

Question

[ymfront]

Нужно сделать движение элемента по заданной траектории (кривая дуга).



Использую для этого offset-path:

<div class="ball_box">
    <img class="ball" src="./img/ball.png" alt="ball">
</div>

.ball_box {
    width: 149rem;
    height: 149rem;
    position: absolute;
    top: 634rem;
    left: 759rem;
}

.ball_box .ball {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    offset-path: path("M75.5 470C148.5 407.667 275.7 257.1 200.5 153.5C125.3 49.9 36.1667 8.66667 1 1");
}

@keyframes moveBall {
    0% {
    offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

.start {
    animation: moveBall 2s ease-in-out forwards;
}

Проблема в том, что .ball сразу смещается и без анимации. Мне нужно, чтобы анимация начиналась с места, где расположен элемент. Но он смещается сильно вниз.

Также пробовал добавлять offset-path и для родителя .ball_box. Проблема такая же. Вместо top: 634rem и left: 759rem элемент уходит непонятно куда.

Почему offset-path смещает элемент и можно ли это как-то исправить, чтобы он был в том месте, где указаны координаты?

Comments

[Ankhena]

Кто кого куда смещает?
https://codepen.io/AnnaSummer/pen/XJbvaEL

[ymfront]

Ankhena, судя по вашему коду, блок .ball должен находиться вверху, т.к. он не спозиционирован на положение внизу. Уберите offset-path и блок будет там, где он должен быть.

[Ankhena]

ymfront,
в смысле, вы потеряли свойство offset-anchor или transform translate?