> 本文作者：刘军，叩丁狼高级讲师。原创文章，转载请注明出处。本文作者：刘军，叩丁狼高级讲师。原创文章，转载请注明出处。 ###1.帧动画百科 逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。 > 思考：如何通过css来实现帧动画？ ### 2.CSS实现帧动画 下面将会通过下图的**走路动画**来学习**CSS的帧动画**：  **1.编写默认的界面** ```html ``` 1).run.jpg 图片（ 1600*300 ）  2).运行代码后的效果：  **2.添加animation动画** ```html ``` 1).添加一个`animation: run 10s linear` 的匀速过渡动画，该动画主要是通过修改背景的定位`background-position`来移动图片. 2).运行代码后的效果如下图：  3).从执行的效果可以知道这并不是我们需要的走路动画效果，而是图片在x轴从0过渡1600的过度效果。 **3.添加步进数函数：steps()** 步进数函数：`steps( )` 会根据你指定的步进数量，把整个动画切分为多帧，而且整个动画会在帧与帧之间**硬切**，不会做任何插值处理( 过度效果 ) ```html ``` 1).添加步进数函数来实现帧动画。steps(8) 代表把动画平均分成8帧,并在1s内一帧一帧播放完8帧动画。 2).执行的效果如下图：  ​