transition-timing-function 控制动画过程中的节奏分布而非总时长；它决定 transition-duration 指定时间段内各帧的速度变化，如匀速、先快后慢等，不影响整体播放时长。
transition-timing-function 控制的是“变化过程”，不是“总时长”
很多人调了 transition-duration 又改 transition-timing-function，发现动画“还是太快”，其实是混淆了两个概念：transition-duration 决定动画播多久（比如 0.3s），而 transition-timing-function 决定这 0.3 秒里每一帧怎么分配——是匀速？先快后慢？中间卡一下再冲？
它不改变总时间，只改变节奏分布。想让动画“看起来更慢”，不能靠调 timing function，得加 duration；想让它“更自然”，才轮到 timing function 出手。
常用值的实际行为差异：ease / linear / ease-in-out / cubic-bezier()
ease 是默认值，等价于 cubic-bezier(0.25, 0.1, 0.25, 1)，开头慢 → 中间快 → 结尾慢；linear 就是真匀速，容易显得机械；ease-in-out 开头结尾都缓，适合模态框淡入淡出。
-
cubic-bezier(0.4, 0, 0.2, 1)（即ease-in-out）比ease起始更柔和，但收尾更“稳”，适合按钮 hover 缩放 -
cubic-bezier(0.33, 1, 0.68, 1)是“缓出过冲回弹”效果，常用于菜单展开，但别用在表单验证提示上——用户会误以为状态没落定 - 用在线工具（如 cubic-bezier.com）调完记得复制完整
cubic-bezier(x1,y1,x2,y2)，少一个逗号就退化成ease
transition-timing-function 不生效的三个典型原因
写了 transition-timing-function: ease-in 却没效果？大概率卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
- 漏写了
transition-property或写成了all，结果其他属性（比如color）也在动，干扰了节奏感知 - 触发 transition 的属性不是“可过渡属性”，比如
display、height（从 0 到 auto）、visibility—— 这些根本不会走 timing function - CSS 优先级问题：后加载的样式或内联 style 覆盖了 timing function，用浏览器开发者工具检查 computed 栏里的
transition-timing-function是否真被应用
和 animation-timing-function 的关键区别在哪
transition-timing-function 只作用于属性变化的“单次响应”，比如 hover 进去、focus 获取；而 animation-timing-function 是动画关键帧之间的插值规则，可以配合 @keyframes 做多段节奏（比如先缩放再旋转再透明度变）。
别试图用 transition 实现弹跳（bounce）效果——它最多支持一段贝塞尔曲线，而 bounce 需要多个关键帧+多次 timing function 切换，必须用 @keyframes + animation-timing-function。
真要用 transition 模拟轻量回弹，只能靠 JS 触发两次 class 切换（进→出→再进），但维护成本高，不如直接上 animation。
