如何使用 CSS 制作平滑的弹跳动画？

平滑的弹跳动画可以借助HTML和CSS来完成。它将产生有趣和所需的输出。

对于这个项目，在 HTML 页面中需要一个带有类ball的简单 div：

我们将切换到 CSS 进行动画编程。现在，Flexbox 用于将球放置在页面中间并使球的大小为 70 像素 x 70像素。它可以采用用户选择的任何尺寸，因为它决定了球的大小。

body {
  display: flex;              
  justify-content: center;   
}
.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;         
  background-color: #FF5722;  
}

这里，
justify-content: center用于将球水平居中。
border-radius : 50%将正方形变成圆形。
background-color: #FF5722将圆圈变成橙色。要记住的颜色有多种代码符号。

关键帧创建： CSS 动画中的关键帧可以完全控制动画。简单使用关键字@keyframes后跟动画名称，即平滑弹跳球：

@keyframes smoothbounceball{
    statements
}

在关键帧内，使用关键字from和to为动画制作起点和终点。

@keyframes smoothbounceball{
    from {/*starting*/}
    to {/*ending*/}
}

根据我们的理解，我们可以为动画添加起始值和结束值。要创建弹跳效果，我们需要变换球的位置。 transform允许修改给定元素的坐标。因此最终的关键帧：

@keyframes smoothbounceball{
    from { transform: translate3d(0, 0, 0);}
    to { transform: translate3d(0, 200px, 0);}
}

在这里， translate3d函数接受三个输入，即 3 维轴 (x, y, z) 的变化。它将在 3 维轴上平移球。如果球要上下移动，则球需要沿 y 轴平移。

运行关键帧：由于@keyframe已经创建，现在需要运行。在上面提到的.ball{ }代码中，必须添加以下一行：

.ball{
    Given statements...
  
    animation: bounce 0.5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

动画的理解：动画告诉球元素使用给定的关键帧规则反弹并设置动画的长度为0.5秒。然后在完成时，动画方向交替。然后无限次运行动画。

但它不喜欢球反弹而是来回、上下移动。
因此，它看起来像：

那是因为动画的时间关闭了。默认情况下，动画设置为轻松。所以，为了让球看起来像在弹跳，动画需要在开始时很慢，在中间加速，然后慢慢结束。

因此贝塞尔曲线用于自定义动画时间。因此代码：

.ball{
    Given statements..
  
    animation: bounce 0.5s cubic-bezier(0.5, 0.05, 1, 0.5);
}

在此之后，球显示出弹跳效果。这是最终的代码：

输出：