如何使用 CSS 创建平滑弹跳动画

弹跳动画

我们可以使用HTML和CSS在网页上创建弹跳动画。在这里，为了制作弹跳动画，我们将使用HTML和CSS创建一个形状，然后借助CSS对其进行动画处理。弹跳动画纯粹是为了好玩，让网页更具吸引力。

步骤1：创建一个形状

我们将创建球的形状，所以首先，我们使用div标签创建它的形状。

步骤2：为形状和颜色添加样式使其更具吸引力

在上面的代码中，我们将body标签的display设置为flex，并将justify content设置为水平居中。因此，所有元素都将居中对齐。为了给球设置样式，我们保持其宽度和高度相同，使其看起来更圆。然后将border-radius设置为50%，使其具有精确的圆形形状和背景颜色。

步骤3：设置关键帧规则

在CSS部分，我们可以控制每一个动画，并使其更具吸引力，如我们所愿。

语法

在关键帧部分，我们将使用from和to关键字来指定动画的开始和结束点。

对于弹跳动画，我们将根据动画改变球的位置。所以我们将使用transform属性来改变球的坐标。

在上面的代码片段中，我们使用translate3d属性，它接受三个参数。

我们想要在哪个方向移动形状，我们就在那个参数中给出值，所以如果我们想要在上下方向移动球，我们将在y方向上平移它。如果我们想要在水平左右方向移动球，我们将在x方向上平移它。

步骤 4

我们将在目标标签中添加动画属性。现在在这个代码中，我们想要在类名为shape的元素中添加动画，所以我们通过定义其自身样式和动画属性来定位该元素。

在上面的代码片段中，动画类型是bounce，它将精确运行0.5秒。现在动画的方向是交替的，这意味着在0.5秒内，它将从下向上移动，然后它将方向从上向下改变，并再次动画0.5秒。我们已将动画迭代次数设置为无限，这意味着它将一直运行直到程序运行结束。如果我们将animation-iteration-count设置为某个整数，那么它只会动画那些迭代次数。我们还可以通过减少动画时间来加快动画速度。如果我们将动画时间设置为0.2或0.3秒，那么它将看起来比以前更快。

由于动画速度在整个0.5秒内是相同的，所以它看起来不会有弹跳感。为了使其更清晰，我们将动画开始和结束时的速度放慢，并在中间部分加快动画速度。所以我们将在动画中添加cubic-bezier属性来管理速度。

这是最终的HTML代码，它将创建弹跳效果。

HTML 代码

输出