css3怎麼能做到弧形的運動軌跡

Question

因為想做花瓣掉落的逼真樣子
現在只是在中間點加上了一個斷點但是運動的非常生硬
怎麼能用css3 keyfames 做出那種弧形的運動軌跡
得到幫助非常感謝

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

曲線的時間參數，橫著勻速，垂直變速。或者反過來，能模擬出曲線時間參數