transition-timing-function支持ease、linear、ease-in、ease-out四个预设值，分别对应不同贝塞尔曲线；还可通过cubic-bezier()自定义，x值必须在[0,1]内，y值超出可能触发回弹但兼容性受限。
transition-timing-function 支持哪些预设值
transition-timing-function 不是控制“快慢”的数值，而是定义速度变化的曲线形状。它影响的是过渡过程中的加速度分布，而非总时长（总时长由 transition-duration 决定）。
常见预设值有四个：ease（默认，先慢后快再慢）、linear（匀速）、ease-in（慢入）、ease-out（慢出）。它们对应不同贝塞尔曲线，浏览器内建实现，无需手写参数。
-
ease适合大多数 UI 交互，视觉自然，但容易被误认为“不够快”——其实只是起始和结束有缓冲 -
linear在拖拽、进度条等需要可预测节奏的场景更合适，但用在按钮上会显得生硬 -
ease-in适合入场动画（如下拉菜单展开），ease-out更适合收起动作（如 tooltip 消失）
如何用 cubic-bezier() 自定义过渡节奏
当预设值不够用时，cubic-bezier(x1, y1, x2, y2) 是唯一标准方式。四个参数必须是 0–1 范围内的数字，代表贝塞尔曲线两个控制点的坐标。
例如 cubic-bezier(0.25, 0.46, 0.45, 0.94) 是一个常用缓动：比 ease 入场更轻、收尾更利落，常用于 Material Design 风格动效。
立即学习“前端免费学习笔记（深入）”；
- 第一个控制点
y值 > 1 会导致“回弹”效果（如cubic-bezier(0.25, 1.5, 0.75, -0.5)），但部分旧版 Safari 不支持超出 [0,1] 的 y 值 - x 值必须严格在 [0,1] 内，否则整个声明会被浏览器忽略（不报错，但退回到
ease） - 调试建议：用 Chrome DevTools 的动画检查器实时拖动控制点，比手调数字高效得多
transition-timing-function 对性能的影响很小，但别滥用
这个属性本身不触发重排或重绘，纯属合成层计算，对性能几乎无负担。真正影响流畅度的是过渡属性本身是否可硬件加速（如 transform 和 opacity），而不是你用了 ease-in-out 还是 linear。
- 如果过渡目标是
width或height，再好的 timing function 也救不了强制重排带来的卡顿 - 多个属性同时过渡时，若只给其中一部分指定
transition-timing-function，其余会继承默认ease，容易造成节奏不一致 - 慎用
steps()（逐帧动画），它在某些安卓 WebView 中存在兼容性问题，且无法与贝塞尔曲线混用
transition-timing-function 不生效的常见原因
写对了语法却没看到效果？大概率不是函数本身的问题，而是过渡未被触发或被覆盖。
- 忘记设置
transition-property或transition-duration—— 单独写transition-timing-function完全无效 - 使用简写
transition时顺序写错，比如transition: all 0.3s ease-in; background-color 0.2s;，后者会覆盖前者，导致background-color没有 timing function - CSS 优先级冲突：父元素或更通用选择器里写了
transition: none，会直接禁用所有过渡 - 元素初始状态和目标状态之间没有可过渡的属性差（例如从
display: none切到block，display不可过渡）
transition-duration；timing function 只决定这“一秒里前 200ms 干什么、后 100ms 怎么收尾”。 
