在animation的属性中，有个属性 animation-timing-function 一共具有如下这些值

CSS

贝塞尔缓动就是完成补间动画的，比如流畅的缩放、位置移动等动画。

但是逐帧动画没有补间效果的，它不是电脑根据初始和结束状态的差异自动生成中间的过渡帧，而是每一帧都是关键帧，需要自己定义每一帧的状态。

比如像下面这样的图，就只能通过逐帧动画来实现运动效果↓

这几个属性值就是用来处理逐帧动画的：

CSS

steps(number,position) ，有两个参数。

number表示动画的段数。关键帧的数量=段数+1。

position这个比较难理解，有两个值：end和start。end是默认值。

先看一个效果。

两个小球，从0px运动到400px，分为了4个动画步骤，有5个关键帧。第一个是start模式，第二个是end模式。

发现start模式是时间一开始，直接进入第二个关键帧状态，然后顺利顺利走完全程。

end模式有点傻，时间一开始，从第一个关键帧开始跑，结果时间结束了，才走完第四个关键帧，没有完成全部路程就over了。

所以start和end的名字和它所表示的含义刚好相反。

比如执行次数或者填充模式。

为上面的小球加上infinite，可以看出start模式第二次开始的运动都是从第二个关键帧开始的。

加上forwards模式则变得不一样了，forwards是向前的单词意思，但是表示的则是保留动画最后的运动状态，意思和功能也是相反的。

第二个end模式的小球终于有机会走完全程了。

所以，当为end模式设置了forwards的时候要小心，因为它其实多走了一步。

1、这头熊的原始素材一共有8个步骤。

所以使用 steps(8,end) 是最好的方式，因为如果使用 steps(8,start) ，则第一帧不能执行，最后一帧会闪白，图片消失。

因为要一直运动，所以需要加上infinite，当执行完最后一张图的时候，再返回到第一张图，形成一个连贯的完步。

通过背景图片的 background-position 的改变，形成熊的运动。

CSS

可以打开codepen编辑器，把运动时间设置更大一点，可以看到慢动作，一帧一帧是如何显示的。

2、这个logo一共有24张图片

但是logo只运动一次，并且停在结束状态，根据end模式的特征，如果加上forwards的话，会多运动一步。

所以，这里是 steps(23,end) ，为什么是23步，而不是24步，因为forwards模式对它的影响。要想最后一步还要看到图片，那么背景图片的挪动就要少挪动一个图片的宽度。图片整个宽度4800px，每一张图200px的宽高。所以背景图片只需要往左边挪动-4600px即可。

CSS

通过上面的案例可以看出，对象的运动效果由逐帧绘制的图片的间距所影响。间距一样，则速度一样。利用steps不能去改变现成的图片帧与帧之间的速度。

但是利用 step-end 或者 step-start 却是可以的。

3、 step-end 的特别用处

其实 step-end 等价于 steps(1,end) ， step-start 等价于 steps(1,start) 。

只有一个步骤的逐帧动画，却可以利用好时间的改变和距离的改变做出速度不同的效果来。

熊从左边快速奔跑出来，一共跑了六步，一步比一步速度放慢。然后在原地踏步。

首先这是一个逐帧动画，但是要实现不同的速度，又没有办法改变原来素材图片与图片之间的距离，所以要使用另外的办法。

第一个完步时间间隔小，left的值间隔大，相当于速度快。背景图片往左移动一张，left的值往右改变一次，熊实现往前奔跑。

CSS

第二个完步的时间间隔稍微大点，left的间隔小了一点，速度变慢了一些。依次类推，速度逐渐放缓。第二个完步又从第一帧开始。

CSS

所以说利用step-end还是可以做出速度不一样的逐帧动画的。

在线制作雪碧图： https://www.toptal.com/developers/css/sprite-generator

1、运行Flash MX 2004，文档属性默认。 2、单击第1帧，利用椭圆形工具在舞台的左侧画一个红颜色无边框的盯。 3、单击第1帧，按快捷键“F6”键，连续在时间轴上插入10个关键帧。如图所示。

4、单击第2帧，使用鼠标或者键盘上的方向键调整舞台中的红色圆的位置，使之向右侧移动一小短距离。 5、重复第4步骤的方法，分别设置其余9个帧里面的圆形位置。如图所示。

6、测试效果。

我们发现这个效果与移动渐变效果基本相同，那为什么还要用逐帧动画呢？原因在于，移动渐变动画是由Flash程序产生的，有一定的机械性和局限性，对于表现复杂的移动效果的优势就不是很明显了。逐帧动画正好补充了这个空白。使变化的效果更加细腻。

