How to achieve arc-shaped motion trajectory in css3

Question

Because I want to make the petals fall realistically
Now I just add a breakpoint at the middle point but the movement is very stiff
How can I use css3 keyfames to create that arc-shaped movement trajectory
Thank you very much for help

Answer 1

It should be possible, but you need to calculate the changing parameters

Answer 2

I made an effect of gold coins falling
This is what my animation says

@keyframes drop
    0%
      transform: translate(0,0) rotate3d(0,1,0,0deg)
    33%
      transform: translate(-20px,245px) rotate3d(0,1,0,-60deg)
    66%
      transform: translate(20px,490px) rotate3d(0,1,0,60deg)
    100%
      transform: translate(0,736px) rotate3d(0,1,0,0deg)
  @keyframes drop2
    0%
      transform: translate(0,0) rotate3d(1,0,0,0deg)
    33%
      transform: translate(20px,245px) rotate3d(1,0,0,60deg)
    66%
      transform: translate(-20px,490px) rotate3d(1,0,0,-60deg)
    100%
      transform: translate(0,736px) rotate3d(1,0,0,0deg)

Answer 3

The time parameter of the curve is constant speed horizontally and variable speed vertically. Or conversely, it can simulate the curve time parameters