ease 是先慢—后快—再慢，linear 是全程匀速；ease 适合 ui 交互反馈，linear 适合精确节奏动画；cubic-bezier() 的 x 坐标超 [0,1] 会静默降级为 ease。
ease 和 linear 在 transition-timing-function 里到底差在哪
差别不在“有没有缓动”，而在“缓动怎么分布”： ease 是先慢—后快—再慢（类似自然启停），linear 是全程匀速。人眼对开头和结尾的加速度变化最敏感，所以哪怕动画总时长一样，ease 看起来更“柔和”，linear 容易显得生硬或机械。
常见错误现象：transition: all 0.3s linear; 用在按钮 hover 上，点下去像被拽着动了一下；或者做 loading 进度条时用了 ease，结果中间一段跑得太快，用户根本没看清变化过程。
- 实际场景中，
ease更适合 UI 交互反馈（比如菜单展开、卡片浮起） -
linear更适合需要精确节奏的动画，比如倒计时进度、SVG 路径描边、时间轴刻度移动 - 两者性能无差异，但可读性上，
linear比cubic-bezier(0,0,1,1)直观得多，别为了“看起来高级”写后者
为什么改了 timing-function 却没生效
最常踩的坑是 CSS 优先级或覆盖逻辑出问题：不是函数本身无效，而是它根本没被应用到目标属性上。
典型错误现象：transition: opacity 0.2s ease; background-color 0.2s linear; 写在元素上，但 hover 时只有 opacity 动了，background-color 闪变——这是因为 background-color 在 hover 里没声明新值，浏览器压根不触发过渡。
立即学习“前端免费学习笔记（深入）”；
- 确保你要过渡的属性，在 :hover / :active / JS class 切换中确实改变了值
- 检查是否被父级或更高优先级的选择器里更宽泛的
transition: all ...覆盖了 - 注意
transition-property如果设成none或空值，整个过渡就废了，连ease都救不回来
cubic-bezier() 怎么调才不瞎蒙
ease 其实就是 cubic-bezier(0.25, 0.1, 0.25, 1)，linear 就是 cubic-bezier(0, 0, 1, 1)。想自定义，别靠感觉拖，先理解四个参数意义：前两个是 P1 控制点坐标（x1, y1），后两个是 P2（x2, y2），x 必须在 [0,1]，y 可以超限（实现“回弹”或“过冲”）。
容易忽略的限制：cubic-bezier() 的 x 坐标如果不在 [0,1] 区间，整个函数会被浏览器静默丢弃，降级为 ease —— 你调了半天发现没反应，大概率是手滑输成了 cubic-bezier(-0.1, 0.5, 1.2, 0.8)。
- 调试时用 Chrome DevTools 的动画面板直接拖动贝塞尔曲线，比手动改数字靠谱
- 要“先快后慢”，试试
cubic-bezier(0.4, 0, 0.2, 1)（类似ease-out） - 要“慢启动+急刹车”，避免
y1 > 1或y2 ，否则可能在 Safari 里表现异常
JavaScript 动画里还用得着 timing-function 吗
用 requestAnimationFrame 或 GSAP 等库时，transition-timing-function 完全不起作用——它只管 CSS transitions 和 animations。JS 动画的缓动逻辑得自己算，或者交给库处理。
这时候混淆 timing-function 和 easing function 容易翻车：CSS 的 ease 是一个插值规则，而 JS 里传给 animate() 的 easing 参数（如 "ease-in-out"）只是字符串标识，最终还是靠库内部映射成贝塞尔或数学函数。
- 纯 CSS 过渡 + JS 控制类名切换，timing-function 有效；纯 JS 改
style.transform，timing-function 无效 - 用 Web Animations API 时，
effect的easing字段支持和 CSS 一致的字符串，但底层仍是 JS 计算，不受 CSS 规则约束 - 别指望把
transition-timing-function: steps(4, end)搬到 JS 里——steps() 是 CSS 特有的逐帧语义，JS 得手动拆帧或用animation-timeline
timing-function 的复杂点不在语法，而在它始终依附于“谁在驱动动画”。CSS 里它是声明式约定，JS 里它要么被绕过，要么变成另一套契约。搞混这个边界，90% 的“为什么不动”问题就找到了。
