iOS上steps()跳帧卡顿的根本原因是WebKit（尤其iOS 15–16）对百分比关键帧解析存在精度偏差，导致帧定位错误；应改用px/rem等确定性单位、严格匹配steps(n)与关键帧数、添加空白帧并设animation-fill-mode: forwards。
为什么steps()在iOS上会跳帧或卡顿
根本原因不是steps()写错了，而是WebKit（尤其是iOS 15–16的旧版Safari）对steps(n, end)中百分比关键帧的解析存在精度偏差。比如@keyframes里写0%, 25%, 50%, 75%, 100%，WebKit可能把25%算成24.999%，导致某一步被跳过或重复——尤其在background-position逐帧动画中，直接表现为“少一帧”或“闪回第一帧”。
用整数像素/视口单位替代百分比定义关键帧
避免所有百分比值参与帧定位，改用确定性更强的单位。这不是“推荐做法”，是iOS上实际有效的兜底方案：
- 雪碧图动画：用
px或rem写死background-position，例如background-position: 0 0; background-position: -64px 0; background-position: -128px 0; - 配合
steps(3)时，动画总时长必须严格对应3个等长区间，不能靠百分比“估算”时间点 - 如果原始雪碧图宽384px、每帧64px，就写3帧位移，不要凑4帧再删一帧——
steps(3)必须和关键帧数量严格一致
加空白帧+forwards补最后一帧显示
常见现象：动画播完立刻回到起始态，最后一帧完全看不到。这不是steps()失效，而是动画结束时没保留终态：
- 在雪碧图末尾追加一帧纯透明/空白图，让
steps(n)的最后一跳落在空白帧上，视觉上等于“停在最后一帧” - 必须加
animation-fill-mode: forwards，否则即使写了100%关键帧，动画结束后仍会回退 - 慎用
infinite+forwards组合——无限循环下forwards无意义，只在单次播放时生效
遇到iOS兼容问题优先降级而非硬扛
别在steps(4, end)上反复调参。实测表明，iOS Safari对steps()的支持断层明显：
- iOS 17+ 基本稳定，但低端机型（如iPhone 8）仍有偶发跳帧
- iOS 15–16 中，
steps(1)最可靠；steps(2)开始出现概率性丢帧；≥3时失败率超60% - 真要保全量兼容，用
ease-in-out模拟“近似跳变”更稳妥：比如两帧动画，用0% { opacity:1 } 49% { opacity:1 } 50% { opacity:0 } 99% { opacity:0 } 100% { opacity:1 }，配合短时长（0.2s）也能达成类似效果
复杂点在于：steps()的语义是“离散状态切换”，而降级方案本质是“极快渐变”。如果业务强依赖状态精确性（比如游戏UI反馈），那空白帧+整数定位+forwards仍是唯一可行路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
