Как сделать движение элемента по дуге?

Question

[vvvadimos]

извините за мой талант рисования)
prntscr.com/bkgwf6
вот примерно так должен двигаться элемент, типа падает, отпрыгивает вбок и потом опять вбок.
это сделать реально с помощью css keyframes, но я вижу только способ задать тыщу точек для движения по такой траектории. и походу на это уйдет куча времени. может кто-то знает как сделать проще?

Answer 1

[Даниил Игоревич]

Достаточно установить точки в отмеченных местах или, скорее всего, без некоторых тоже будет работать, но это уже сами отредактируйте, где понадобится

Comments

[vvvadimos]

нет, так не будет никакой плавности

[Даниил Игоревич]

:)

[vvvadimos]

Даниил Ораин: хватило по 8 точек на дуге, все плавно)

Answer 2

[Minary]

Попробуйте с помощью SVG вдоль элемента path, статья - https://habrahabr.ru/post/207908/
Пример - bl.ocks.org/KoGor/8163268

Comments

[vvvadimos]

это можно было бы, но в js я не очень, я почти накидал уже с помощью keyframes)

Answer 3

[Дмитрий Кравченко]

анимируете элемент по какой-нибудь "bounce-like" кривой безье, при этом смещая его родителя линейно (или не очень, как захотите)
профит.