7、下面我们再做一个逐帧动画，新建一个Flash文档，属性默认。 8、单击第1帧，利用矩形工具绘制一个无边框的黑色矩形，并把它放置在舞台的上端； 9、在时间轴上按快捷键“F6”键，插入9个关键帧入土，如图所示。

10、单击第2帧，使用箭头工具，适当的拉伸黑色的图形。 11、按照此方法，依次拉伸其余的九个帧。如图所示。

12、测试效果，从第1帧到第10帧黑色图形逐渐变化，就像是流动下来一样。这就是形状逐帧动画。它与形状渐变动画是没有区别的，形成的效果是一样的，但是与移动渐变动画一样，逐帧动画在表现复杂变化效果方法的优势明显。

注 意 ――因为逐帧动画所涉及到的帧的内容都需要创作这手工去编辑，任务量比较大，所以在确定使用哪种动画形式的时候，一定要做好思想准备。

提 示 ――制作逐帧动画不涉及到帧里面的内容是元件还是图形或者位图，这一点与移动渐变动画，形状渐变动画不同。

技 巧 ――在制作逐帧动画的时候，往往前一帧与后一帧的内容没有大的差别，我们就可以使用Flash MX 2004提供的绘图纸外观工具来观察前一帧，或者全部帧的变化，对于我们精确的把握动画效果，有极大的帮助。如图所示。

试一试――利用工具栏里面的“自由变形工具”自己试一下逐帧动画效果。

分 析――制作逐帧动画一定要注意两帧之间的联系，跳跃不要太大。虽然移动渐变动画和形状渐变动画的过渡效果是非常平稳的，但是对于复杂动画变化来说使用逐帧动画有明显的优势。所以锻炼制作逐帧动画是非常必要的。

特别提示

源文件效果与移动渐变动画和形状渐变动画相似，其实逐帧动画的制作是非常复杂的，需要我们具有耐心才能够完成。

特别说明

逐帧动画是最基本的动画原理。小时候我们看到过的把一本书的每一页都画上形状，快速的翻动书页，就会出现连续的动画。这就是逐帧动画的原理。

人眼在正常情况下有一个视觉残留，逐帧动画正是利用这一点来完成自己的动画效果。在制作逐帧动画的时候要灵活应用，可以采取空1帧，空2帧的做法。

问题二：如何制作逐帧动画.ppt 首先打开flash软件并新建文件

让我们来熟悉一下flash的操作界面，如图，大家也可以到flash官网或者一些flash教程网了解flash的一些基本信息

准备素材，我这里是一只振翅的蝴蝶，图片为png格式，大家入门阶段可以上网去找素材制作，后面出师就可以自己绘图制作动画了

使用文件》导入》导入到舞台将蝴蝶第一个动作导入到舞台上面

右键动画区第二帧格插入关键帧，然后同第四步导入蝴蝶振翅的第二个动作，后面有多少个动作使用相同的方法导入

这是导入所有动作的完成状态

因为每一帧导入我们都是随意放置位置的，如此会导致切换帧的时候动画抖动太大，所以下面我们要对齐所有图片元件，使其每一帧都处在同一个中心点，这里我们要用到视图》标尺

到这里我们的制作就差不多了，按一下空格键，蝴蝶就翩翩起舞咯~

最后我们要做的就是将动画导出到相应位置就可以了，导出文件格式为swf格式

问题三：用css怎么做一个简单的逐帧动画，素材在哪里找 win系统自带的视频编辑软件就可以，导入照片后，把照片全选然后选择编辑，找到每张照片播放速度，一般默认是7秒，设置成0.03-0.07秒之间，然后导出，不要在软件里预览了，照片太多了软件跑不动，直接导出成视频就可以了。

问题四：如何让一段逐帧动画成为元件 补间和你转换成逐帧占用的cpu是一样的，根本原因在于大量矢量元件的旋转和缩放。如果你的动画已经没有优化的余地，那么将fla导出成gif或者批量png好了，在文件>导出>导出影片里面选择，不过不推荐，因为这样子就不是矢量动画了

问题五：如何制作简单的逐帧动画 在开始的0.1秒绘制个图，在0.3秒地方再画个图。

然后参照2个图在0.2秒地方绘制图。

