如何在CSS动画中获得重力效果？

我想制作一个元素的动画，就像你在俯视地球一样。该元素向您跳跃，到达顶点，然后稍微向下倾斜。轨迹的侧视图如下所示：

     _
   /   \
  /     |
 |
 |

    /\
   /  \
  /
 /
/

我无法通过关键帧动画获得逼真的效果。我的看起来像这样：

     _
   /   \
  /     |
 |
 |

    /\
   /  \
  /
 /
/

CSS

@keyframes springIn {
    0% {
        transform: scale(0.0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.0);
    }
}

.someElement {
    animation: springIn 1s linear 1s 1 forwards;
}

---

如何在动画中使用抛物线函数来获得重力效果？我想我可以使用，但是CSS标准不允许[0,0]之外的点。

我认为可以使用贝塞尔曲线

在你的情况下，可能是这样的：

-webkit-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-moz-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-ms-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-o-transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); 
transition: all 500ms cubic-bezier(0.310, 0.440, 0.445, 1.650); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-moz-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-ms-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
-o-transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); 
transition-timing-function: cubic-bezier(0.310, 0.440, 0.445, 1.650); /* custom */

我还没有自己做过，请查看此链接：

我已经做好了准备

我放置了一个外部div以使悬停稳定：

<div class="container">
    <div class="moving"></div>
</div>

编辑

只是一个图像，你可以用一条贝塞尔曲线（从“轻松动画工具”页面）来显示对象速度不需要恒定（并且几乎可以是抛物线）

---

在关键帧中使用

动画计时功能

使两个过渡（上升后下降）呈抛物线状

---

要正确执行此操作（即根据物理学），首先需要确保“峰值”点刻度和时间正确对应。动画从0%到100%运行，抛物线的顶部（最大比例点）介于两者之间，我们称之为m%。刻度从0（0%）开始，在1（100%）结束，在s（m%）达到峰值。然后使用一些基本数学知识，这两个变量之间的关系是：

m = 100 / (1 + sqrt(s-1))

或

…因此，要使峰值达到80%，需要s=17/16=1.0625

或者，对于最大刻度s为1.2，您需要在m=69.0983处达到峰值…%

---

现在，要使过渡正确地抛物线化，需要使用抛物线

动画计时功能

设置。当你的物体向上发射时，你想有效地使用像

ease out

，当它开始下降时，像

ease in

。。。但与这两个关键词相关的三次贝塞尔曲线并不完全是抛物线

相反，请使用：

animation-timing-function: cubic-bezier(0.33333, 0.66667, 0.66667, 1)

对于动画的“上升”部分，以及：

animation-timing-function: cubic-bezier(0.33333, 0, 0.66667, 0.33333)

对于“秋天”部分。这些确实给出了精确的抛物线。（有关这些值的推导背后的数学信息，请参见；请注意，理想情况下，使用1/3而不是0.33333，使用2/3而不是0.66667，但CSS不允许分数）

将所有这些放在一起，可以得到以下CSS：

.someElement { animation: springIn 1s linear 1s 1 none }

@keyframes springIn
{
  0% { transform: scale(0.0); animation-timing-function: cubic-bezier(0.33333, 0.66667, 0.66667, 1) }
  69.0983% { transform: scale(1.2); animation-timing-function: cubic-bezier(0.33333, 0, 0.66667, 0.33333) }
  100% { transform: scale(1.0) }
}

…如果我算对了，那应该会给你一个完美的抛物线动画轨迹

（注意：我将动画填充模式更改为“无”，因为动画结束后似乎没有必要继续强制执行

transform:scale（1.0）

。如果出于某种原因确实需要，请将此值更改回“forwards”）.

Adobe提供了一个nice，它只使用标准的ease-in/ease-out计时功能。即使它可能不完全是“物理的”（即，不是抛物线），但对于许多情况，它可能仍然足够好。如果您向下滚动到“物理是您的朋友”部分，页面上会有一个演示

div {
    width:140px;
    height:140px;
    border-radius: 70px;
    background:red;
    position:relative;
    animation: jump 1s infinite;
}

@keyframes jump {
    0% {top: 0;animation-timing-function: ease-in;}
    50% {top: 140px;height: 140px;animation-timing-function: ease-out;}
    55% {top: 160px; height: 120px;border-radius: 70px / 60px;animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px;border-radius: 70px;animation-timing-function: ease-out;}
    95% {top: 0;animation-timing-function: ease-in;}
    100% {top: 0;animation-timing-function: ease-in;}
}

---

来源：

使用动画功能，这可能是一个轻微的改进：（仅适用于Chrome）@ExplosionPills:你的

放松不适用于整个动画吗？我想让它慢慢地到达顶点，然后再慢慢地从顶点掉下来。我认为主要的问题是物体以恒定的速度移动，这可能会让现实感有点偏离。@JustinL。不是真的，我添加了一张图片来展示你能得到什么好吧，我错了；我没有看到计时功能是贝塞尔曲线，而不是位置。在谷歌Chrome 25（Windows最新版本）中，贝塞尔点被剪裁在[0.0,1.0]之间。最新的Firefox没有剪辑，但我注意到有时候动画可以工作，有时候根本就没有动画。“我相信贝塞尔曲线仍然很不稳定。”乔乔：是的，支撑力很弱。我只是把这些信息放在这里，因为OP谈到了这一点，我希望支持会增加。Chrome 25.0.1364.172 m剪辑某些属性的贝塞尔变换。zoom属性（请参阅我提供的小提琴）工作正常。（或者至少在我看来是这样的）。BYW，我并没有说在小提琴中，切换是在div悬停时触发的。Jon z，你的缩放是关闭的，因为div是整页宽的，但其中只有左对齐的文本是可见的。此外，不透明度在峰值点会逐渐变回零，因此永远看不到“下降”部分。我认为这更像是OP的想法：