在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
@keyframes规则用于指定动画规则，定义一个CSS动画的一个周期的行为；可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。动画是使用可变的CSS样式创建的；在动画期间，CSS属性可以多次更改。
定义动画，必须从@keyframes规则开始。@keyframe规则由关键字“@keyframes”组成，后跟一个标识符，给出动画的名称（将使用animation-name引用），然后是一组样式规则（用大括号分隔）。然后，通过使用标识符作为“animation-name”属性的值，将动画应用于元素。
语法：
animation-name： 这是必需的，它定义动画名称。
keyframes-selector： 定义动画的百分比，它介于0％到100％之间。一个动画可以包含许多选择器。
在大括号内，定义关键帧或路径点，这些关键帧或路径点在动画期间的某些点上指定要设置动画的属性的值。这允许您在动画序列中控制中间步骤。例如，一个简单的动画@keyframe可能如下所示：
0%”和“100%”是关键帧选择器，每个都定义了关键帧规则。关键帧规则的关键帧声明块由属性和值组成。
还可以使用选择器关键字from和to，而不是分别使用0%和100%，因为它们是等价的。
关键帧选择器由一个或多个逗号分隔的百分比值或from和to关键字组成。注意，百分比单位说明符必须用于百分比值。因此，' 0 '是一个无效的关键帧选择器。
注意：为了获得浏览器的最佳支持，请始终指定0％和100％选择器。
示例1：
效果图：
示例2：
效果图：
更多 web前端开发 知识，请查阅 HTML中文网 ！！
交互动画是指在动画作品播放时支持事件响应和交互功能的一种动画，也就是说，动画播放时可以接受某种控制。这种控制可以是动画播放者的某种操作，也可以是在动画制作时预先准备的操作。这种交互性提供了观众参与和控制动画播放内容的手段，使观众由被动接受变为主动选择。最典型的交互式动画就是FLASH动画。观看者可以用鼠标或键盘对动画的播放进行控制。Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash也是存储芯片的一种，通过特定的程序可以修改里面的数据。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。在出到Flash 8以后， Macromedia又被Adobe公司收购。Flash通常也指 Macromedia
Flash Player(现Adobe FlashPlayer)。其它辅助工具：photoshop,flex, illustrator等。序列帧如果过多过大容易照成一瞬间的加载卡顿现象，十分影响用户体验；序列帧过多会影响应用的包体大小，而许多渠道对包体大小都是有或多或少限制的。总结：如果仅仅是一些元素的位移，缩放，旋转，淡入淡出这类简单的动画，强烈建议由美术提供基础元素，程序实现具体动画。至于其它类型的动画就得视情况而定了。
