web前端入门到实战：使用CSS实现图片帧动画与曲线运动

在前端开发中，提到动画，我们可以：

1. 直接利用DOM实现动画。
2. 利用canvas实现动画。
3. 利用svg实现动画。
4. 直接用一张gif动图。
5. 利用图片实现帧动画。
6. …

所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是’动’的了。本文主要来说一说第4点和第5点。

图片帧动画

当我们要实现的动画效果比较复杂，而且开发排期比较紧的情况下，用一张gif动图来实现动画是成本最低，效果也不错的一种方案。比如下面这种动画效果：

可是如果我们想让动效在某个时候暂停，隔一段时间后，再从断点开始继续播放动效，用gif图就实现不了了。gif图的动效是没有办法暂停的。这个时候，可以考虑采用图片帧动画。

图片帧动画可以看做是：把gif图的原理在前端用代码实现了一遍。

上面个那个动效，(假设)可以分成100帧，即100张图片，然后用代码控制100张图片依次显示。并且，可以随时在中途暂停。为了节省http请求，把100张图片合成一张雪碧图，然后用background-position去控制显示哪一张图。推荐一个很不错的图片生成工具：GKA

我把100张图片生成了一个竖直的雪碧图。