step-end 是 animation-timing-function 的关键字值，等价于 steps(1, end)，必须无括号使用；它不控制帧数，帧数由 @keyframes 关键帧数量决定，且需确保 background-position 像素对齐、background-size 显式声明、容器尺寸匹配单帧大小。
step-end 不是函数，不能加括号调用；它只是 animation-timing-function 的一个关键字值，等价于 steps(1, end)，专用于让动画在每帧结束时才跳变——这正是像素画“卡顿感”的来源。
为什么写 step-end() 会完全失效
常见错误是把它当函数用：animation-timing-function: step-end();。浏览器直接忽略该声明，退回到默认的 ease，结果背景图平滑滑动，毫无逐帧效果。它只接受无括号、无参数的字面量写法。
必须这样写：
animation: walk 0.4s step-end infinite;
不是这样：
animation: walk 0.4s step-end() infinite; /* ❌ 无效 */
也不是这样：
animation-timing-function: step-end; /* ✅ 可以，但需确保其他 animation 属性已设 */
step-end 和 steps(n, end) 的关键区别
step-end 隐含 steps(1, end)，意味着整个动画只分 1 步——但它**不控制帧数**，帧数全靠 @keyframes 中的关键帧数量决定。
- 你写了 4 个关键帧（
0%, 25%, 50%, 75%, 100%），step-end就会停 4 次（每帧占满 1/4 动画时长） - 你只写
0% → 100%两个关键帧，step-end就只跳一次，从起始位直接跳到终点位，只剩一帧有效 - 若想播 8 帧，必须显式写出 8 个关键帧百分比点（或用
steps(8, end)配合线性关键帧）
像素对齐失败的三个隐蔽原因
即使 step-end 写对了，动画仍可能模糊、错位或闪屏，问题往往不在 timing function 本身：
-
background-position偏移量不是整像素（如用了-31.5px），尤其在缩放或 subpixel 渲染下，像素边界被撕裂 - 没设
background-size，导致高 DPR 设备（如 Retina）下雪碧图被自动缩放，帧宽高失准 - 容器
width/height与单帧尺寸不严格相等，或存在border/padding，造成裁剪偏移
正确做法示例（32×32px 像素帧，4 帧横排）：
.pixel-anim {
width: 32px;
height: 32px;
background-image: url('sprite.png');
background-size: 128px 32px; /* 必须显式声明 */
animation: walk 0.4s step-end infinite;
}
@keyframes walk {
0% { background-position: 0 0; }
25% { background-position: -32px 0; }
50% { background-position: -64px 0; }
75% { background-position: -96px 0; }
100% { background-position: -96px 0; } /* 末帧保持，避免回跳 */
}
什么时候该换用 steps(N, end) 而非 step-end
step-end 看似简洁，但实际限制极强：它要求你手动维护每个关键帧的百分比和位置，稍有遗漏（比如少写一帧），最后一帧就永远卡住或跳空。
更鲁棒的做法是用 steps(N, end) + 线性关键帧：
- 只需写
0% → 100%两段关键帧 - 浏览器自动把动画时长均分为
N段，每段停驻一帧 - 帧数变更时，只改
steps()参数和background-position终点值，不用动关键帧结构
例如 6 帧动画，用 steps(6, end) 更省心：
animation: run 0.6s steps(6, end) infinite;
@keyframes run {
0% { background-position-x: 0; }
100% { background-position-x: -300px; } /* 5 × 60px，不是 6 × 60px */
}
真正容易被忽略的，是 step-end 的“单步”本质——它不帮你数帧，也不校验对齐，所有离散跳变的精确性，全压在你手写的每个 background-position 值和关键帧分割点上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
