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

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

某草草 · Answer

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

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