Bagaimana untuk mencapai trajektori gerakan berbentuk arka dalam css3

Question

Kerana saya ingin membuat kelopak jatuh secara realistik, saya hanya menambah titik putus di titik tengah, tetapi pergerakannya sangat kaku.

三叔 · Answer

Sepatutnya boleh, tetapi anda perlu mengira parameter yang berubah

某草草 · Answer

Saya membuat kesan syiling emas jatuh
Ini yang dikatakan animasi saya

@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

Parameter masa lengkung ialah kelajuan malar secara mendatar dan kelajuan berubah secara menegak. Atau sebaliknya, ia boleh mensimulasikan parameter masa lengkung