问题六：求教flash逐帧动画制作流程 1、在flash舞台大小确定后，从窗口中把“对齐”调出来，同时选中所有图片调整大小即可。2、既然做逐帧动画，那就是每一帧都是关键帧，每一帧就是你画的图片中的一个，不需要补间，跟我们在书的角落画小人是一样的。3、逐帧动画是比flash里的补间大些，毕竟每一帧都有图片，而不是靠flash的补间，如果太离谱，楼主可以看看是不是你把图片都弄成元件什么的，太复杂了；关于画质，可能是在调整图片大小的过程中被过分压缩了，设置改一下即可。最后，多嘴一句，楼主如果一定要用flash做逐帧的画，就是先把图片弄到库里面，然后在“图层一”上面一帧一帧创建空白关键帧，把图拖到舞台上就行了。其实，这样的用ppt都可以了，用windows图片查看器都能看到结果。

问题七：flash逐帧动画怎么做 如果有FLASH动画问题可以来我吧里问。注意要写明具体问题，

或发邮件给我，

邮件

[email protected]

贴吧

tieba.baidu/f?kw=lansechenji&fr=index

先不要说FLASH，先要说动画。

动画制作分关键帧和补间帧。关键帧就是关键画面，补间就是形成运动的画面。

举例子，你抬手，要抬时候的起始动作是关键帧，当你抬起后总会停止停下的时候就是另1个关键帧。而其中手的运动就是补间帧。

把这个按动画流程来说。

动画是时间与画面的关系，也就是一定时间内所做的动作，所谓的的动作就是画面。

所以先要设定时间，播放设备，比如电视是每秒24帧。

咱们0.3-0.4秒抬手。那么时间长度就是9帧，（注意为什么不把时间固定。因为帧要算的话是按13579这样来算，这样你随意设定开始和结束中间都有插补间的位置，而你要是1帧和2帧，那么中间就没补间位置了也就无法做动作了。）

第一帧就画上起始动作的画面，第9帧画出抬起的画面。

然后第5帧参考1和9帧来画中间过度画面，但是你会发现一卡一卡的，因为帧数不够，一般人眼要看的流畅，至少每秒要有12张画面变化。

所以1到5之间在第3帧插入帧参考1和5绘制补间，5-9中的第7帧插入画面参考5-9绘制。

这样一个抬手的动作就可以了。

这个就是最基本的制作流程。

那么现在换到FLASH里，

1，因为翻译问题，FLASH里的有图帧都叫关键帧，所以咱们要把动画关键帧改个名字来叫以免错误，咱们就叫关键张好了来区别。

2，咱们知道了流程就知道了，时间和画面是要固定一方面的，而FLASH什么都可以改反而不容易知道流程。咱们一般固定的是时间帧频，这个不要动。

3，举例里是标准制作，FLASH有很多功能，但是要记住，这些功能都是辅助标准制作的补间。而并非取代。这个经常只会FLASH的爱好者搞错，结果就是全是FLASH软件功能的动画，导致FLASH动画评价很低。

4，知道重要层级。1是关键张也就是关键的画面，（补间有时你随便画几条线都可以，但是关键画面却是主要给人印象的画面不可以缩减）2，是逐帧补间（这个重要度是因为万能，比如转头等，FLASH里你用元件是做不出的，只能逐帧，所以当你用元件做不出或不流畅时候，需要马上改用逐帧）3是元件动画（FLASH元件动画比较受限制只能缩放移动等，合理利用可以节省工作量，但是要注意，元件动画需要改动关键画面，所以要以不破坏关键画面的时候才可以用）4是其他功能（其他功能如遮罩，引导，形状补间骨骼等，这些都是需要和元件一样多层，又或要其他标准，所以也是容易破坏关键张的，所以要合理使用）

至于软件本身的基本操作，可以看软件上的帮助和教程，有详细的解释和实例演示

问题八：请教制作逐帧动画的方法 很简单的，你要做成什么样的效果啊 ？

问题九：pr怎么合成逐帧动画 打开pr，新建项目-选择你需要的视频大小，然后确定-双击项目面板-导入-选择（把导入组勾上）-再拖入时间线调整好你的视频-文件-导出-选择你要导出的视频格式，你等会吧，渲染一会，就好了，不懂再问我。

问题十：逐帧动画的图片们是怎么做的 你是问逐帧动画的每一帧的图是怎么做的，还是说的象逐帧动画一样的图片是怎么做的？

Demo效果如下：

到这里我们的 HTML 文件就全部写完啦

这时候我们就可以得到一个图片的效果。

这里小图标总共有 11 张，相互之间的变化就是 10 步，所以动画设置如下

这样就得到了一个无限循环的逐帧动画

这样下来，默认就不会动了，然后在hover的时候“运行”就行了