transition-timing-function 支持 ease、linear、ease-in、ease-out、ease-in-out 五个预设值，分别对应不同贝塞尔曲线；step-start 和 step-end 为阶梯函数，非缓动。
transition-timing-function 支持哪些预设值
transition-timing-function 用来定义过渡过程的速度变化规律，不是线性匀速的。它接受几个关键字值，每个对应一条贝塞尔曲线：ease（默认，先慢后快再慢）、linear（匀速）、ease-in（慢入）、ease-out（慢出）、ease-in-out（慢入慢出）。
这些值本质是 cubic-bezier(0.25, 0.1, 0.25, 1.0) 这类四参数贝塞尔函数的别名。比如 ease 等价于 cubic-bezier(0.25, 0.1, 0.25, 1.0)，而 linear 就是 cubic-bezier(0, 0, 1, 1)。
实际使用时注意：
- 多个 transition 属性共存时，每个
transition声明需单独配transition-timing-function，不能靠继承 - 写在
transition简写里时，timing function 必须紧跟在持续时间之后，顺序错乱会导致整条声明失效 -
step-start和step-end是阶梯函数，不属于缓动，但常被误当作“缓动替代方案”——它们不平滑，慎用于视觉反馈类动画
用 cubic-bezier() 自定义缓动曲线的实操要点
浏览器开发者工具的动画面板（如 Chrome 的 Rendering → Animation Inspector）能拖拽控制点实时预览 cubic-bezier() 效果，比硬记数值靠谱得多。
立即学习“前端免费学习笔记（深入）”；
自定义时关键约束：两个控制点坐标必须在 [0, 1] 范围内，否则会被忽略并退回到 ease。例如 cubic-bezier(0.4, -0.2, 0.6, 1.4) 中的 -0.2 和 1.4 都越界，整条声明无效。
常见有效组合参考：
- 弹性回弹感：
cubic-bezier(0.68, -0.55, 0.27, 1.55)（注意：Y 值可略超 1，但 X 必须 ∈ [0,1]） - 缓慢启动 + 快速收尾：
cubic-bezier(0.34, 1.56, 0.64, 1) - iOS 风格流畅滚动惯性：
cubic-bezier(0.25, 0.46, 0.45, 0.94)
transition-timing-function 对不同属性的影响差异
缓动函数作用于整个过渡过程的「时间分配」，但它对视觉感知的影响因属性而异。比如：
- 对
opacity：线性（linear）和缓动差别直观，人眼敏感 - 对
transform: translateX()：慢入/慢出会让位移显得更“有重量”，但若配合will-change: transform，某些缓动曲线可能触发额外合成层，影响性能 - 对
height或width：用ease-in-out比linear更自然，但若元素含子内容重排（reflow），缓动越复杂，帧率波动风险越高
真正要注意的是：transition-timing-function 不改变过渡是否触发，只改变“怎么动”。如果某个属性本身不支持过渡（如 display），再复杂的缓动也无效。
为什么 transition 没有按预期缓动
最常见原因不是 timing function 写错了，而是过渡根本没生效。排查优先级如下：
- 确认触发了可过渡属性的变更（比如从
opacity: 1→opacity: 0，而不是display: block→display: none） - 检查是否遗漏
transition-property或简写中漏写了属性名，例如只写transition: 0.3s;默认只过渡all，但部分浏览器对all的兼容行为不一致 - 确认没有被更高优先级样式覆盖，比如用 JS 直接改
style.transitionTimingFunction后又被 CSS 规则重置 - 在伪类（如
:hover）中定义transition时，要确保初始状态也定义了目标属性的起始值（否则从 “无定义” 到 “有值” 可能跳变）
缓动本身看不见，得靠 DevTools 的动画时间轴逐帧看曲线是否贴合预期——很多“没效果”其实是动得太快或太慢，而非函数本身问题。
