transition-duration 表示动画持续时间而非速度感，真正影响快慢的是变化量÷时间与缓动曲线；推荐图标 hover 用 0.2s～0.3s、面板展开用 0.3s～0.4s；cubic-bezier() 比预设关键词更可控，性能敏感场景应优先使用 transform/opacity 避免重排。
transition-duration 控制快慢，不是数值越大越“慢”而是越“长”
很多人误以为 transition-duration 设成 2 就比 0.5 “慢”，其实它表示的是整个动画持续的**时间长度**（单位是秒或毫秒），和“速度感”不直接等价。真正影响快慢感知的是「变化量 ÷ 时间」+ 缓动曲线形状。
比如从 width: 100px 变到 300px，用 duration: 0.3s 看起来就比 2s 更“急促”，但若同时改颜色（无明显位移），0.3s 反而显得突兀。所以调速前先确认属性是否适合短时过渡。
-
duration推荐值：图标 hover 用0.2s～0.3s，面板展开用0.3s～0.4s，避免低于0.1s（人眼难识别）或高于0.6s（交互迟滞感） - 支持小数：
0.25s合法，.25s也合法，但建议写全0.25s避免解析歧义 - 不能为
0s（此时退化为即时切换，transition不触发）
cubic-bezier() 是最可控的缓动函数，别只依赖预设关键词
ease、linear、ease-in-out 这些关键词本质是 cubic-bezier() 的简写。真正调手感得自己配贝塞尔曲线——尤其当默认 ease（cubic-bezier(0.25, 0.1, 0.25, 1)）开头太冲、结尾太顿时。
常用调试思路：
立即学习“前端免费学习笔记（深入）”；
- 想要更柔和的启动？把第一个控制点 x 值调小，比如
cubic-bezier(0.1, 0.1, 0.25, 1) - 想让结束更干脆？把第二个控制点 y 值压低，比如
cubic-bezier(0.3, 0.1, 0.7, 0.8) - 完全线性运动（匀速）必须用
cubic-bezier(0, 0, 1, 1)，linear关键词虽等效，但某些旧安卓 WebView 对linear解析异常，直接写贝塞尔更稳
button {
transition: background-color 0.25s cubic-bezier(0.3, 0.1, 0.7, 0.9);
}
transition-timing-function 对多个属性生效时容易被覆盖
当你写 transition: all 0.3s ease;，所有可过渡属性都共用同一个缓动函数。但若拆开写，比如：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.box {
transition-property: width, height;
transition-duration: 0.3s, 0.5s;
transition-timing-function: ease-in, ease-out;
}
这时 width 用 ease-in，height 用 ease-out —— 顺序严格一一对应。漏掉某个属性，或数量不匹配，浏览器会静默截断多余项，导致部分属性回退到默认 ease。
常见陷阱：
- 用
transition: width 0.3s, opacity 0.2s;却没写缓动函数 → 两者都用默认ease，不是分别继承 - 加了
transition-delay但没对齐数组长度 → 延迟值也会被截断，opacity可能没延迟 - 推荐写法：单属性过渡优先用完整声明，如
transition: width 0.3s ease-in 0.1s;
性能敏感场景慎用 layout 触发属性 + 复杂 timing-function
像 width、height、top、left 这类会触发重排（reflow）的属性，叠加高频率贝塞尔计算（尤其自定义 cubic-bezier() 在低端设备上），可能导致掉帧。Chrome DevTools 的 Rendering 面板里勾选 “FPS Meter” 和 “Paint Flashing” 能直观看到问题。
优化方向：
- 优先用
transform和opacity替代：它们走合成层，不触发布局，transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.4, 1);更稳 - 避免在
:hover中突然开启多属性过渡，尤其是含box-shadow或渐变背景——这些会增加每帧绘制成本 - 移动端务必测试 iOS Safari，它对复杂
cubic-bezier()的插值精度略低，有时看起来“卡两帧”
缓动函数不是调得越花越好，关键看用户是否注意到变化——多数情况下，0.25s 配一个微调过的 cubic-bezier(0.3, 0.1, 0.5, 1) 比套用炫酷但难收敛的曲线更可靠。
