Как реализовать анимацию по траектории на jq?

Question

[Анна]

Тут код и траектория, по которой должен двигаться квадрат https://jsfiddle.net/8L83znmd/
Помогите плиз.

Comments

[Stalker_RED]

Картинка всегда одна и та-же, и бегунок должен двигаться по нарисованной линии?
Она сознательно сделана фоном в элемент с 100% ширины, с выравниванем по центру? (попробуйте менять ширину окна https://jsfiddle.net/8L83znmd/1/)

[Виталий Инчин ☢]

Чутка не понял вопроса...

[Анна]

Stalker_RED: Бегунок двигается по нарисованной линии и все. Причем один цикл. Картинка не меняется

[Анна]

https://jsfiddle.net/8L83znmd/2/ ширина тут вообще не причем. Сделала ширину 823px, как у картинки. Она не будет меняться

Answer 1

[Максим]

тут наверно jquery и не нужно вовсе - вот обалденный туториал по keyframes

Comments

[Анна]

Нет, нужен jq или js. C css я знаю как делать и нет, нельзя

Answer 2

[WebDev]

Проще всего добавить квадрату transition: all, для плавной анимации и просто менять значения top и left. Если нужно на jQuery, то в animate можно передать параметр queue со значением false. Тогда две анимации будут происходить одинаково.