CSS Bounce Effect

HTML 和 CSS 可用于创建平滑的弹跳运动。这将产生令人愉悦且符合预期的结果。

此项目使用了一个 HTML 页面中的 <div> 元素，其 class 属性为 "ball"，以及一个 class 属性为 "container" 的 <div> 元素。

我们将转到 CSS 来编程动画。现在这个球的大小为 80px x 80px，并使用 Flexbox 定位在页面中心。由于用户选择球的大小，因此它可以是任何尺寸。

创建关键帧 - 通过 CSS 关键帧可以完全自定义动画。动画的名称简单地跟在 @keyframes 关键字后面，例如，smooth bounce ball（平滑弹跳球）。

使用 'from' 和 'to' 关键字来创建关键帧中的动画的起始点和结束点。

据我们所知，动画可以有开始和结束值。需要改变球的位置以提供弹跳效果。Transform 允许更改元素的坐标。因此，最后一个关键帧

三个输入是三维轴（x、y、z）的修改。球将沿着三维轴进行平移。需要沿 y 轴进行平移，才能使球上下移动。

运行关键帧 - 现在已经构建好 @keyframe，需要执行它。需要将以下代码行添加到上面提到的 .ball{} 代码中。

动画的原理 - 动画指定了 0.5 秒的时长，并指示 ball 元素使用指定的关键帧规则 bounce。之后，动画方向改变。然后继续无限运行动画。

然而，它并不会像弹跳的球那样前后或上下移动。

默认情况下，动画是平滑的。因此，动画必须缓慢开始，中间加速，然后在结束时再次减速，以产生球在弹跳的印象。

为此，使用贝塞尔曲线来改变动画的时机。因此，必须添加以下代码。

之后，球就会呈现出弹跳的效果。

完整代码如下所示。

输出

球的极端位置