首先我们来了解一下Web有哪些动画形式

以上各种动画形式都可以制作出一种类型的动画，那就是帧动画，也叫序列帧动画，定格动画，逐帧动画等，这里我们统一用帧动画来表述。

帧动画一般用来实现稍微复杂一点的动画效果，同时希望动画更细腻，设计师更自由的发挥。他可以定义到每一个时间刻度上的展现内容，我们一般用帧动画来做页面的Loading，小人物，小物体元素的简单动画。我们想象中的帧动画应该有以下几个特点：

帧动画的素材一般是先由设计师在PS中的时间轴上设计好了，然后导出图片给前端人员，PS制作时间轴动画一般是用来制作稍微简单的动画，操作简单，方便。

或者是由设计师在AE的时间轴进行设计，因为AE内置了更丰富的动作效果，比如转换，翻转之类的，AE可以帮助我们实现更复杂的效果，然后再导出图片给前端人员。

这里帧动画素材的要求，每一帧的图片最好是偶数宽高，偶数张，最好周围能有一些留白。

将目前想到的解决方案梳理如下图，同时我们将对每种方案进行详细介绍。

我们可以将上面制作的帧动画导出成GIF图，GIF图会连续播放，无法暂停，它往往用来实现小细节动画，成本较低、使用方便。但其缺点也是很明显的：

CSS3帧动画是我们今天需要重点介绍的方案，最核心的是利用CSS3中Animation动画，确切的说是使用animation-timing-function 的阶梯函数 steps(number_of_steps, direction) 来实现逐帧动画的连续播放。

帧动画的实现原理是不断切换视觉内图片内容，利用视觉滞留生理现象来实现连续播放的动画效果，下面我们来介绍制作CSS3帧动画的几种方案。

（1）连续切换动画图片地址src（不推荐）

我们将图片放到元素的背景中（background-image），通过更改 background-image 的值实现帧的切换。但是这种方式会有以下几个缺点，所以该方案不推荐。

（2）连续切换雪碧图位置（推荐）

我们将所有的帧动画图片合并成一张雪碧图，通过改变 background-position 的值来实现动画帧切换。分两步进行：

步骤一： 将动画帧合并为雪碧图，雪碧图的要求可以看上面素材准备，比如下面这张帧动画雪碧图，共20帧。

步骤二： 使用steps阶梯函数切换雪碧图位置

先看写法一：