cubic-bezier() 是唯一能精细控制缓动曲线的方案，ease、linear、ease-in-out 等仅为固定贝塞尔点的快捷写法；实际开发中需按交互场景选择特定值，如模态框用 cubic-bezier(0.4, 0, 0.2, 1)，Material Design 推荐 cubic-bezier(0.25, 0.46, 0.45, 0.94)；hover 与 click 应分设曲线，避免混用；JS 控制时须显式声明过渡属性并确保优先级，数值保留两位小数即可，精度不影响渲染但影响解析性能。
transition-timing-function 哪些值真有用
cubic-bezier() 是唯一能精细控制曲线的方案，ease、linear、ease-in-out 这些预设值只是四个固定贝塞尔点的快捷写法。实际项目里，ease 太“软”，linear 又太机械，多数交互需要微调。
-
cubic-bezier(0.4, 0, 0.2, 1)（即ease-in-out的变体）适合模态框淡入淡出：起始不突兀，结束不拖沓 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)是 Material Design 推荐的“标准缓动”，按钮反馈、卡片展开都稳 - 避免用
cubic-bezier(0, 0, 1, 1)—— 它等价于linear，但可读性差，还可能被误认为是自定义曲线
浏览器对超出 [0,1] 范围的 y 值（即第二个和第四个参数）是允许的，这能做出回弹或 overshoot 效果，但 iOS Safari 旧版本会降级为 ease，慎用于关键动效。
hover 和 click 触发动画该用不同曲线
悬停（:hover）响应要快、收得利落；点击（:active 或 JS 触发）则需更明确的起止感知。混用同一 transition-timing-function 会让交互节奏混乱。
- 悬停动效建议用
cubic-bezier(0.22, 0.61, 0.36, 1)：加速快，0.3s 内完成，避免用户移开鼠标时还在动 - 点击反馈推荐
cubic-bezier(0.34, 1.56, 0.64, 1)：开头稍缓，中间冲力强，结尾带轻微回压感，模拟真实按压 - 不要用
ease-in做 hover —— 起始太慢，用户会觉得“卡了一下才开始”
注意：CSS transition 不会自动区分触发方式，必须靠 class 切换或伪类分别定义。直接在基础选择器上写死一个 transition 就等于把所有行为绑死在同一曲线上。
立即学习“前端免费学习笔记（深入）”；
JavaScript 控制过渡时 timing-function 容易被覆盖
用 JS 添加 class 启动动画时，如果目标元素已有内联 style.transition，或 CSS 中用了 all 作为过渡属性，transition-timing-function 很可能被忽略或意外重置。
- 显式声明要过渡的属性，例如
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)，别偷懒写transition: all 0.25s ease - JS 添加 class 前，确保该 class 的规则优先级高于原有样式，否则
!important都不一定救得回来 - Chrome DevTools 的 “Animations” 面板能看到实时生效的 timing-function，但只显示计算后的贝塞尔值（比如把
ease展开成cubic-bezier(0.25, 0.1, 0.25, 1)），调试时盯住这个展开值更准
一个典型坑：transform 和 opacity 同时过渡，却只给其中一项配了 curve，另一项会退回到默认 ease —— 看似没报错，但两条轨迹根本不同步。
性能敏感场景下，cubic-bezier 的数值精度有影响
不是越长的小数位越“精准”。浏览器解析 cubic-bezier(0.25000001, 0.46000002, 0.45000003, 0.94000004) 和 cubic-bezier(0.25, 0.46, 0.45, 0.94) 渲染结果完全一致，但前者增加 CSS 解析负担，尤其在大量元素批量动画时。
- 保留两位小数足够，三位是上限，不要凑四位
- 所有主流浏览器对贝塞尔点的容错范围是 ±0.001，超出这个误差不会导致渲染异常，但会失去可维护性
- 如果用工具生成曲线（比如 cubic-bezier.com），复制后手动截断到两位小数，再验证一次动效是否符合预期
真正影响性能的是曲线本身是否引发 layout 或 paint —— 比如用 cubic-bezier(0, 1, 1, 0) 做无限循环缩放，再平滑也会卡顿。曲线只是调度器，别让它背硬件渲染的锅。
