transition-duration无标准值，应依交互意图设合理区间：悬停变色0.15s–0.25s，菜单下拉0.3s–0.4s，模态框淡入0.25s–0.35s；需匹配timing-function并分写多属性过渡，移动端触控反馈宜更短（0.06s–0.12s），桌面hover可稍长（0.2s–0.25s）。
transition-duration该设多少才不突兀
没有“标准值”，只有匹配交互意图的合理区间。0.15s不是快，0.45s也不是慢——关键看用户此刻在做什么、期待什么反馈。
悬停按钮变色：用 0.15s–0.25s，短到不打断浏览，长到能被感知；菜单下拉展开：用 0.3s–0.4s，给内容位移留出可读缓冲；模态框淡入：选 0.25s–0.35s，太快像闪屏，太慢让人怀疑加载失败。
别凭感觉填数字，先问自己：这个变化是“响应点击”还是“揭示内容”？前者要快，后者要稳。
为什么改了duration还是显得假
单调缩小时长只会让动画更生硬，尤其当 transition-timing-function 没同步调整时。
立即学习“前端免费学习笔记（深入）”；
-
ease-out：适合收尾动作（如菜单收起、tooltip消失），开头快、结尾缓 -
ease-in：适合启动动作（如按钮按下、提示弹出），开头慢、结尾快 -
cubic-bezier(0.34, 1.56, 0.64, 1)：比默认ease更轻盈，适合现代 UI 的微动效
例如把下拉菜单从 0.5s linear 改成 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)，节奏感立刻不同——不是更快了，而是“动得更可信”。
多属性过渡时duration怎么配
不同属性物理意义不同，不能共用一个时长。比如背景色变化和位移动画，人眼对它们的敏感度和预期节奏完全不同。
推荐写法是显式分写：
button {
transition: background-color 0.2s ease,
transform 0.18s cubic-bezier(0.2, 0.8, 0.4, 1),
box-shadow 0.25s ease-out;
}
这样既能控制每项节奏，也避免因某项 duration 缺失而回退到 0s 导致跳变。
注意：transition: all 0.3s 看似省事，但会把 font-size、border-width 甚至 z-index 全拖进过渡队列，既无效又拖慢渲染。
移动端和桌面端要不要区别设
要，但不是靠媒体查询硬切，而是靠设备输入特性反推预期。
- 触摸操作天然有延迟感，
:active状态建议用0.06s–0.12s配合transform: scale(0.98)，比颜色变化更跟手 - 桌面端 hover 反馈可稍长（
0.2s–0.25s），因为鼠标移动更精准，用户愿意等一点质感 - 避免为“适配移动端”强行缩短所有 duration，有些动画（如侧边栏滑出）反而需要更清晰的节奏来建立空间认知
真正影响体验的，从来不是数值本身，而是那个数值是否和用户此刻的手势、视线焦点、心理预期对齐——这点最容易被忽略，也最难靠工具自动修正。
