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

光滑的反弹动画可以用HTML和CSS的帮助下完成的。它将产生有趣和所需的输出。

对于这个项目，带班球一个简单的div需要在HTML页面：

我们将切换到 CSS 进行动画编程。现在，Flexbox的是曾经有过在页面中间的球的大小使得球70像素由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*/}
}

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

@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);
}

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

输出：