Движение шара по траектории?

Question

[TipTop89]

Подскажите, у меня анимация движение шарика по offset-path, но она прерывается и шарик идет в обратную сторону. Как можно сделать так что-бы она не прерывалась а просто по это траектории всегда двигался в одно сторону? Спасибо

Answer 1

[Kentavr16]

из mdn

normal
Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.

reverse
Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.

alternate
Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count.

alternate-reverse
Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с начального переходит в конечное, в зависимости от количества итераций анимации animation-iteration-count.

у вас установлено alternate. Поиграйте с этим свойством.

Answer 2

[iBird Rose]

animation измени на:

animation: move-along var(--duration) 0ms infinite linear;