Comment obtenir une trajectoire de mouvement en forme d'arc en CSS3

Question

Parce que je veux faire tomber les pétales de manière réaliste.
Maintenant, j'ajoute juste un point d'arrêt au milieu, mais le mouvement est très rigide.
Comment puis-je utiliser les keyfames CSS3 pour créer cette trajectoire de mouvement en forme d'arc ? beaucoup pour l'aide

Answer 1

Cela devrait être possible, mais vous devez calculer les paramètres changeants

Answer 2

J'ai créé un effet de chute de pièces d'or
C'est ce que dit mon animation

@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

Le paramètre temps de la courbe est une vitesse constante horizontalement et une vitesse variable verticalement. Ou à l'inverse, il peut simuler les paramètres de temps de courbe