step-end 是 animation-timing-function 的关键字值，等价于 steps(1, end)，用于实现无过渡的离散帧切换；它通过在每帧结束时才跳变 background-position 等属性，精准模拟像素动画的“卡顿感”，需配合雪碧图与严格对齐的关键帧使用。
step-end 是什么，它和像素动画有什么关系？
step-end 不是函数，而是 animation-timing-function 的一个关键字值，用于让动画在每帧结束时才跳变——这恰好模拟了像素画逐帧动画的“卡顿感”：没有过渡，只有离散状态切换。它和 steps(1, end) 等价，但直接写 step-end 更简洁、语义更明确。
常见错误是把它当 CSS 函数用，比如写成 step-end() 或试图传参，结果样式完全不生效。它只接受在 animation-timing-function 中作为值使用，不能独立调用。
适用场景很具体：当你有一组固定尺寸的精灵图（sprite sheet），或一组预定义的 class 切换状态（比如 8x8 像素角色帧），且希望每一帧停留完整时长、无插值过渡时，step-end 就是唯一自然的选择。
怎么用 step-end 实现 sprite sheet 逐帧动画？
核心是两步：把多帧拼成一张图 + 用 background-position 按帧偏移 + 用 step-end 控制跳变时机。
@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: -128px 0; }
}
<p>.pixel-sprite {
width: 32px;
height: 32px;
background-image: url('walk-sprite.png');
animation: walk 0.5s step-end infinite;
}</p>
注意三点：
-
steps(4, end)和step-end效果一致，但step-end隐含 steps(1, end)，所以必须靠 keyframes 显式定义 4 个关键帧，否则只会跳一帧 - 帧数必须严格对应 keyframes 百分比分割点；少写一帧，最后一帧就永远卡住
-
background-position偏移量必须是整像素，且与 sprite 图中帧宽高严格对齐，否则会出现模糊或错位
为什么不用 JavaScript 手动切换 class？
手动切 class（比如用 setTimeout 切 .frame-0 → .frame-1）看似可控，但实际问题不少：
- 时间精度差，尤其在低帧率设备上容易丢帧
- 无法和 CSS 动画属性（如
transform、opacity）联动 - 每帧都要 DOM 操作，性能不如纯 CSS 渲染
- 很难做到 100% 同步播放多个像素动画元素
而 step-end 动画由浏览器合成器驱动，只要帧率稳定（通常 60fps），就能保证每帧精确停驻指定毫秒数，且天然支持 animation-play-state 暂停/恢复。
兼容性和常见失效原因
step-end 在所有现代浏览器（Chrome 43+、Firefox 28+、Safari 10+、Edge 12+）都支持，但 IE 完全不识别，会退化为 ease——动画变成滑动，像素感彻底消失。
最容易被忽略的是：动画时长必须能被帧数整除。比如 4 帧动画写 animation-duration: 0.33s，0.33 ÷ 4 = 0.0825s，浏览器内部计时可能产生累积误差，导致某帧多显示一帧或少一帧。稳妥做法是用整数毫秒，如 0.32s（每帧 80ms）或 0.4s（每帧 100ms）。
另外，如果父容器用了 transform: scale(2) 之类缩放，又没加 image-rendering: pixelated，像素边缘会被抗锯齿模糊——这不是 step-end 的问题，但常被误认为动画“不硬”。
像素动画的“硬”感，一半靠 step-end，另一半靠渲染设置和图像源精度。漏掉任何一环，都只是看起来像，而不是真的像素味。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
