Как анимировать картинку по траектории?

Question

[TheRevan]

Есть слайдер: Необходимо, чтобы перед сменой слайда (на первом и втором) иконка пробегала путь по заданной траектории за не более чем 0.5 сек
То есть буквально перед сменой слайда будет задержка. Как это реализовать?

Answer 1

[Andrew]

Делаете её абсолютом, в кейфреймах задаёте координаты для каждой стадии, задаёте время анимации 4.5s
Пример
Проверяете индекс(0 или 1), вешаете обработку "before change" на слайдер, preventDefault, timeOut 5000, вешаете класс с анимацией на слайд, триггерите смену слайда
Второй вариант через svg анимировать всю траекторию, суть таже только вместо фреймов сразу вязать на js

Answer 2

[Marichka15]

https://css-tricks.com/guide-svg-animations-smil/