如何选择CSS transition的duration更自然？

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 没同步调整时。

1. ease-out：适合收尾动作（如菜单收起、tooltip消失），开头快、结尾缓
2. ease-in：适合启动动作（如按钮按下、提示弹出），开头慢、结尾快
3. 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 全拖进过渡队列，既无效又拖慢渲染。

移动端和桌面端要不要区别设

要，但不是靠媒体查询硬切，而是靠设备输入特性反推预期。

1. 触摸操作天然有延迟感，:active 状态建议用 0.06s–0.12s 配合 transform: scale(0.98)，比颜色变化更跟手
2. 桌面端 hover 反馈可稍长（0.2s–0.25s），因为鼠标移动更精准，用户愿意等一点质感
3. 避免为“适配移动端”强行缩短所有 duration，有些动画（如侧边栏滑出）反而需要更清晰的节奏来建立空间认知

真正影响体验的，从来不是数值本身，而是那个数值是否和用户此刻的手势、视线焦点、心理预期对齐——这点最容易被忽略，也最难靠工具自动修正。