transition-timing-function支持ease、linear、ease-in、ease-out、ease-in-out五个预设关键词，分别对应不同加速度组合；所有关键词等价于特定cubic-bezier()函数，仅支持单段曲线，复杂节奏需手写cubic-bezier(x1,y1,x2,y2)，y值可越界以实现回弹或冲过头效果。
transition-timing-function 支持哪些预设值
它不是“动画曲线编辑器”，而是几个固定数学函数的快捷名。最常用的是 cubic-bezier()，但浏览器也内置了 5 个关键词： ease、linear、ease-in、ease-out、ease-in-out。
这些词对应不同起止加速度组合：ease 是默认值（先慢后快再慢），linear 是匀速，ease-in 是从静止开始加速，ease-out 是减速到停。别指望 ease-in 能“比 ease 更柔和”——它只是起点更突兀，实际效果常显得生硬。
-
ease等价于cubic-bezier(0.25, 0.1, 0.25, 1)，适合大多数 UI 变化 -
linear对应cubic-bezier(0, 0, 1, 1)，用在颜色渐变或滚动条拖动时更可控 - 所有关键词都只能控制“单段”曲线，没法实现先弹跳再缓入这种复合行为
怎么手写 cubic-bezier() 控制精确节奏
四个参数是贝塞尔控制点坐标：cubic-bezier(x1, y1, x2, y2)，x 必须在 [0,1] 区间，y 可以超出（比如负值让元素“回抽”，正值让它“冲过头”）。
常见误区是把 y 值卡死在 0–1：那只会得到平滑但平淡的曲线。真正有表现力的过渡往往靠“越界”y 值实现：
立即学习“前端免费学习笔记（深入）”；
- 要轻微回弹效果，试试
cubic-bezier(0.2, 0.8, 0.4, 1.4)（第二个 y > 1） - 要启动更果断，用
cubic-bezier(0.4, 0, 0.6, 1)（第一个 y - 调试时直接打开 Chrome DevTools 的动画检查器，点开
transition-timing-function小图标，拖动控制点比写数字直观得多
transition-timing-function 不生效的典型原因
它只对“可插值属性”起作用，比如 opacity、transform、width。但以下情况会完全失效：
- 目标属性本身不支持过渡，例如
display（切换none/block时无视 timing 函数） - 没有明确指定
transition-property或用了all，但某些属性（如height从auto变化）无法计算中间值 - CSS 里写了
transition: all 0.3s，但 JS 中通过 class 切换触发，而新 class 恰好覆盖了旧 transition 声明，导致 timing 函数被重置为默认ease - 父元素有
transform: translateZ(0)或will-change: transform，但子元素的transition-timing-function在某些 Safari 版本中会被忽略
和 animation-timing-function 有什么区别
名字像，但作用域完全不同：transition-timing-function 只管“属性值变化过程”，而 animation-timing-function 是 @keyframes 规则的一部分，控制整个关键帧动画的时间节奏。
一个容易混淆的点：如果同时用了 transition 和 @keyframes，timing 函数互不影响。比如按钮 hover 用 transition: transform 0.2s ease-out，点击后又触发一个 animate-bounce 动画，那 bounce 的加速逻辑由 @keyframes 内的 animation-timing-function 决定，跟 hover 过渡无关。
真正要注意的是性能：用 transform + opacity 配合任意 transition-timing-function 都能走合成层；但用 left / top 或 width 就可能触发布局重排，此时再精细的曲线也只是让卡顿看起来更“顺滑”而已。
