阶梯感由 steps() 函数主动造成，非 ease 等连续函数所致；常见误用包括混写 timing-function、steps(1) 误当过渡、steps(n, end) 时序理解错误；真因常为属性不支持硬件加速、触发重排或 transition-property 漏设。
transition-timing-function 本身不会产生阶梯感
阶梯感（即“一格一格跳变”，不是平滑过渡）不是 ease、linear 或 cubic-bezier() 这些函数导致的，它们输出的都是连续数值。出现阶梯感，几乎一定是误用了 steps() 函数，或者把 steps() 和其它缓动混写却没意识到它完全接管了节奏逻辑。
steps(n) 是唯一会主动制造阶梯感的 timing function
steps() 的设计目标就是分步——它把整个过渡过程切成 n 等份，每份内属性值保持不变，只在分界点瞬间跳变。常见错误现象：
- 写成
transition-timing-function: ease, steps(4)，以为能“叠加”效果，实际浏览器只取第一个有效值（ease被忽略或报错降级） - 用
steps(1)做开关切换，结果 hover 时元素“啪”一下就变了，毫无过渡感，误以为是ease-out失效 - 配合
background-position做雪碧图动画时，steps(8)正确，但写成steps(8, end)却忘了end表示“最后一帧才跳”，导致第一帧空白
为什么改了 timing-function 还是看起来像阶梯？
真正的问题往往不在函数本身，而在动画属性或触发方式：
-
transform: translateX(100px)被写成left: 100px：left触发重排，浏览器可能降级为低帧率渲染，造成肉眼可见的卡顿“假阶梯” - 过渡属性是
font-size或line-height：这些属性无法硬件加速，且浏览器对它们的插值精度有限，小数值变化容易四舍五入成整数跳变 - 用了
transition: all 0.3s ease，但实际只改了opacity，其余属性（如height）被强制参与过渡，而height: 0 → auto根本不支持过渡，最终 fallback 成突变
调试阶梯感的三个关键检查点
遇到疑似阶梯的过渡，优先确认：
- 查 DevTools 的 Styles 面板，看生效的
transition-timing-function值是不是真的steps(...)，而不是你以为的ease-in-out - 检查是否同时设置了
transition-property：如果它漏写了正在变化的属性（比如只写了transform却没写opacity），那个属性就会无过渡直接跳变 - 用
will-change: transform强制开启合成层，排除因重排/重绘导致的掉帧假象；若加了之后变顺滑，说明原问题不是timing-function，而是性能瓶颈
阶梯感从来不是缓动函数的“副作用”，而是你明确选择了它，或无意中触发了它的底层机制。别怪 ease 不够平滑——它本来就没打算分步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
