---

【教程】用纯CSS实现跳跳球动画

通过这个有趣的教程学习CSS动画以及Keyframes

我们要做什么

这是我们最终要实现的：

See the Pen <a href='https://codepen.io/bmorelli25/pen/VzXJzN/'>Bouncing Ball - Correct Timing</a> by brandon (<a href='https://codepen.io/bmorelli25'>@bmorelli25</a>) on <a href='https://codepen.io'>CodePen</a>.

开始

首先我们需要一个classname为 ball的div :

<div class="ball"></div>

使用Flex布局，球放到页面中间，尺寸为100 * 100像素，背景色为橙色。

body {
  display: flex;              /* 使用Flex布局 */
  justify-content: center;    /* 水平居中 */
}

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;         /* 把正方形变成圆形*/
  background-color: #FF5722;  /* 设置颜色为橙色*/
}

创建Keyframes

Keyframes规则用来控制CSS动画（指定一个CSS样式和动画将逐步从目前的样式更改为新的样式）。创建很简单，就是在@keyframes关键字后面跟动画名称

@keyframes nameOfAnimation {
  /* 代码 */
}

在这个Demo中，我们把keyframe取名为bounce。在Keyframe中，用from 和 to 关键字来指定开始第一帧和结尾最后一帧的CSS样式。

@keyframes bounce {
  from { /* 开始 */ }
  to   { /* 结束   */ }
}

为了反弹的效果，我们通过transform来改变球的坐标：

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

使用transform让球沿着三维轴平移，translate3D函数需要3个输入，即x，y，z。 因为我们想让球上下跳动，我们只需要沿着y轴进行平移。因此，动画结束的y值变成了200px。

运行Keyframe

现在@keyframe已经创建好了，回到.ball {}添加几行代码：

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

解析这三行代码:

• 告诉ball元素，使用keyframe规则的名称是bounce。规定完成动画所花费的时间为.5秒。

• 动画做往复运动。

• 动画无限次运行。

很好，离我们想要的已经很近了：

See the Pen <a href='https://codepen.io/bmorelli25/pen/ayYgyj/'>Bouncing Ball - Wrong Timing</a> by brandon (<a href='https://codepen.io/bmorelli25'>@bmorelli25</a>) on <a href='https://codepen.io'>CodePen</a>.

它看起来还不像一个跳跳球。那是因为我们没有为动画设置速度曲线，默认会被设置为ease。意思是动画的速度刚开始慢，中间变快，快结束的时候又变慢。我们需要自定义跳跳球的速度曲线。

我们可以用贝塞尔曲线来自定义动画速度曲线。新增代码：

.ball {
  /* ... */

  animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
}

你可以用这个网站来找到合适的速度曲线。（慢，慢，慢，快）就是我们想要的弹跳效果。

最终代码：

See the Pen <a href='https://codepen.io/bmorelli25/pen/VzXJzN/'>Bouncing Ball - Correct Timing</a> by brandon (<a href='https://codepen.io/bmorelli25'>@bmorelli25</a>) on <a href='https://codepen.io'>CodePen</a>.