利用 css3 的 Animation 可以创建动画，在许多页面中能够替代 flash、JS 等，提升页面加载速度。众所周知，Animation 有 8 大属性，如下所示：
| | | 属性名 | 简 介 | | animation-name | 规定需要绑定到选择器的 keyframe 名称 | | animation-duration | 完成动画所花费的时间，以秒或毫秒计 | | animation-timing-function | 规定动画的速度曲线 | | animation-delay | 动画开始前的延迟 | | animation-iteration-count | 动画播放次数 | | animation-direction | 规定是否应该轮流反向播放动画 | | animation-play-state | 指定动画是否正在运行或已暂停 | | animation-fill-mode | 当动画不播放时（动画完成或动画延迟），要应用到元素的样式 |
以上这 8 个属性就决定了 Animation 能够实现一个什么样的动画效果。
本文主要介绍 timing-function 中的 steps() 函数。Animation 在执行动画时默认以 ease 函数进行过渡，ease 会在每个关键帧之间插入补间动画，所以动画效果是连贯的，
除了 ease 函数之外，linear 和 cubic-bezier（贝塞尔曲线） 等过渡函数也会为其插入补间动画。但有的时候某些效果不需要补间，只需要在关键帧之间进行跳跃，这时就用到了 steps 过渡方式。
1、什么是 steps？
steps() 是 Animation 中的一个 timing-function 函数， 能够实现动画的阶跃式变化，而非两个状态间的线性过渡。steps 接收两个参数：
[CSS] 纯文本查看 复制代码 steps ( n, [start | end] )
- 第一个参数是一个正值，指定动画分割的段数
- 第二个参数定义动画执行开始点，可设定为 start 或 end，这个值为可选值，当未传入参数时默认以 end 方式执行
2、如何使用 steps？
大家都见过很经典的菊花 loading 效果图，其实现原理很简单，一张静态图片，然后为其添加动画，设定在固定步数内旋转 360 度即可实现 loading 效果，具体实现方式如下：
[CSS] 纯文本查看 复制代码 <div>
<img class="loading-dot-step" src="./loading.png">
</div>
...
.loading-dot-step {
animation: loading 1s infinite steps(12,start);
}
@keyframes loading {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
静态图片如图所示：
![]()
给上面的静态图片添加动画，steps 设定 12 步完成两个关键帧间的动作轨迹，即从当前状态旋转 360 度，实现下面 gif 的动画效果。
![]()
除了菊花 loading 效果，很常见的还有线性 loading，其实现方式是利用 timing-function 的 linear 线性过渡函数，实现图片的连续旋转，此时的效果在视觉上就是连续的动画，如下图所示：
![]()
对于两种 loading 效果图，第一种为 steps 方式，第二种为线性过渡方式。两者实现原理类似，均在两个关键帧之间将图片从当前状态旋转至 360 度，当 timing-function 设置为 linear 时，从 0% 到 100% 的状态变化为匀速线性变化；当动作设定为 steps 时，将从 0 度旋转至 360 度的整个动画分为 12 步执行完，且每步之间是跳跃的，因此出现了经典的菊花 loading 效果。
3、分清 start 和 end
steps 的执行点 start 和 end 是许多人存在疑惑的地方，误用 start 和 end 可能会出现和理想情况下不一致的动画效果，许多人分不清两者的区别在哪里，下面以几个简单的 demo 来辅助理解这两个属性值的区别。
steps() 可简化出 step-start 和 step-end 这两个关键字。
- step-start 等同于 steps ( 1, start ) ，动画分成 1 步，动画执行时以左侧端点为开始
- step-end 等同于 steps ( 1, end ) ，动画分成 1 步，动画执行时以结尾端点为开始
[CSS] 纯文本查看 复制代码 <p>steps（1， start）</p>
<div class="a box"></div>
<p>steps（1， end）</p>
<div class="b box"></div>
...
.a{
animation:changeColor 4s infinite steps(1, start);
}
.b{
animation:changeColor 4s infinite steps(1, end);
}
@keyframes changeColor{
0%{
background-color: red;
}
100%{
background-color: blue;
}
}
上述代码显示效果如下图所示：
<html>
<p>1、steps（1， start）</p>
<div style="width:70px;height:70px;background:blue;"></div>
<p>2、steps（1， end）</p>
<div style="width:70px;height:70px;background:red;"></div>
</html>
代码可见，两者设定的均为 1 步执行完动画，实现将 div 的颜色从红色变为蓝色，但是我们看到的结果却是不同的，这就是由于 start 和 end 两个属性的执行点不同造成的结果差异。
规范文档中给出了关于 steps() 的函数图，如下图所示：
![]()
对比 steps 函数中的 start 和 end 两个执行点，由上图中步数为 1 的两图可见：
- 整个动作只有一步，在时间为 0 处，position 设置为 start 时动画的第一步已经执行完成
- 相同情况下，position 设置为 end ，当时间为 0 时动画的第一步尚未开始
同样，当步数等于 3 时，肉眼可见的 start 的执行点为第一步执行结束的位置，end 的执行点则为第一步尚未开始的位置 。由于动画执行的步数相同但起点不同，因此动画的结束点也不相同，设置为 start 的情况下，结束点为动画结束的最后一步的状态，而 end 为结束前一步的状态。
为了更加直观的展示两者执行的开始点和结束点的区别，本文以横向坐标图的方式对执行过程进行示意：
![]()
属性值设置为 start 时，在动画开始后，动画的第一段会马上完成。以左侧端点为起点，立即跳到第一个 step 的结尾处，并且保持这样的状态直到第一步的持续时间结束（后面的每一帧都将按照此模式来完成动画）。
属性值设置为 end 时，在动画执行的每一帧中，动画都保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点（后面的每一帧都按照这个模式来进行）。
现在可以解释上述 demo 中两个 div 颜色显示不一样的原因了，对于 steps 属性值为 start 的 a-box，进入画面时动画的第一阶段已经完成，因此我们不会看到红色，直接显示蓝色；对于 steps 属性值为 end 的 b-box，动画保持第一帧的状态直到结束，因此始终显示为红色。
4、何时使用 steps？
并非所有的动画都是连续的，对于某些非连续变化的效果就需要用到 steps 来实现。
例如钟表秒针阶跃式的转动，或者在动画中模仿人物或动物的脚印行走效果，再或者利用雪碧图实现人物跑动的效果等等。下面详细介绍一下人物跑动效果的实现方式。
人物奔跑 demo
[CSS] 纯文本查看 复制代码 <div class="person"></div>
...
.person {
background: url('person.jpg') no-repeat;
background-size: 700%;
// 动画名称 持续时间 运动曲线（steps()分为几步）循环次数
animation: personBlast .8s steps(8) infinite;
}
@keyframes personBlast {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
其中 peoson.jpg 为人物动作分割的雪碧图：
![]()
人物动作雪碧图
本文奔跑动作实现方式为将原始雪碧图进行按图形帧数的倍数放大，然后设定steps为雪碧图的帧数，关键帧的动作为从（from）雪碧图左侧阶跃式跳跃到（to）右侧，跳跃步数为雪碧图中人物的个数，最终实现下面的跑动效果：
![]()
【注：此奔跑效果的实现方式不尽相同，此处只是其中一种，这样做是为了让大家更好的理解 steps 的应用场景，还有其他更友好的实现方式欢迎大家进行尝试】
5、请注意 ！！！
对于 Animation 的 timing-function 有一个需要引起注意的点，即：
timing-function 的执行位置为两个关键帧之间，而非整个动画
此处的 timing-function 指的是本文所讲的 steps 函数以及 linear、ease、cubic-bezier 等函数，这里还是通过一个简单的 demo 来了解这个点。首先看一下下面的动画效果：
![]()
steps作用位置
实现代码为：
[CSS] 纯文本查看 复制代码 <div class="test-a test"></div>
<div class="test-b test"></div>
...
.test-a {
animation: changeColorOne 1s steps(1) infinite;
}
.test-b {
animation: changeColorTwo 1s steps(1) infinite;
}
@keyframes changeColorOne {
0% { background-color: red; }
100% { background-color: blue; }
}
@keyframes changeColorTwo {
0% { background-color: red; }
25%{ background-color: blue; }
75%{ background-color: red; }
100% { background-color: blue; }
}
- 对于 class 为 test-a 的 div，为其添加的 changeColorOne 动画为 1 秒内完成 0% 至 100% 两个关键帧之间的颜色变化，其执行位置为 0% 至 100% 之间，因此始终显示红色（不设置 start 还是 end 时默认为 end）；
- 对于 test-b, changeColorTwo 的关键帧有 4 个，因此这时 steps(1) 的执行位置为 0% - 25% 两个关键帧中间执行一次、25% - 75% 两个关键帧中间执行一次、75% - 100% 两个关键帧中间执行一次，一共执行3次。由于执行点设定为 end, 因此在 0% - 25% 这一过程显示红色，25% - 75% 显示蓝色，75% - 100% 显示红色，动画整体效果即为上图 gif 所示。
因此：steps 并非作用于整个动画，而是作用于每两个关键帧之间，所以整个动画的执行时间还是 Animation 中设定的 1s。
6、结束语
Animation 时间函数中的 steps() 确实不好理解，但是一旦掌握了它会为我们的开发工作带来很大的效率提升，节省很多调试时间，也能快速定位问题。
希望本文的讲解可以帮助你更好的理解和使用steps()。
| 
收藏
淘帖
踩
