CSS steps() 语法
在 CSS 中，steps() 函数用于定义 “CSS 动画” 或 “CSS 过渡” 的步进效果。它不像 cubic-bezier() 那样创建平滑的变化曲线，而是将动画分成离散的步骤，每一步都 “跳跃式” 地进行。
steps() 函数特别适用于需要逐帧控制的动画效果，例如：打字机效果、翻页动画、精灵图帧切换等。
语法：
steps(number-of-steps, direction)说明：
property 是一个支持时序函数的 CSS 属性，一般是 animation-timing-function 或 transition-timing-function。
steps() 函数接收以下 2 个参数。
number-of-steps（必选）：是一个正整数，表示将动画划分成多少步。步数越多，越接近连续动画；步数越少，跳跃感越明显。direction（可选）：步进方式，决定动画何时 “跳” 到下一帧，支持以下几种取值：jump-start（或 start）：动画从第一步立即开始，跳过初始状态。jump-end（或 end，默认值）：动画在最后一步结束，跳过结束状态。jump-none：动画在起点和终点都不跳跃，保持完整步骤。jump-both：动画在起点和终点都跳跃，增加一步。
其中，步进数（number-of-steps）要与动画帧数保持一致，例如精灵图有 10 帧，那就使用 steps(10)。
CSS steps() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS steps() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS steps() 函数是如何使用的。
示例 1：steps() 实现步进过渡效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightskyblue;
animation: move 2s steps(4) infinite;
}
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(400px); }
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，steps(4) 表示将动画分成 4 步。其中，div 元素会在 2 秒内从 0 移动到 400px。需要注意的是，它不是平滑移动，而是以 100px 为单位跳跃 4 次（每次 100px），从而产生明显的步进效果。
示例 2：steps() 实现打字机效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
font-family: monospace;
font-size: 24px;
width: 0; /* 初始宽度设为 0，动画从这里开始 */
overflow: hidden;
white-space: nowrap;
animation: type 2s steps(8, end) infinite;
}
@keyframes type {
from { width: 0; }
to { width: 8ch; }
}
</style>
</head>
<body>
<p>lvyenet</p>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 @keyframes 规则定义了一个 CSS 动画帧。steps(8, end) 表示将文本宽度分成 8 步，从而模拟打字机效果。然后，p 元素会逐步显示 “lvyenet” 文本，每次跳跃一个字符，并且循环播放。
需要注意的是，steps(8, end) 不能写成 steps(7, end)，否则可能效果会有问题。小伙伴们可以自行试一下。
