前言

是不是很多人认为只有连续的变化才叫动画。

上图是连续旋转变化，下图是断断续续切换状态，请查看以下两个动画：

是否认知的感觉又强烈了一点呢？

假设我把下图的 loading 播放速度加快，继续看：

是否发现和图一的 loading 一样了，是否发现认知出现了偏差？

这种肉眼可见的断断续续的动画(如图一的下图，图二的下图其实也是，只是速度快而已，感知不明显)称为帧动画，又叫序列帧动画，定格动画，逐帧动画等，是一种动画技术，其原理为将每帧不同的图像连续播放，从而产生动画效果。

简而言之，实现帧动画需要两个条件：

1. 相关联的不同图像，即动画帧；

2. 连续播放。

原理

CSS 帧动画是通过不断变换 keyframes 中每个阶段的属性来实现，如上图的例子 0% 处和 100% 处分别使用不同的 transform 属性的 rotate 实现了 loading 效果。然而 CSS 动画默认的动画过渡方式的平滑的，平滑的过渡对逐帧动画会造成类似滑动的效果，所以需要动画时间函数 animation-timing-function 中的阶梯函数 steps 属性来设置过渡方式。

PS：steps 函数衍生出了 step-start 和 step-end 两个封装函数；cubic-bezier 函数则有linear，ease，ease-in，ease-out 以及 ease-in-out。

steps

steps 指定了一个阶梯函数，接受两个参数：

1. 第一个参数接受一个整数值，表示两个关键帧之间分几步完成；

2. 第二个参数可选，接受 start 和 end 两个值，默认值为 end，指定在每个间隔的起点或是终点发生阶跃变化；

PS：step-start 等同于 step(1, start)。step-end 等同于 step(1, end)。

动画时间函数 animation-timing-function 中的阶梯函数 steps 兼容性如下：

由上图可知，无论在移动端还是 PC 浏览器中，steps 的兼容性都是非常好的。

那么来理解 steps 的工作机制，如下图：

举个栗子，方便粉友们理解，有如下CSS3动画keyframes，定义了一段从0~100px的位移：

@keyframes move {    0% { left: 0; }    100% { left: 100px; }}

假设 steps 函数第一个参数值是5，则相当于把 100px 分成了 5 段，如下示例图：

假设 steps 函数第二个参数值是 start，如下示例图：

假设 steps 函数第一个参数值是 end，如下示例图：

是否瞬间思路清晰，必须感谢 CSS 大佬张鑫旭，栗子取自他的文章，有兴趣的粉友在文末找到本文相关参考文献。

稍微补充一个 animation-fill-mode 相关知识，后续会使用到。

CSS 属性的 animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

animation-fill-mode 的属性值为 forwards 目标将保留由执行期间遇到的最后一个关键帧计算值，使用其则表示如下示例图：

了解上述相关知识，那么赶紧来看个小姐姐的栗子，效果图如下：

示例代码如下：

        CSS 逐帧动画               html, body { width: 100%;height: 100% }      html, body, div { margin: 0; padding: 0; }      .box { margin: 50px auto; }      .sister {         width: 204px;         height: 133.3px;         background: url('./images/sister.png') no-repeat 0 0 / 204px 800px;         animation: smile 3s steps(1, end) 0s forwards;      }      @keyframes smile {         0% { background-position-y: 0px; }         20% { background-position-y: -133.3px; }         40% { background-position-y: -266.6px; }         60% { background-position-y: -400px; }         80% { background-position-y: -533.3px; }         100% { background-position-y: -667px; }      }    

示例代码中图片如下：

那么为什么上述小姐姐案例代码中的 step 第一个参数是1？

steps 是 animation-timing-function 的一个属性值，animation-timing-function 应该于两个 keyframes 之间，而非整个动画。在上述案例代码中的 keyframes 中，已经把每个帧都写出来了，因此两个 keyframes 之间的间隔是1。

于是就有了更简洁的写法，可以把 keyframes 的计算直接交给 steps 来完成。

可以把上述案例的 keyframes 处调整如下，

.sister {  animation: smile 3s steps(5, end) 0s forwards;}@keyframes smile {    100% { background-position-y: -667px; }}

运行效果一样，而且写法更简洁。

应用场景

CSS 帧动画可以用于实现复杂点的动画效果，动画效果更细腻，并且设计师有更多自由的发挥空间，甚至可以定义到每一个时间刻度上的展现内容。可以应用于页面的 Loading、小人物及小物体元素的简单动画。具有以下优点：

1. 可以自由控制播放、暂停和停止

2. 可以控制播放次数，播放速度

3. 可以添加交互，在播放完成后添加事件

4. 浏览器兼容性好

注意事项

素材：帧动画素材图片宽高最好是偶数，合成雪碧图的素材数量最好是偶数，帧数最好是偶数，图片拼接处最好有一定的留白。

适配：移动端适配不推荐使用 rem，因为 rem 的计算会造成小数四舍五入，造成一定的抖动效果，建议直接用 px 作为单位，同时辅助以scale(zoom)媒体查询进行适配。如果使用 rem 适配，试试使用 transform 的方案，抖动问题可以得到优化解决。

关于上述提及的 rem 布局导致帧与帧之间的盈亏互补现象导致动画抖动，若想要深入了解，推荐阅读凹凸实验室的《CSS技巧：逐帧动画抖动解决方案》。

PS：使用 will-change 可以在元素属性真正发生变化之前提前做好对应准备。

总结

CSS 帧动画技术对于一些复杂的动画有了新的答案，甚至你的一些天马星空的想法，在它面前可能就变得轻而易举。

总的来说一句话，真香！！！

参考

• 张鑫旭

• 掘金-小玛丽在隔壁

• 掘金-迅雷前端

• 凹凸实验室-燕婷

炒粉不加蛋，香味少一半