一个栗子让你彻底弄懂CSS3补间动画和逐帧动画

CSS3提供了Animation关键帧动画，我们在工作中比较常用。但在写CSS动画的时候，其实Animation能实现两种动画模式：

补间动画

设置关键帧的初始状态，然后在另一个关键帧改变这个状态，比如大小、颜色、位置、透明度等，电脑将自动根据二者之间帧的值创建的动画。

代码:

执行效果:

逐帧动画

逐帧动画没有补间效果的，它不是电脑根据初始和结束状态的差异自动生成中间的过渡帧，而是每一帧都是关键帧，需要自己定义每一帧的状态。在Animation动画里面通过设置 animation-timing-function:step(number)来实现的。

比如下图(178 x 1122)里面有6只乌龟，实际上一只乌龟的游泳动作帧.。每张图连起来播放就是一只游泳的乌龟：

如果用补间动画通过改变图片的位置实现就是下面的效果：

用逐帧动画实现代码效果如下：

代码：

通过上面的对比可以看出，逐帧动画一般用在动物或人的动作变化。动画里面比较多，主要偏向游戏类的，在大多数游戏动画里的角色效果都是逐帧动画。逐帧动画就像拍电影一样的，独立的每帧图显示，连续动起来就是一个动作，当然更多要和美术一起合作实现逐帧动画。