How to make an element move along an arc?

Question

css

sorry for my drawing talent)
prntscr.com/bkgwf6
this is how the element should move, like falling, jumping sideways and then sideways again.
this can be done realistically using css keyframes, but I only see a way to set a thousand points for moving along such a trajectory. and it will take a lot of time to do so. does anyone know how to make it easier?

Answer 1

It is enough to set the points in the marked places or, most likely, it will also work without some, but edit it yourself where necessary

Answer 2

Try using SVG along the path element, article - https://habrahabr.ru/post/207908/
Example - bl.ocks.org/KoGor/8163268

Answer 3

animate the element along some kind of "bounce-like" bezier curve, while shifting its parent linearly (or not so much, as you like)
profit.