选 ease 还是 linear 取决于是否需模拟物理惯性：ease（cubic-bezier(0.25,0.1,0.25,1)）适合按钮缩放等拟物交互，linear（cubic-bezier(0,0,1,1)）适用于进度条、指针转动等需时间精度的场景。
选 ease 还是 linear，关键看动画是否需要“模拟物理惯性”——不是看它“好不好看”，而是看用户对起止节奏的感知是否合理。
为什么 ease 看起来“卡一下”？它根本就不是匀速
ease 等价于 cubic-bezier(0.25, 0.1, 0.25, 1)，本质是“慢–快–慢”。人眼对开头和结尾的加速度变化极其敏感：起始加速太弱，会感觉“迟迟不动”；结尾减速太强，又像“突然刹停”。这不是 bug，是设计意图。
- 用在按钮 hover 缩放、弹窗淡入等交互反馈上很自然——它模仿了真实物体被推动后的响应
- 但用在 loading 进度条、倒计时数字切换、SVG 路径描边时，用户会明显察觉中间一段“嗖一下过去”，而起止段几乎没变化
- 误以为
ease是“默认所以安全”，结果在机械感强的场景里反而暴露节奏缺陷
linear 什么时候真该用？别只当它是“简单粗暴”
linear 就是 cubic-bezier(0, 0, 1, 1)，全程恒定速率。它不讨喜，但不可替代：
- 仪表盘指针转动、时间轴刻度平移、canvas 同步位移——这些需要精确时间映射，
linear才能保证 30% 进度 = 30% 时间 - 做 loading 指示器旋转（比如
transform: rotate()）时，ease会让转速忽快忽慢，破坏节奏感；linear才显得稳定可信 - 比起手写
cubic-bezier(0, 0, 1, 1)，直接写linear更可读、更不易出错
transition-timing-function 没生效？先查这三处
调了 ease 或 linear 却没反应，大概率不是函数问题，而是过渡根本没触发：
- 确认你要过渡的属性，在 :hover / class 切换中**确实改变了值**——比如写了
transition: background-color 0.2s ease;，但 :hover 里没声明新的background-color，那它压根不会动 - 检查是否被更宽泛的
transition: all覆盖，尤其注意父级样式或 reset 库里的全局声明 -
transition-property如果设成none或空值，整个过渡链就断了，ease再准也没用
cubic-bezier() 调参翻车最常见原因
想微调节奏却越调越不对？大概率踩了这两个坑：
-
cubic-bezier()的前两个参数（x₁, y₁）和后两个（x₂, y₂）中，**x 坐标必须落在 [0, 1] 区间内**——超出就会静默降级为ease，你改半天根本没生效 - 别在代码里硬背数值，打开 Chrome DevTools 的“Animation Inspector”，直接拖拽贝塞尔控制点，实时看曲线和预览效果，比手动试错快十倍
- 要“更早发力”，把
ease-in的起点压得更平缓，试试cubic-bezier(0.1, 0.5, 0.3, 1)；要“急收尾”，避免y2 > 1，否则 Safari 可能渲染异常
真正难的不是记住哪条曲线对应什么效果，而是判断某个交互动作——到底是需要“拟物感”还是“时间精度”。选错 timing function 不会报错，但用户会在潜意识里觉得“哪里不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
