Нужно сделать движение элемента по заданной траектории (кривая дуга).
Использую для этого
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
смещает элемент и можно ли это как-то исправить, чтобы он был в том месте, где указаны координаты?