So erreichen Sie eine bogenförmige Bewegungsbahn in CSS3

Question

Weil ich möchte, dass die Blütenblätter realistisch fallen.
Jetzt füge ich nur einen Haltepunkt in der Mitte hinzu, aber die Bewegung ist sehr steif.
Wie kann ich CSS3-Keyfames verwenden, um diese bogenförmige Bewegungsbahn zu erstellen? Vielen Dank für die Hilfe

Answer 1

应该能，不过需要计算下，变化的参数

Answer 2

我做过一个金币掉落的效果
我的动画这么写的

@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

曲线的时间参数，横着匀速，竖着变速。或者反过来，能模拟出曲线时间参数