在 css 里面，我们可以使用 @keyframes 去定义动画 .. keyframe 就是关键帧，比如你可以在动画里面添加一些关键帧，在它们的上面，去应用一些 css 属性，比如改变元素的大小，颜色，移动元素的位置等等 .. 从一个关键帧到另一个关键帧会有一个过渡的动画效果 ..

我们先去定义一个动画 ... 使用 @keyframes ... 给这个动画起个名字 ... 比如 animation-demo ... 在它的里面，可以去定义一些关键帧 .. 你可以使用百分比，或者如果这个动画只有两个关键帧，也就是动画的开始，还有动画的结束 ... 我们可以使用 from ... 还有 to 这两个关键词 .. from 表示 0%，to 表示 100% ..

添加一个 from ... 再这个关键帧里面，去添加一些样式 ... 比如我们可以去移动元素的位置 .. 用一下 transform，使用 tranlateY，在 Y 轴移动元素 .. 值可以设置成 -100px ..

这样使用了这个动画的元素，它的初始的位置应该是这个 translateY -100px ...

再添加一个 to .. 在它里面，同样使用一下 变换的 translateY .. 结束的位置是 100 px ... 这个动画的意思就是，在元素的 Y 轴，把它往上移动 100 像素 ，这是这个元素的初始位置 ... 然后向下移动这个元素，结束的位置是把这个元素向下移动了 100 个像素 ...

然后找到一个想要使用这个动画的元素 .. 用一个 animation-name 属性，设置一下动画的名字 .. 这里就是刚才我们定义的这个 animation-demo

再去设置一下这个动画的持续的时间，可以使用 animation-duration .. 设置成两秒钟 ...

你会发现，这个图像就会使用我们自己定义的这个动画 ... 动画默认只会播放一次 ... 完成以后，这个元素会恢复到它之前所在的这个位置上 ..