应优先使用ease-out或cubic-bezier(0.25, 0.46, 0.45, 0.94)替代默认ease，因其起步更灵敏、收尾更柔和；opacity和color变化宜用ease-in-out或微调贝塞尔，避免linear导致的机械感与兼容问题。
别用默认 ease，它在大多数交互里都显生硬——尤其小位移、颜色变化或图标缩放时。
transform 位移/缩放/旋转该用哪个？
对节奏最敏感的属性，ease 起步太慢易迟滞，收尾太急像撞墙。直接用 ease-out 或更稳的 cubic-bezier(0.25, 0.46, 0.45, 0.94)（Material 风格惯性曲线）。
- 按钮 hover 缩放：用
cubic-bezier(0.175, 0.885, 0.32, 1.275)模拟按压弹性反馈 - 下拉菜单弹出：优先
ease-out，保留响应感又不拖沓 - 避免
ease-in—— 启动延迟会让人觉得“卡了一下”
opacity 和 color 变化为什么总显得突兀？
人眼对明度/色相渐变更敏感，ease 中间段斜率偏高，容易出现“跳变”。ease-in-out 是安全起点，但大跨度色值建议微调贝塞尔：
- 小范围明度变化（如浅灰→深灰）：
ease-in-out足够 - 大跨度（如深蓝→亮黄）：
cubic-bezier(0.4, 0.1, 0.3, 1)起步缓 + 中段稳 + 收尾柔 - 别用
linear—— 均速在色彩插值中反而机械感强，且旧安卓 WebView 对linear解析可能异常，改用cubic-bezier(0, 0, 1, 1)更稳
多个属性共用 transition 时 timing-function 怎么配？
缓动函数不是全局生效，而是严格按顺序匹配属性。写错就全回退到 ease：
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
transition: transform 0.3s ease-out, opacity 0.3s ease-in-out; - 错误写法：
transition: transform 0.3s, opacity 0.3s ease-in-out;→transform实际用的是默认ease - 安全写法：拆开三属性，确保
transition-property、transition-duration、transition-timing-function长度一致，比如都写三个值
什么时候该放弃贝塞尔，改用 steps()？
steps() 不是为“顺滑”，而是为“可控跳跃”。只在需要离散节奏时用：
- 精灵图动画、数字翻牌、状态灯切换：
transition: background-position 0.4s steps(8, end) - 必须配合足够 step 数（至少 6–8）和合理时长（0.4s–0.6s），否则卡顿
- 别用
steps()去“模拟平滑”——它和顺滑无关，强行用于 color 过渡只会更刺眼
真正影响自然感的，从来不是“选哪个函数”，而是“这个属性值变化有没有物理对应”。比如阴影扩散要收尾感，就用 ease-out；而按钮按下反馈要弹性，就得靠自定义贝塞尔——控制点 y2 必须小于 1，否则结尾没减速趋势。
